@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";

 * !HTML5 elements
---------------------------------------------------------- */
header, footer, nav, section, aside, article
{ display: block;} body {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,'ＭＳ Ｐゴシック',Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
-webkit-text-size-adjust: none;
line-height: 1.5;
background:#fff;
color: #212121;
}
@media (max-width: 767px) {
body {
font-size: 16px;
}
}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ vertical-align: top; max-width: 100%;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ }
abbr, acronym
{ border: 0;} .clearfix {
display: block;
min-height: 1%;
}
.clearfix:after {
clear: both;
content:".";
display: block;
height: 0;
visibility: hidden;
}
* html .clearfix {
height: 1%;/*\*//*/height: auto;
overflow: hidden;/**/} html { overflow-y: scroll;}
body { }
@media print {
html,
html body { *zoom: 0.65;}
}

body{
font-family: 'Lato', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
} .mtb0 {
margin-bottom:0 !important;
margin-top:0 !important;
}
.m1 {
margin: 1px!important;
}
.m3 {
margin: 3px!important;
}
.m5 {
margin: 5px!important;
}
.m10 {
margin: 10px!important;
}
.m20 {
margin: 20px!important;
}
.m30 {
margin: 30px!important;
}
.mt0 {
margin-top: 0!important;
}
.mt1 {
margin-top: 1px!important;
}
.mt2 {
margin-top: 2px!important;
}
.mt3 {
margin-top: 3px!important;
}
.mt4 {
margin-top: 4px!important;
}
.mt5 {
margin-top: 5px!important;
}
.mt6 {
margin-top: 6px!important;
}
.mt7 {
margin-top: 7px!important;
}
.mt8 {
margin-top: 8px!important;
}
.mt9 {
margin-top: 9px!important;
}
.mt10 {
margin-top: 10px!important;
}
.mt11 {
margin-top: 11px!important;
}
.mt12 {
margin-top: 12px!important;
}
.mt13 {
margin-top: 13px!important;
}
.mt14 {
margin-top: 14px!important;
}
.mt15 {
margin-top: 15px!important;
}
.mt20 {
margin-top: 20px!important;
}
.mt25 {
margin-top: 25px!important;
}
.mt30 {
margin-top: 30px!important;
}
.mt35 {
margin-top: 35px!important;
}
.mt40 {
margin-top: 40px!important;
}
.mt50 {
margin-top: 50px!important;
}
.mt60 {
margin-top: 60px!important;
}
.mt70 {
margin-top: 70px!important;
}
.mt80 {
margin-top: 80px!important;
}
.mt90 {
margin-top: 90px!important;
}
.mr1 {
margin-right: 1px!important;
}
.mr2 {
margin-right: 2px!important;
}
.mr3 {
margin-right: 3px!important;
}
.mr4 {
margin-right: 4px!important;
}
.mr5 {
margin-right: 5px!important;
}
.mr6 {
margin-right: 6px!important;
}
.mr7 {
margin-right: 7px!important;
}
.mr8 {
margin-right: 8px!important;
}
.mr9 {
margin-right: 9px!important;
}
.mr10 {
margin-right: 10px!important;
}
.mr11 {
margin-right: 11px!important;
}
.mr12 {
margin-right: 12px!important;
}
.mr13 {
margin-right: 13px!important;
}
.mr14 {
margin-right: 14px!important;
}
.mr15 {
margin-right: 15px!important;
}
.mr20 {
margin-right: 20px!important;
}
.mr25 {
margin-right: 25px!important;
}
.mr30 {
margin-right: 30px!important;
}
.mr40 {
margin-right: 40px!important;
}
.mr50 {
margin-right: 50px!important;
}
.mr60 {
margin-right: 60px!important;
}
.mr70 {
margin-right: 70px!important;
}
.mr80 {
margin-right: 80px!important;
}
.mr90 {
margin-right: 90px!important;
}
.mr100 {
margin-right: 100px!important;
}
.mb0 {
margin-bottom: 0!important;
}
.mb1 {
margin-bottom: 1px!important;
}
.mb2 {
margin-bottom: 2px!important;
}
.mb3 {
margin-bottom: 3px!important;
}
.mb4 {
margin-bottom: 4px!important;
}
.mb5 {
margin-bottom: 5px!important;
}
.mb6 {
margin-bottom: 6px!important;
}
.mb7 {
margin-bottom: 7px!important;
}
.mb8 {
margin-bottom: 8px!important;
}
.mb9 {
margin-bottom: 9px!important;
}
.mb10 {
margin-bottom: 10px!important;
}
.mb11 {
margin-bottom: 11px!important;
}
.mb12 {
margin-bottom: 12px!important;
}
.mb13 {
margin-bottom: 13px!important;
}
.mb14 {
margin-bottom: 14px!important;
}
.mb15 {
margin-bottom: 15px!important;
}
.mb20 {
margin-bottom: 20px!important;
}
.mb25 {
margin-bottom: 25px!important;
}
.mb30 {
margin-bottom: 30px!important;
}
.mb40 {
margin-bottom: 40px!important;
}
.mb50 {
margin-bottom: 50px!important;
}
.mb60 {
margin-bottom: 60px!important;
}
.mb70 {
margin-bottom: 70px!important;
}
.mb80 {
margin-bottom: 80px!important;
}
.mb90 {
margin-bottom: 90px!important;
}
.mb100 {
margin-bottom: 100px!important;
}
.ml1 {
margin-left: 1px!important;
}
.ml2 {
margin-left: 2px!important;
}
.ml3 {
margin-left: 3px!important;
}
.ml4 {
margin-left: 4px!important;
}
.ml5 {
margin-left: 5px!important;
}
.ml6 {
margin-left: 6px!important;
}
.ml7 {
margin-left: 7px!important;
}
.ml8 {
margin-left: 8px!important;
}
.ml9 {
margin-left: 9px!important;
}
.ml10 {
margin-left: 10px!important;
}
.ml11 {
margin-left: 11px!important;
}
.ml12 {
margin-left: 12px!important;
}
.ml13 {
margin-left: 13px!important;
}
.ml14 {
margin-left: 14px!important;
}
.ml15 {
margin-left: 15px!important;
}
.ml20 {
margin-left: 20px!important;
}
.ml25 {
margin-left: 25px!important;
}
.ml30 {
margin-left: 30px!important;
}
.ml40 {
margin-left: 40px!important;
}
.ml50 {
margin-left: 50px!important;
}
.ml60 {
margin-left: 60px!important;
}
.ml70 {
margin-left: 70px!important;
}
.ml80 {
margin-left: 80px!important;
}
.ml90 {
margin-left: 90px!important;
}
.ml100 {
margin-left: 100px!important;
}  .p1 {
padding: 1px!important;
}
.p3 {
padding: 3px!important;
}
.p5 {
padding: 5px!important;
}
.p10 {
padding: 10px!important;
}
.p15 {
padding: 15px!important;
}
.p20 {
padding: 20px!important;
}
.pt0 {
padding-top: 0!important;
}
.pt1 {
padding-top: 1px!important;
}
.pt2 {
padding-top: 2px!important;
}
.pt3 {
padding-top: 3px!important;
}
.pt4 {
padding-top: 4px!important;
}
.pt5 {
padding-top: 5px!important;
}
.pt6 {
padding-top: 6px!important;
}
.pt7 {
padding-top: 7px!important;
}
.pt8 {
padding-top: 8px!important;
}
.pt9 {
padding-top: 9px!important;
}
.pt10 {
padding-top: 10px!important;
}
.pt11 {
padding-top: 11px!important;
}
.pt12 {
padding-top: 12px!important;
}
.pt13 {
padding-top: 13px!important;
}
.pt14 {
padding-top: 14px!important;
}
.pt15 {
padding-top: 15px!important;
}
.pt20 {
padding-top: 20px!important;
}
.pt25 {
padding-top: 25px!important;
}
.pt30 {
padding-top: 35px!important;
}
.pr1 {
padding-right: 1px!important;
}
.pr2 {
padding-right: 2px!important;
}
.pr3 {
padding-right: 3px!important;
}
.pr4 {
padding-right: 4px!important;
}
.pr5 {
padding-right: 5px!important;
}
.pr6 {
padding-right: 6px!important;
}
.pr7 {
padding-right: 7px!important;
}
.pr8 {
padding-right: 8px!important;
}
.pr9 {
padding-right: 9px!important;
}
.pr10 {
padding-right: 10px!important;
}
.pr11 {
padding-right: 11px!important;
}
.pr12 {
padding-right: 12px!important;
}
.pr13 {
padding-right: 13px!important;
}
.pr14 {
padding-right: 14px!important;
}
.pr15 {
padding-right: 15px!important;
}
.pr16 {
padding-right: 16px!important;
}
.pr17 {
padding-right: 17px!important;
}
.pr18 {
padding-right: 18px!important;
}
.pr19 {
padding-right: 19px!important;
}
.pr20 {
padding-right: 20px!important;
}
.pr25 {
padding-right: 25px!important;
}
.pr30 {
padding-right: 30px!important;
}
.pb0 {
padding-bottom: 0!important;
}
.pb1 {
padding-bottom: 1px!important;
}
.pb2 {
padding-bottom: 2px!important;
}
.pb3 {
padding-bottom: 3px!important;
}
.pb4 {
padding-bottom: 4px!important;
}
.pb5 {
padding-bottom: 5px!important;
}
.pb6 {
padding-bottom: 6px!important;
}
.pb7 {
padding-bottom: 7px!important;
}
.pb8 {
padding-bottom: 8px!important;
}
.pb9 {
padding-bottom: 9px!important;
}
.pb10 {
padding-bottom: 10px!important;
}
.pb11 {
padding-bottom: 11px!important;
}
.pb12 {
padding-bottom: 12px!important;
}
.pb13 {
padding-bottom: 13px!important;
}
.pb14 {
padding-bottom: 14px!important;
}
.pb15 {
padding-bottom: 15px!important;
}
.pb20 {
padding-bottom: 20px!important;
}
.pb25 {
padding-bottom: 25px!important;
}
.pb30 {
padding-bottom: 30px!important;
}
.pl1 {
padding-left: 1px!important;
}
.pl2 {
padding-left: 2px!important;
}
.pl3 {
padding-left: 3px!important;
}
.pl4 {
padding-left: 4px!important;
}
.pl5 {
padding-left: 5px!important;
}
.pl6 {
padding-left: 6px!important;
}
.pl7 {
padding-left: 7px!important;
}
.pl8 {
padding-left: 8px!important;
}
.pl9 {
padding-left: 9px!important;
}
.pl10 {
padding-left: 10px!important;
}
.pl11 {
padding-left: 11px!important;
}
.pl12 {
padding-left: 12px!important;
}
.pl13 {
padding-left: 13px!important;
}
.pl14 {
padding-left: 14px!important;
}
.pl15 {
padding-left: 15px!important;
}
.pl20 {
padding-left: 20px!important;
}
.pl25 {
padding-left: 25px!important;
}
.pl30 {
padding-left: 30px!important;
} .tal {
text-align:left !important;
}
.tac {
text-align:center !important;
}
.tar {
text-align:right !important;
}
.vat {
vertical-align:top !important;
}
.vam {
vertical-align:middle !important;
}
.vab {
vertical-align:bottom !important;
} a {
color:#212121;
text-decoration: none;
transition: all 0.5s !important;
-moz-transition: all 0.5s !important; -webkit-transition: all 0.5s !important; }
a:hover {
text-decoration: underline;
transition: all 0.5s !important;
-moz-transition: all 0.5s !important; -webkit-transition: all 0.5s !important; }
.op,
.op a,
.op img,
.op input {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.op:hover,
.op a:hover,
.op:hover img,
.op:hover input {
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; -webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
} .ffoswald {
font-family: 'Oswald', sans-serif;
} .visible-pc {
display: block !important;
}
.visible-ts {
display: none !important;
}
@media (max-width: 767px) {
.visible-pc {
display: none !important;
}
.visible-ts {
display: block !important;
}
}
.imgfull img {
width:100%;
}
.bornone {
border:none !important;
}

.ftbox {
overflow: hidden;
*zoom: 1;
} #wrapper {
background:#f3f3f3;
}
.inner {
max-width:1230px;
margin:0 auto;
}
@media (max-width: 767px) {
#wrapper {
min-width:inherit;
padding-top:40px;
z-index: 0;
}
.inner {
max-width:inherit;
margin:auto;
padding: 0 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
} #header {
display: block;
padding:0;
width:100%;
position:fixed;
left:0;
top:0;
}
#header .headerin {
display:none;
}
#header .headersp {
display:block;
overflow:hidden;
background: #ffffff;
position: sticky;
top: 0;
padding: 8px 0;
border-bottom: 1px solid #666;
}
#header .headerlogosp {
width: 0;
display: none;
}
#header .headercont {
overflow: hidden;
display: flex;
justify-content: center;
width: 100%;
}
#header .headercont > form{
align-self: center;
width: 56%;
}
#header .headercont li {
margin: 0 4px;
align-self: center;
}
#header .headercont > li:nth-child(2){
margin-left: 46px;
}
#header .menu > p, .menuCat > p{
background: #fff;
font-size: .8rem;
font-weight: bold;
padding: .2rem .6rem;
color: #666;
margin: .6rem auto .2rem;
}
.spwpdl{ text-align: center;}
.spwpdl > a > img{
border: 1px solid #666;
width: 84%;
margin: 1rem auto 0;
}
.spnewsletter{
background: #EEF0F5;
color: #333;
margin: .6rem auto 0;
width: 84%;
display: block;
}
.spnewsletter > div{
background: #47537A;
color: #fff;
padding: .2rem .4rem;
}
.spnewsletter > div > h2{
text-align: center;
font-size: .8rem;
font-weight: bold;
}
.spnewsletter > div > p{
font-size: .7rem;
margin: 2px auto;
text-align: center;
} #header .headersp #sp-sidebar nav {
position: fixed;
top: 0;
left: -420px;
width: 100%;
height: 100%;
padding-top: 40px;
background: #3a7b43;
font-size: .8rem;
box-sizing: border-box;
z-index: 999;
}
#header .headersp #sp-sidebar nav > div{
width: 100%;
max-height: calc(100vh - 46px);
overflow-y: auto;
margin: 0;
}
.menuCat > li{
display: inline-flex!important;
padding: .4rem 0 .4rem .2rem!important;
width: calc(86%/2);
}
#header .headersp #sp-sidebar nav ul li {
display:block;
padding: .4rem;
}
#header .headersp #sp-sidebar nav ul li a {
text-decoration: none;
color: #ddd;
font-size: .8rem;
}
#header .headersp #sp-sidebar .btn-gnavi {
position: fixed;
top: 20px;
left: 18px;
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 400ms;
transition: all 400ms;
}
#header .headersp #sp-sidebar .btn-gnavi span {
position: absolute;
width: 22px;
height: 2px;
background: #666;
-webkit-transition: all 400ms;
transition: all 400ms;
}
#header .headersp #sp-sidebar .btn-gnavi span:nth-child(1) {
top: 0;
}
#header .headersp #sp-sidebar .btn-gnavi span:nth-child(2) {
top: 6px;
}
#header .headersp #sp-sidebar .btn-gnavi span:nth-child(3) {
top: 12px;
}
#header .headersp #sp-sidebar .btn-gnavi.open span {
background: #fff;
}
#header .headersp #sp-sidebar .btn-gnavi.open span {
width: 16px;
}
#header .headersp #sp-sidebar .contents section p {
position: absolute;
top: 50%;
width: 30%;
line-height: 1.4;
font-size: 20px;
color: #fff;
}
#header .headersp #sp-sidebar .contents section:nth-child(odd) p {
left: 10%;
}
#header .headersp #sp-sidebar .contents section:nth-child(even) p {
right: 10%;
} .homeIcon > i{
font-size: 1.6rem;
padding: 8px 4px;
color: #555;
margin: 0 auto;
vertical-align: bottom;
}
.headerLink{
font-size: .6rem;
font-weight: bold;
margin-right: 4px;
padding: 0 0 3px 0;
border-bottom: 2px solid #3b7a43;
}
@media (min-width: 960px) {
#header { display: none;}
} .menubox {
padding:70px 10px 0 10px;
position:relative;
}
.menuclose {
position:absolute;
right:0;
top:0;
z-index:2;
}
.menulink li {
font-size:16px;
color:#fff;
text-align:center;
margin-bottom:25px;
}
.menulink li a {
color:#fff;
display:inline-block;
}
.menutel {
text-align:center;
margin-bottom:20px;
}
.menucontact {
text-align:center;
} .sp_menu {
position:fixed;
top:0;
left:0;
z-index:99;
display:none;
background:#007542;
width:100%;
height:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
} #teaser{
display: block;
padding: .2rem;
margin: 0 auto;
}
.teaserL{
text-align: center;
margin: 1rem auto .4rem;
}
.teaserL > a > h2{
font-size: 1.6rem;
color: #fff;
}
.teaserL > a:hover{text-decoration: none;}
.teaserL > p{
color: #fff;
text-decoration: none;
font-size: .6rem;
}
.teaserR{ display: none;}
@media (min-width: 960px){
#teaser{
min-width: 320px;
max-width: 1102px;
display: flex;
padding: .4rem 1rem;
}
.teaserL{
display: inline-block;
width: calc(90%/2);
margin: 0 0 0 2rem;
align-items: center;
text-align: left;
}
.teaserL > h1 > a > img{
width: 24%;
}
.teaserL > p{
font-size: .8rem;
}
.teaserR{
color: #fff;
display: flex;
width: calc(100%/2);
justify-content: flex-end;
text-align: center;
}
.teaserR > div{
width: calc(100%/2);
}
.teaserR > div > p:first-child{
margin-bottom: .8rem;
}
.teaserR > div > p{
font-size: .8rem;
margin: .6rem auto;
text-align: center;
}
.teaserR > div > p > i{
font-size: 1rem;
margin-left: .8rem;
transform: rotate(-18deg);
}
.teaserR > div > a{
color: #ffffff;
background: #cc0000;
border: 1px solid #990000;
padding: .8rem 3rem;
border-radius: 40px;
font-size: .8rem;
box-shadow: 0 1px 3px #333;
}
.teaserR > div > a:hover{
transition: .5s;
color: #cc0000;
background: #ffffff;
border: 1px solid #990000;
text-decoration: none;
}
.teaserR > div > a > i{
font-size: 1.2rem;
margin-right: 8px;
vertical-align: sub;
}
.header-nav{
text-align: center;
border-bottom: 1px solid #aaa;
position: sticky;
top: 0;
z-index: 1;
}
.header-nav > nav >ul{
display: inline-flex;
background: #fff;
width: 1102px;
justify-content: center;
}
.header-nav > nav > ul >li{ padding: .2rem .8rem;}
.header-nav > nav > ul >li > a{
color: #3b7a43;
font-size: .9rem;
}
.header-nav > nav > ul >li > a:hover{ text-decoration: none;}
.teasermess{ margin-bottom: 2rem;}
.teasercountry{
background: #fff;
font-size: .7rem;
padding: .2rem .4rem;
display: inline-block;
margin-right: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
position: relative;
color: #333;
}
.teasertel{
font-size: 1.8rem;
vertical-align: middle;
}
.teasertime{
font-size: .7rem;
}
} article{
background: #fff;
}
#contents{
padding: 8px 16px;
}
#main{
width: 100%;
float:none;
}
#sider{ display: none;}
@media (min-width: 960px){
#contents {
padding: 2rem 1rem;
max-width: 1102px;
margin: 0 auto;
position:relative;
}
#main {
width: 76%;
display: inline-block;
}
#sider {
display: block;
width: 22%;
float: right;
position: sticky;
position: -webkit-sticky;
top: 0;
}
#sider input[type=text] {
border:1px #212121 solid; padding:15px 30px 15px 15px;
line-height:1;
width:100%;
font-size:14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#sider .sidercate {
margin-top:40px;
background:#fff;
-webkit-box-shadow: 0 0 10px rgba(232,232,232,0.8);
-moz-box-shadow: 0 0 10px rgba(232,232,232,0.8);
-ms-box-shadow: 0 0 10px rgba(232,232,232,0.8);
-o-box-shadow: 0 0 10px rgba(232,232,232,0.8);
box-shadow: 0 0 10px rgba(232,232,232,0.8);
position:relative;
}
#sider .sidercatehd {
border-bottom:1px #f3f3f3 solid;
padding:20px 10px;
font-size:16px;
text-align:center;
}
#sider .sidercatelink {
padding:30px 20px;
}
#sider .sidercatelink li+li {
margin-top:25px;
}
#sider .sidercatelink a {
display:block;
background:url(//www.tramsystem.jp/wp/wp-content/themes/wk_trambiz/voice/images/common/arrow_sider.png) right center no-repeat;
padding:0 6px 0 0;
}
#sider .sidercatelink a:hover {
text-decoration:none;
color:#b7b7b7;
}
form.search {
position: relative;
}
.search .search_btn {
background: none;
padding: 15px 2px 15px 5px;
border: 0;
position: absolute;
top: 0;
right: 0;
}
} .breadcrumb {
z-index: 2;
font-size: .7rem;
display: block;
width: 96%;
box-sizing: border-box;
margin: .2rem auto .6rem;
color: #666666;
line-height: 1.6;
}
.breadcrumb .arrow { margin: 0 8px;}
@media (min-width: 960px) {
.breadcrumb {
font-size: .8rem;
margin: 0 auto 1rem;
}
.breadcrumb > a{text-decoration: none;}
} .hdl {
font-size: 1.2rem;
font-weight: normal;
margin: .8rem 0 .8rem .2rem;
border-left: solid 4px #3b7a43;
padding-left: .4rem;
}
.hdl span {
font-size: .7rem;
color: #3b7a43;
display: inline-block;
margin-left: 4px;
}
@media (min-width: 960px) {
.hdl {
font-size: 1.4rem;
margin: 0 0 1.2rem .6rem;
}
.hdl span {
font-size: .6rem;
margin-left: 8px;
}
} .section+.section {
margin-top: 8px!important;
}
@media (max-width: 767px) {
.section+.section {
margin-top: 0px!important;
}
} .pagetop {
bottom: 5%;
width:45px;
}
.copyright{
color: #fff;
text-align: center;
padding: 1rem;
margin: 0 auto;
}
@media (min-width: 960px) {
#voice-footer{
color: #fff;
display: block;
max-width: 1102px;
width: 100%;
padding: 1rem 0;
margin: 0 auto;
}
#voice-footer .footerin .footercont{
display: flex;
width: 96%;
margin: 0 auto;
}
#voice-footer .footerin .footercont .footerlink{ margin: 0 auto;}
.footerlink:last-child{ width: 26%;}
.footerlinkhd{
font-size: 1rem;
font-weight: bold;
padding: 4px 2px;
}
.footerlinkhd > i{
font-size: 1rem;
margin-right: 8px;
}
#voice-footer .footerin .footercont .footerlink > ul > li{ margin-top: .4rem;}
#voice-footer .footerin .footercont .footerlink > ul > li > a{
color: #fff;
line-height: 1.6;
font-size: .8rem;
}
#voice-footer .footerin .footercont .footerlink > ul > li > a:hover{ text-decoration: none;}
.pagetop {
position: fixed;
right: 0;
bottom: 0;
background: #333;
z-index: 10000;
width: 100px;
height: 60px;
}
.pagetop > a{
position: relative;
display: block;
text-decoration: none;
width: 100px;
height: 40px;
}
.pagetop > a::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
color: #fff;
font-size: 25px;
position: absolute;
width: 25px;
height: 25px;
top: -18px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
.pagetop > a::after {
content: 'PAGE TOP';
font-size: 12px;
color: #fff;
position: absolute;
top: 36px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
}
 .program{
background: #54AA5E;
padding: 16px 0;
text-align: center;
background: linear-gradient(#fff,#A6D2AB) fixed;
}
.program > p{
font-size: 1rem;
width: 80%;
line-height: 2;
color: #333;
margin: 0 auto;
}
.program > p > span{
font-size: 1.4rem;
line-height: 2;
margin: 0 auto;
}
.img_programBtn{
width: 20%;
margin: 1rem auto;
font-size: 1rem;
display: block;
text-align: center;
background: #3b7a43;
border: 1px solid #3b7a43;
text-decoration: none;
color: #fff;
padding: 8px 0;
-webkit-border-radius: 12px;
border-radius: 40px;
box-shadow: 0 1px 3px #333;
}
.img_programBtn:hover{
background: #EDF6EE;
color: #3b7a43;
border: 1px solid #3b7a43;
text-decoration: none;
}
@media (max-width: 1280px) {
.program{
padding: 20px 0 30px;
}
.program > p{
font-size: 1rem;
width: 96%;
}
.program > p > span{
font-size: 1.2rem;
width: 96%;
}
.img_programBtn{
width: 26%;
margin: 1rem auto 0;
font-size: 1rem;
padding: 4px 0;
}
}
@media (max-width: 767px){
.program {
padding: 8px 0 16px;
}
.program > p{
font-size: .6rem;
width: 98%;
line-height: 2;
}
.program > p > span {
font-size: .8rem;
width: 98%;
line-height: 2;
font-weight: bold;
}
.img_programBtn {
width: 50%;
margin: .5rem auto 0;
font-size: .8rem;
padding: 2px 0;
}
} .vdl{
text-align: center;
margin: 10px 0 40px 0;
}
.vdl-btn {
width: 50%;
display: inline-block;
margin: 8px;
padding: 8px;
font-size: 1rem;
text-decoration: none;
color: #FFF;
background: #3b7a43;
border-radius: 40px;
box-shadow: 0 1px 3px #333;
}
.vdl-btn:hover {
text-decoration: none;
background: #65B36E;
border-radius: 12px;
opacity: unset;
}
@media (max-width: 767px){
.vdl{margin: 12px auto 24px;}
.vdl-btn {
width: 76%;
font-size: .8rem;
}
} .vLink{
margin: 12px 0 25px 0;
display: block;
}
.vLink:before {
content: "資料ダウンロード";
position: relative;
top: 12px;
left: 12px;
background-color: #3b7a43;
padding: 8px;
font-size: 0.8em;
border-radius: 3px;
color: #fff;
z-index: 1;
}
.vLink-wrap {
position: relative;
margin: 0;
border: 2px solid #3b7a43;
padding: 0;
max-width: 800px;
background-color: #ffffff;
}
.vLink-content {
height: 108px;
margin-top: 6px;
word-break: break-all;
white-space: normal;
overflow: hidden;
}
.vLink-thumbnail {
padding: 0;
margin: 0 6px 4px 4px;
float: left;
margin-top: 10px!important;
}
.vLink-thumbnail-img {
width: 140px;
border: 1px solid #222;
vertical-align: top;
max-width: 100%;
}
.vLink-title {
text-decoration: none!important;
margin-top: 10px;
display: block;
font-weight: normal;
display: block;
color: #111111;
font-size: 16px;
line-height: 24px;
font-weight: bold;
overflow: hidden;
word-break: break-all;
padding: 3px;
}
.vLink-title:hover {
text-decoration: underline!important;
}
.vLink-discription {
text-decoration: none!important;
color: #333333;
font-size: 13px;
line-height: 17px;
padding: 3px;
margin: 0;
overflow: hidden;
display: block;
}
.vLink-discription:hover {
text-decoration: none!important;
} #toc_container * {
margin: 0 auto;
}
#toc_container {
margin: 1rem auto;
background-color: #EEF0F5;
border: 1px solid #47537A;
border-radius: 4px;
display: block;
color: #333333;
padding: .4rem .6rem;
width: 90%;
}
#toc_container .toc_title {
text-align: center;
font-size: 1rem;
font-weight: bold;
}
#toc_container .toc_toggle{
font-size: .9rem;
}
#toc_container .toc_toggle a {
font-size: .8rem;
padding: 0 .2rem;
}
.toc_list > li{
padding-left: unset!important;
margin-top: .4rem!important;
}
#toc_container ul.toc_list a, #toc_container ul.toc_list a:visited{
text-decoration: none;
font-size: .8rem;
display: inline-block;
line-height: 2;
padding: 2px;
}
#toc_container ul.toc_list > li > ul{
margin-left: 1.8rem!important;
font-size: .7rem;
}
#toc_container ul.toc_list > li > ul > li{ padding: 0;}
@media(min-width: 960px){
#toc_container{ width: 96%;}
#toc_container .toc_title { font-size: 1.4rem;}
#toc_container ul.toc_list a, #toc_container ul.toc_list a:visited{ font-size: .9rem;}
} h2#voice-h2{
font-size: 1rem;
line-height: 1;
font-weight: 600;
}
h3#voice-h3{
font-size: 1rem;
line-height: 1;
}
.voicedetin h2, .voicedetin h3{ margin-bottom: 16px!important;}
#voice-h2{
padding: 1rem .4rem;
background: #eee;
border-radius: 4px;
border-left: none;
}
#voice-h3{
padding: .8rem .4rem;
color: #333;
border-left: solid 4px #aaa;
border-bottom: solid 2px #eee;
}
@media (max-width: 960px){
h2#voice-h2{
font-size: .9rem;
line-height: 1.6;
padding: 8px;
}
h3#voice-h3{font-size: 1rem;}
}
h4{
text-decoration: underline;
} blockquote {
position: relative;
padding: 8px 15px 8px 15px;
box-sizing: border-box;
background: #efefef;
color: #555;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.8;
font-size: .9rem;
} .linkcard *{
text-decoration:none !important;
}
.linkcard:before{
content: "あわせて読みたい";
position: relative;
top: 12px;
background-color: #3b7a43;
padding: 6px;
font-size: .8rem;
color:  #fff;
z-index: 1;
}
.linkcard *:hover {
opacity:0.8;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.linkcard{
padding: 1rem 0;
display: block;
width: 100%;
margin: 0 auto!important;
}
.lkc-external-wrap{
max-width: 100%;
background: #fff;
border: solid 1px #3b7a43;
border-radius: 4px;
padding:20px;
}
.lkc-title{ margin: 6px auto 0;}
.lkc-title > span{ font-size: .8rem;}
.lkc-excerpt { display:block;}
.lkc-thumbnail {
margin-top:10px!important;
}
@media (min-width: 960px){
.lkc-title { margin: 6px auto;}
.lkc-title > span{ font-size: 1rem;}
.lkc-excerpt{
font-size: .8rem!important;
line-height: 1.4!important;
}
} .lnk-next {
background: #ececec;
padding: 10px;
font-weight: bold;
font-size: 12.0081px;
text-align: center;
color: #111;
padding-left: 1em;
position: relative;
transition: all .2s 0s ease;
}
.lnk-next:before {
content: "\f3d3";
font-family: "Ionicons";
position: absolute;
left: 19px;
top: 50%;
transform: translate(0, -50%);
}
.lnk-next .lnk-next-inner {
text-decoration: none;
}
.lnk-next:after {
content: "\f3d3";
font-family: "Ionicons";
position: absolute;
left: 24px;
top: 50%;
transform: translate(0, -50%);
} .nextPage::before {
content: "";
}
.nextPage {
margin-top: 40px;
text-align: center;
color: #27364f;
}
.nextPage a {
display: inline-block;
border: solid 1px #000;
text-decoration: none;
padding: 5px 8px;
background:#fff;
}
.nextPage a:hover {
color:#fff;
background: #4c4c4c;
} .btn-square {
margin: 0 auto;
margin-top: 8%;
display: table;
padding: 0.5em 1em;
text-decoration: none;
background: rgb(64, 173, 126);
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 12px;
text-align: center;
width: 48%;
}
.btn-square:active {
-webkit-transform: translateY(4px);
transform: translateY(4px); border-bottom: none; } #sider .siderG,
#sider .siderW,
#sider .siderR{ display: none;} .newsletter{
background: #EEF0F5;
color: #333;
margin: 1rem auto;
border: 2px dashed #7483AD;
}
.newsletter > div{
background: #47537A;
color: #fff;
padding: .2rem .6rem;
}
.newsletter > div > h2{
text-align: center;
font-size: .9rem;
line-height: 1.6;
}
.newsletter > div > p{
font-size: .6rem;
margin: 0 auto;
} .category{ margin: 2rem .2rem;}
.category > i, .category > p{ font-size: .9rem;}
.category > p{
display: inline-flex;
margin-left: .4rem;
}
.category > ul{
font-size: .8rem;
line-height: 2.6;
}
.category > ul > li{
border-top: 1px solid #ccc;
}
.category > ul > li:last-child{ border-bottom: 1px solid #ccc;}
.category > ul > li:first-child{ margin-top: .6rem;}
.category > ul > li > a{ vertical-align: middle;}
.category > ul > li > a:hover{
text-decoration: none;
opacity: .6;
transition: all .5s!important;
}
.category > ul > li > a >i{
font-size: .8rem;
float: right;
line-height: 2;
}
@media (min-width : 960px){
#sider > div > a > i{
font-size: 16px;
margin-top: 2px;
position: absolute;
}
.siderG > a,
.siderW > a,
.siderR > a{
text-decoration: none;
}
.siderG > a:hover,
.siderW > a:hover,
.siderR > a:hover{
text-decoration: none;
color: #666;
}
#sider .siderG,
#sider .siderW,
#sider .siderR{
display: block;
margin-top: 8px;
border: 1px #ccc solid;
padding: 12px 8px;
}
#sider .siderR {
background: #cc0000;
color: #fff;
}
#sider .siderG {
background: #eee;
color: #333;
}
#sider .siderW {
background: #fff;
color: #333;
}
#sider .siderhdG,
#sider .siderhdW,
#sider .siderhdR{
font-size: 12px;
margin: 0 0 6px 24px;
}
#sider .sidertxtG,
#sider .sidertxtW,
#sider .sidertxtR{
font-size: .6rem;
margin: 6px auto 0;
}
#sider .siderhdR,
#sider .sidertxtR{ color: #fff;}
} .header-clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
}
#header-category {
border-left: 1px solid #007542;
border-right: 1px solid #007542;
}
#header-category + #header-category {
border-left: 0;
border-right: 1px solid #007542;
}
#header-nav-bace {visibility: hidden;}
#header-nav {
padding: 0;
margin: 8px 0;
display: flex;
list-style: none;
justify-content: center;
}
#header-nav li{
display: -webkit-box; display: -moz-box; display: -o-box; display: -ms-box; display: box; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-box-align: center; box-align: center; }
#header-nav li a {
font-size: 8px;
font-weight: bold;
padding: 0 5px;
color: #1e1e1e;
text-decoration: none;
display: block;
cursor: pointer;
}
#header-nav li a:hover{
font-size: 8px;
font-weight: bold;
padding: 0 5px;
color: #d8d6d6;
text-decoration: none;
display: block;
cursor: pointer;
}
.search .search_btn {
background: none;
width: 45%;
padding: 5px 0px 4px 0px;
border: 0;
position: absolute;
top: 0;
right: 0;
}
.header-search > input{
font-size: .8rem!important;
padding: 4px;
border: 1px #333 solid!important;
line-height: 1.6!important;
width: 72%!important;
-webkit-box-sizing: border-box!important;
-moz-box-sizing: border-box!important;
-ms-box-sizing: border-box!important;
-o-box-sizing: border-box!important;
box-sizing: border-box!important;
}
.header-search > button{
position: absolute;
width: 46px;
height: 34px;
}
.header-search > button > a > i{
color: #333;
font-size: 1rem;
height: 28px;
width: 28px;
display: inherit;
}
.spheader-search > input{
font-size: .8rem!important;
padding: 4px 4px 2px;
border: 1px #333 solid!important;
line-height: 1.6!important;
width: 80%!important;
-webkit-box-sizing: border-box!important;
-moz-box-sizing: border-box!important;
-ms-box-sizing: border-box!important;
-o-box-sizing: border-box!important;
box-sizing: border-box!important;
}
.spheader-search > button {
position: absolute;
width: 28px;
height: 28px;
padding: 2px;
}
@media (min-width : 960px) {
#header-nav-bace{
margin-top: .6rem;
visibility: unset;
}
#header-nav {
padding: 0;
background: #fff;
text-align: center;
margin-top: 4px;
border: 1px solid #ddd;
}
#header-nav li{ display: inline-block;}
#header-nav li a {
font-size: .8rem;
padding: 2px 1rem;
color: #007542;
text-decoration: none;
cursor: pointer;
}
#header-nav li a:hover{
background: #007542;
color: #fff;
}
.header-search{
position: relative;
width: 100%;
}
.header-search > input{
width: 90%!important;
padding: 6px!important;
}
.header-search > button{
top: 0;
right: 0px;
display: block;
}
.header-search > button > a > i{ font-size: 1.1rem;}
} .headerlogo{
width:60%;
} .voicelist01 > li:first-child{
display: inline-block;
width: 96%;
margin: 0 auto 1rem;
}
.voicelist01 > li:first-child > a > img{ width: 80%;}
.voicelist01 > li:first-child > div{ width: auto;}
.voicelist01 > li:first-child > div > a > h2{ font-size: 1rem;}
.voicelist01 > li:first-child > div > div{margin-top: 12px;}
.voicelist01,
.voicelist02{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
width: 100%;
}
.voicelist01 > li,
.voicelist02 > li{
font-size: .9rem;
width: 100%;
display: flex;
border-bottom: 1px solid #ccc;
margin-bottom: 8px;
padding-bottom: 8px;
}
.voicelist01 > li > a,
.voicelist02 > li > a{
width: 40%;
}
.voicelist01 > li > a > img,
.voicelist02 > li > a > img{
width: 100%;
margin: .2rem auto;
height: auto;
border-radius: 4px;
}
.voicelist01 > li > div,
.voicelist02 > li > div{
width: 90%;
}
.voicelist01 > li > div > a > h2,
.voicelist02 > li > div a > h2{
font-size: .9rem;
width: 90%;
line-height: 1.4;
margin: 0 auto;
text-align: left;
}
.voicelist01 >li > div > div,
.voicelist02 >li > div > div{
display: flex;
margin-top: 0px;
float: right;
}
.voicedate{
font-size: .6rem;
color: #aaa;
align-self: flex-end;
margin: 0 6px;
}
.voicewrite{
background: #47537A;
color: #fff;
padding: 4px 6px;
font-size: .6rem;
border-radius: 4px;
margin: 0 auto;
}
.voicecont{
background: #47537A;
color: #fff;
border-radius: 4px;
font-size: .6rem;
padding: 4px;
width: fit-content;
}
.voicelist01 > li:first-child .voicecont{ width: auto;}
.voicecont > i{ margin: 0 4px 0 2px;}
.voicecont > a{
color: #fff;
text-decoration: none;
}
@media (min-width: 960px){
.voicelist01{
display: unset;
flex-wrap: unset;
margin: unset;
text-align: unset;
width: unset;
}
.voicelist01 > li{
display: inline-flex;
padding: 0 1rem;
width: 96%;
margin-bottom: 1rem;
align-items: flex-end;
text-align: center;
}
.voicelist01 > li,
.voicelist02 > li{
font-size: 1rem;
border-bottom: none;
}
.voicelist02 > li{ display: inline-block;}
.voicelist01 > li:first-child,
.voicelist01 > li:nth-child(2),
.voicelist01 > li:nth-child(3){
padding: 0;
width: calc(96%/3);
margin: 0 6px 0 0;
display: inline-block;
vertical-align: top;
}
.voicelist01 > li:nth-child(4){ margin-top: 4rem;}
.voicelist01 > li > a{ width: 26%;}
.voicelist01 > li > a > img{
height: auto;
margin: 0 auto;
width: 100%;
}
.voicelist01 > li:first-child > a > img,
.voicelist01 > li:nth-child(2) > a > img,
.voicelist01 > li:nth-child(3) > a > img{ width: 80%;}
.voicelist01 > li > div{
padding-left: .6rem;
display: block;
width: 100%;
}
.voicelist01 > li:first-child > div,
.voicelist01 > li:nth-child(2) > div,
.voicelist01 > li:nth-child(3) > div{ padding: 0;}
.voicelist01 > li:first-child > div > a > h2,
.voicelist01 > li:nth-child(2) > div > a > h2,
.voicelist01 > li:nth-child(3) > div > a > h2{
padding: 2px 6px;
width: auto;
height: auto;
font-size: 1.2rem;
margin-top: 6px;
line-height: 1.8;
}
.voicelist01 > li > div > a > h2{
width: 100%;
line-height: 1.6;
font-size: .9rem;
}
.voicelist01 > li > div > a:hover{
text-decoration: none;
color: #aaa;
}
.voicelist02 > li > div a > h2{
font-size: .9rem;
width: 100%;
line-height: 1.4;
margin: 0 auto;
text-align: left;
}
.voicelist01 > li > div > div{
display: inline-flex;
margin-top: 16px;
float: right;
}
.voicelist01 > li:first-child > div > div{
display: inline-flex;
margin-top: 16px;
}
.voicelist01 > li:nth-child(2) > div > div{ display: inline-flex;}
.voicelist01 > li:nth-child(3) > div > div{ display: inline-flex;}
.voicelist02 {
display: inline-flex;
padding: 0 1rem;
flex-wrap: unset;
text-align: unset;
}
.voicelist02 li {
width: calc(100%/3);
margin: .2rem;
}
.voicelist02 li > a > img {
width: 96%;
height: auto;
margin: 0 auto;
border-radius: 4px;
}
.voicelist02 li > div > a:hover{ text-decoration: none;}
.voicelist02 div{ margin: .4rem auto 0;}
.voicelist02 > li > div > h2{font-size: .9rem;}
.voicelist02 li > div > div{display: inline-block;}
.voicelist02 li > div > div > p{
margin: .4rem 0 0 0;
font-size: .6rem;
}
.voicelist02 li > div > div .voicecont .voicewrite{
padding: 2px 8px;
font-size: .7rem;
}
.voicelist02 li > div > div .voicecont{ display: inline-flex;}
.voicelist02 li > div > div .voicedate{
font-size: .7rem;
display: inline-flex;
}
.voicewrite{
padding: 6px 8px;
font-size: .7rem;
margin-right: .4rem;
}
.voicedate{
font-size: .7rem;
align-self: flex-end;
padding-right: 8px;
border-right: 1px #aaaaaa solid;
}
.voicecont{
font-size: .7rem;
padding: 2px 4px;
margin-left: 8px;
width: unset;
}
.voicelist01 > li:first-child .voicecont{ width: unset;}
.voicecont > i{ margin: 0 6px 0 2px;}
}
.voicegray{
padding: 0;
margin: 1rem auto;
display: inline-block;
}
.cta_cont {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px #cccccc;
background-color: #fff;
text-align: center;
border-radius: 4px;
padding: 16px 8px;
margin: 1rem auto;
}
.cta_cont > a:hover{ text-decoration: none;}
.cta_cont > a > h3{
border-bottom: solid 1px #3b7a43;
border-top: solid 1px #3b7a43;
color: #3b7a43;
padding: 6px 0;
font-size: .9rem;
width: 100%;
margin: 0 auto;
}
.cta_cont > a > img{
width: 56%;
margin: .4rem auto;
}
.cta_cont > a > h4{
font-size: .8rem;
padding: 0;
line-height: 2;
font-weight: bold;
}
.cta_cont > a > p{
font-size: .8rem;
line-height: 1.6;
margin: 1rem auto;
width: 100%;
}
.btn{
text-decoration: none!important;
border-radius: 60px;
color: #ffffff;
background: #cc0000;
border: solid 1px #990000;
vertical-align: middle;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-size: .9rem;
padding: 8px 4rem;
}
.btn:hover{
color: #cc0000;
background: #FFE5E5;
transition: all .3s;
border: solid 1px #cc0000;
}
@media (min-width : 960px){
.voicegray{
padding: .6rem;
display: inline-flex;
}
.cta_cont{
padding: 1rem;
margin: .2rem .4rem;
width: calc(100%/2);
}
.cta_cont > a > h3{
font-size: .8rem;
width: 90%;
}
.cta_cont > a > img{
width: 56%;
margin: 1rem auto;
}
.cta_cont > a > h4{ font-size: .9rem;}
.cta_cont > a > p{ width: 90%;}
.btn{
font-size: .7rem;
padding: 8px 2rem;
}
} .teaserdetail{
font-size: 1rem;
margin-bottom: 1rem;
line-height: 1.8;
}
.voicedet {
background:#fff;
padding: .6rem .8rem;
margin-top: 1rem;
-webkit-box-shadow: 0 0 10px rgba(232,232,232,0.8);
-moz-box-shadow: 0 0 10px rgba(232,232,232,0.8);
-ms-box-shadow: 0 0 10px rgba(232,232,232,0.8);
-o-box-shadow: 0 0 10px rgba(232,232,232,0.8);
box-shadow: 0 0 10px rgba(232,232,232,0.8);
}
.voicedetin {
padding: 0px;
}
.voicedetin > p{
font-size: .8rem;
line-height: 1.8;
margin-bottom: 1rem;
}
.voicedetmess {
display: inline-block;
margin: .2rem auto;
font-size: .6rem;
}
.voicedetmess .voicedetdate {
color: #aaaaaa;
padding-right: 8px;
border-right: 1px #aaaaaa solid;
}
.voicedetmess .voicedetwrite {
background: #47537A;
color: #fff;
padding: 4px 6px;
border-radius: 4px;
margin-left: 8px;
}
.voicedetmess .voicedetwrite > i{
margin-right: 6px;
font-size: .7rem;
}
.voicedetmess .voicedetwrite > a{
color: #fff;
text-decoration: none;
}
.vTags{
display: inline-block;
font-size: .6rem;
margin: .4rem auto .6rem;
}
.vTags > i{
margin-right: 6px;
font-size: .7rem;
}
.voicedetsns {
width: 42%;
display: inline-flex;
margin-top: .6rem;
}
.voicedetsns a + a {
margin-left: 5px;
}
.voicedetmain {
margin-bottom:20px;
}
.voicedetmenu {
padding:20px;
margin-bottom:20px;
}
.voicedetmenuhd {
font-size:22px;
margin-bottom:20px;
}
.voicedethd {
padding:10px 20px;
font-size:20px;
margin-bottom:20px;
}
.voicedetintro {
padding:20px;
margin-top:20px;
}
.voicedetintroin {
display:block;
width:auto;
}
.voicedetintro .voicedetimg {
display:block;
text-align:center;
width:auto;
margin-bottom:20px;
}
.voicedetintro .voicedetcont {
display:block;
padding-left:0;
}
.voicedetintro .voicedetintrotit {
font-size:16px;
}
.voicedetsec {
margin-top:40px;
}
.voicedeths {
margin-bottom:20px;
}
.voicedetin h2 {
margin-bottom: 30px;
font-size: 20px;
border-left: 5px #212121 solid;
padding-left: 15px;
line-height: 1.3;
}
.voicedetin h3 {
font-size: 17px;
margin-bottom: 30px;
}
.voicedetin li {
background: url(//www.tramsystem.jp/wp/wp-content/themes/wk_trambiz/voice/css/voice/images/voice/dot_detail.png) 0 8px no-repeat;
padding-left: 16px;
}
.voicedetin li+ li {
margin-top: 12px;
}
.fixedbar {
display: none;
}
.voicedetnavi {
display: flex;
width: fit-content;
margin: 8px auto;
font-size: .8rem;
}
.voicedetnaviin{
color: #333;
font-size: .8rem;
}
.voicedetnext{ margin: 0 1rem;}
.voicedetnext > a > img{
width: 60%;
vertical-align: middle;
}
.voicedetnaviin{ margin: 0 1rem;}
.voicedetnaviin a:hover { text-decoration:none;}
.voicedetprev{ margin: 0 1rem;}
.voicedetprev > a > img{
width: 60%;
vertical-align: middle;
}
@media(min-width: 960px){
.voicedet {
font-size: 16px;
padding-top: 35px;
margin-bottom: 15px;
}
.voicedetin {
padding:0 50px 25px;
}
.voicedetin > p{
line-height: 2;
margin-bottom: 16px;
font-size: .9rem;
}
.voicedetmess {
padding-top: 5px;
font-size: .8rem;
display: block;
}
.voicedetmess .voicedetwrite {
padding: 5px 7px;
font-size: .7rem;
}
.vTags{
font-size: .8rem;
margin: 0 auto;
}
.vTags > i{ font-size: .9rem}
.voicedetsns {
display: inline-block;
float: right;
width: 32%;
margin-top: unset;
}
.voicedetsns a > img{ width: 26%;}
.voicedetsns a + a{margin-left: 6px;}
.voicedetmain {
text-align:center;
margin-bottom:40px;
}
.voicedetmenu {
background:#f3f3f3;
border:1px #e5e5e5 solid;
padding:50px;
margin-bottom:50px;
}
.voicedetmenuhd {
text-align:center;
font-size:28px;
margin-bottom:40px;
}
.voicedetmenulist li {
padding-left:1.3em;
text-indent:-1.3em;
}
.voicedetmenulist li+li {
margin-top:15px;
}
.voicedetspac {
line-height:1.8;
}
.voicedethd {
padding:20px 50px;
border-top:1px #e5e5e5 solid;
border-bottom:1px #e5e5e5 solid;
background:#f3f3f3;
font-size:24px;
margin-bottom:40px;
}
.voicedetintro {
background:#f3f3f3;
padding:30px;
margin-top:40px;
}
.voicedetintroin {
display:table;
width:100%;
}
.voicedetintro .voicedetimg {
display:table-cell;
vertical-align:middle;
width:222px;
}
.voicedetintro .voicedetcont {
vertical-align:middle;
display:table-cell;
padding-left:25px;
font-size:14px;
}
.voicedetintro .voicedetintrotit {
font-weight:bold;
margin-bottom:15px;
font-size:18px;
}
.teaserdetail{
font-size: 1.4rem;
margin-bottom: 1rem;
}
.voicedetsec {
margin-top:80px;
}
.voicedethm {
margin-bottom:50px;
font-size:22px;
border-left:5px #212121 solid;
padding-left:20px;
line-height:1.3;
}
.voicecoltwo {
overflow:hidden;
margin:0 0 0 -20px;
}
.voicecoltwo li {
float:left;
width:50%;
padding-left:20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.voicecolthree {
overflow:hidden;
margin:0 0 0 -20px;
}
.voicecolthree li {
float:left;
width:33.33%;
padding-left:20px;
margin-top:20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.voicedeths {
font-size:18px;
margin-bottom:40px;
}
.voicedetdot li {
background:url(//www.tramsystem.jp/images/voice/dot_detail.png) 0 8px no-repeat;
padding-left:18px;
}
.voicedetdot li+li {
margin-top:15px;
}
.voicedetnavi{
margin: 1rem auto;
font-size: 1rem;
align-items: center;
}
.voicedetnaviin{ font-size: 1rem;}
.voicedetnext > a > img{
width: 72%;
vertical-align: unset;
}
.voicedetprev > a > img{
width: 72%;
vertical-align: unset;
}
}
@media screen and (max-width : 850px) {
.voicecoltwo {
margin:0;
}
.voicecoltwo li {
float:none;
width:auto;
padding-left:0;
text-align:center;
}
.voicecoltwo li+li {
margin-top:20px;
}
.voicecolthree {
margin:0;
}
.voicecolthree li {
float:none;
width:auto;
padding-left:0;
text-align:center;
}
}
.voicedetin ul {
margin-bottom: 30px;
}
.voicedetin ol {
margin-bottom: 30px;
list-style-type: decimal;
}
.voicedetin li {
background: url(//www.tramsystem.jp/wp/wp-content/themes/wk_trambiz/voice/css/voice/images/voice/dot_detail.png) 0 8px no-repeat;
padding-left: 18px;
}
.voicedetin ol li {
background: none;
padding-left: 0;
}
.voicedetin li+ li {
margin-top: 15px;
}
.wp-pagenavi {
font-size: .8rem;
margin: 4rem auto 2rem;
text-align: left;
}
.wp-pagenavi span,
.wp-pagenavi a{
display:inline-block;
}
.wp-pagenavi a+a {
margin-left:10px;
}
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
color:#fff;
padding:8px 10px;
display:inline-block;
text-align:center;
text-decoration:none;
background-color:#477a3d;
}
.wp-pagenavi .nextpostslink {
margin: 0 0 0 5px;
}
.wp-pagenavi .previouspostslink {
margin: 0 5px 0 0;
}
.wp-pagenavi .page,
.wp-pagenavi .current {
padding: 12px 16px;
text-decoration: none;
display: inline-block;
text-align: center;
background-color: #EEF0F5;
margin: 0px 4px;
}
.wp-pagenavi .page:hover,
.wp-pagenavi .current {
color:#fff;
background-color: #47537A;
} @media (max-width: 767px) {
.wp-pagenavi {
font-size: 14px;
margin: 24px 0;
}
.wp-pagenavi .page, .wp-pagenavi .current{
padding: 4px 0;
width: 32px;
margin: 0 4px;
}
.wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink{
padding: 6px;
margin-top: .6rem!important;
}
}
.voicedetin .saboxplugin-wrap {
margin: 0 0 40px;
}
.fixedbar {
font-size: 14px;
line-height: 1.5;
opacity: 0;
bottom: 0;
width: 100%;
background: #478448;
border-top: 1px solid #00d276;
z-index: 100;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 7px 20px;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.fixedbar.fixed {
opacity: 1;
position: fixed;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.fixedbar_in {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.fixedbar_tel {
display: inline-block;
margin: 4px 60px 0 0;
vertical-align: middle;
}
.fixedbar_tel a {
display: block;
color: #fff;
text-decoration: none;
}
.fixedbar_tel_num {
display: block;
text-align: center;
margin: 0 0 5px;
}
.fixedbar_contact {
display: inline-block;
margin: 0 100px 0 0;
vertical-align: middle;
}
.fixedbar_contact a {
display:block;
color:#fff;
width:210px;
text-align:center;
font-size:22px;
padding:10px 0;
font-weight:bold;
text-decoration:none;
background-color:#ff9c00;
border-top:2px solid #feb429;
border-bottom:1px solid #b16d03;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.fixedbar_contact span {
padding-left:30px;
background:url(//www.tramsystem.jp/wp/wp-content/themes/wk_trambiz/img/common/ico_comcontact.png) 0 center no-repeat;
background-size:20px;
}
.fixedbar_contact a:hover {
opacity: .7;
}
.fixedbar_banner {
display: inline-block;
width: 270px;
height: 55px;
vertical-align: middle;
}
.fixedbar_banner a {
display: block;
}
.fixedbar_banner a img {
width: 270px;
height: 55px;
}
.headertime {
font-size:10px;
line-height:1.6;
padding-top:5px;
}
.headertime .week {
padding:0 5px;
margin-right:5px;
display:inline-block;
border:1px solid #959595;
}
.headertime .time {
margin-right:5px;
display:inline-block;
}
.headercorres {
float:left;
}
.headertel {
font-weight:bold;
font-size:12px;
line-height:1;
overflow:hidden;
padding-left:8px;
pointer-events: none;
} .banner{
width: 100%;
margin: 0 auto 1rem;
border: 1px solid #333;
}
@media (min-width: 960px) {
.banner{
width: 90%;
margin: 0 auto 2rem;
}
} .vbtm{
margin-bottom:100px;
background-color:#ffffff;
padding:20px;
font-size:small;
}
p.vbtm-msg{
text-align:center;
font-weight:bold;
font-size:24px;
color: #ffffff;
padding: 5px 15px;
margin:0 auto;
background: #478448;
border-top: solid 5px #325e32;
border-bottom: solid 5px #325e32;
line-height:25px;
}
p.vbtm-msg2{
font-size:15px;
color: #000000;
margin:10px auto;
}
.vbtm-submit{
display: inline-block;
border-radius: 7%;
font-size: 12pt;
text-align: center;
cursor: pointer;
padding: 12px 12px;
background: #fca337;
color: #ffffff;
line-height: 1em;
transition: .3s;
box-shadow: 2px 2px 3px #666666;
border: 2px solid #fca337;
margin-bottom: 20px;
}
.button:hover {
box-shadow: none;
color: #fca337;
background: #ffffff;
} @media (max-width: 767px) {
.vbtm{
margin-bottom:100px;
background-color:#ffffff;
padding:20px;
font-size:small;
}
p.vbtm-msg{
text-align:center;
font-weight:bold;
font-size:16px;
color: #ffffff;
padding: 2px 8px;
margin: 0 auto;
background: #478448;
border-top: solid 5px #325e32;
border-bottom: solid 5px #325e32;
line-height:20px;
}
p.vbtm-msg2{
font-size:12px;
color: #000000;
margin-top:10px;
}
} .voiceCase{
display: inline-block;
width: 50%;
float: left;
margin-bottom: 2em;
}
.voiceCase > ul > li{
width: 43%;
}
@media (max-width: 1280px) {
.voiceCase > ul > li{
width: 47%;
}
}
@media (max-width: 767px) {
.voiceCase {
display: unset;
float: none;
width: 100%;
margin-bottom: 0;
}
} .articleDocs{
margin: 1rem auto;
}
@media (min-width: 960px){
.articleDocs{
display: block;
margin: 1.6rem auto;
width: 100%;
}
} .page-advoice {
border: solid 2px #e1e1e1;
padding-left: 10px;
padding-right: 10px;
position: relative;
background-color: #f9fff9;
margin-bottom: 30px;
}
.page-advoice:hover {
background-color: #f0f0f0;
}
.page-advoice-title {
font-size: 18px;
font-weight: bold;
color: #dd859c;
padding-top: 20px;
}
.page-advoice-description {
font-size: 12px;
color: #7b7b7b;
padding-top: 10px;
margin-bottom: 10px;
}
.page-advoice a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}.widget{
width: 94%;
margin: 1rem auto 0;
border-radius: 4px;
font-size: .9rem;
//  border: 1px solid #666;
box-shadow: 2px 2px 6px #ccc;
padding: .6rem;
//  background-image: url(https://www.tramsystem.jp/wp/wp-content/themes/wk_trambiz/voice/css/icon_100560.svg);
background-size: 18px;
background-repeat: no-repeat;
background-position-x: 48px;
background-position-y: 13px;
}
.widget > h3{
font-size: 1rem;
font-weight: bold;
text-align: center;
margin: 0 auto;
}
.wpp-list {
margin-top: .6rem;
}
.wpp-list li{
font-size: .8rem;
margin: 0 auto;
border-top: 1px solid #3b7a43;
padding: 6px 2px;
counter-increment: rank;
}
.wpp-list li::before{
color: #fff;
background: #ccc;
text-align: center;
width: 5%;
font-weight: bold;
display: inline-block;
margin: 0 4px 4px 0;
padding: 4px 6px;
border-radius: 50%;
content: counter(rank);
}
.wpp-list li:first-child::before{ background: #DBB400;}
.wpp-list li:nth-child(2)::before{ background: #AEB3B5;}
.wpp-list li:nth-child(3)::before{ background: #C08D5E;}
.wpp-post-title:hover{
text-decoration: none;
opacity: .6;
}
.wpp-meta, .post-stats{
font-size: .7rem!important;
}
@media (min-width: 960px){
.widget{
margin: 1rem auto;
width: unset;
border-radius: unset;
}
.wpp-list li::before{ width: 8%;}
} .w-pr {
margin-top: 2rem;
padding: 8px 0;
display: flex;
border-top: 1px solid #5d5d5d;
border-bottom: 1px solid #5d5d5d;
}
.w-pr > hr{ display: none;}
.w-pr .pr-img {
width: 30%;
align-self: center;
margin: 0 1rem;
}
.w-pr .pr-img img {
width: 100%!important;
}
.img-max {
max-width: 100%!important;
height: auto!important;
display: block!important;
}
.w-pr .pr-txt {
display: block;
line-height: 1.6;
}
.w-pr .pr-txt .w-position {
font-size: .6rem;
}
.w-name{
font-weight: bold;
font-size: .8rem;
}
.w-pr .pr-txt p {
font-size: .7rem;
} .bannerTop01{
text-align: center;
margin: 0 auto 2rem;
width: 100%;
}
.bannerTop{
text-align: center;
margin: 2rem auto 0;
width: 90%;
}
.bannerTop > a > img{ border: 1px solid #333;}
@media (min-width: 960px){
.bannerTop01{ width: 90%;}
} .youtubeBody{
width: 100%;
padding: 1rem 0;
margin: 2rem auto;
background: #FFE5E5;
box-shadow: 2px 2px 6px #ccc;
text-align: center;
border-radius: 4px;
}
.youtubeBody > h4{
position: relative;
color: #fff;
background: #CC0000;
margin: 0 auto 1rem;
padding: .6rem.4rem;
border-radius: 4px;
font-size: .7rem;
width: 94%;
}
.youtubeBody > h4 > span{
font-size: .8rem;
font-weight: bold;
}
.youtubeBody > h4:after{
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #990000;
width: 0;
height: 0;
}
.youtube a img{ width: 90%;}
@media (min-width: 960px){
.youtubeBody{ width: 80%;}
.youtubeBody > h4{
width: 80%;
font-size: .8rem;
}
.youtubeBody > h4 > span{ font-size: .9rem;}
.youtube a img{ width: 80%;}
} @media (max-width: 767px) {
.w-pr {
position: relative!important;
overflow: hidden!important;
padding-top: 28px!important;
font-weight: normal!important;
font-size: 13px!important;
}
.w-pr .pr-img {
width: 90%;
align-self: flex-start;
margin: 5px 15px 0 0!important;
}
.w-pr .pr-img img {
width: 100%!important;
}
.img-max {
max-width: 100%!important;
height: auto!important;
display: block!important;
}
.w-pr .pr-txt {
overflow: hidden!important;
margin-top: 5px!important;
}
.w-pr .pr-txt .w-position {
font-weight: bold!important;
font-size: 9px!important;
margin-bottom: 10px!important;
}
.w-name{
font-weight: bold!important;
font-size: 8px;
margin-bottom: 10px!important;
}
.w-pr .pr-txt p {
font-size: 10px!important;
margin-bottom: 5px!important;
}
} .thumbnail img {object-fit: cover;} .sidercate{
position: sticky;
margin-bottom: 0;
top: 10px;
z-index: 1;
}
div.teasermess,
.footerlink div.teasermess,
#voice-footer div.teasermess {
display: none !important;
visibility: hidden !important;
}
span.teasercountry,
span.teasertel {
display: none !important;
visibility: hidden !important;
}