/*================================

 CAFEPADDOCK.INFO/STYLE.CSS
 2015 J.SUZUKAWA
 MOD.031

=================================*/

/* --------------------------------

Primary style

-------------------------------- */
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

body {
font-size: 16px;
font-size: 1.6rem;
font-family:"ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,"Helvetica Neue",Helvetica,sans-serif;
-webkit-text-size-adjust: none;
background-color: #fff;/*-x*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

overflow-y: scroll!important;
}

.ie8 body{
overflow-y :scroll;
overflow-x :scroll;
}

a {
color: #0e7f28;
text-decoration: none;
}

img{
width:100%;
}

/*--------------------------

  COLOR

---------------------------*/
.si_blue   { color:#3ca4ea;}
.si_dkblue { color:#1894E7;}
.si_green  { color:#6eab00; }
.si_yellow { color:#ffdd11;}
.si_orange { color:#ea823c;}

/*--------------------------

  USABLE

---------------------------*/

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.memo{
font-size:12px;
font-size:12rem;
}
.sp_out{
display:inline-block;
\display:inline;
\zoom:1;
}

@media screen and (max-width: 480px) {
    .sp_out{display:none;}
    }

    .tb_out{
    display:inline-block;
    \display:inline;
    \zoom:1;
    }

@media screen and (max-width: 768px) {
    .tb_out{
        display:none;
    }
}


.lonly {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

.nfb {
position:relative;
overflow:hidden;
width:100%;
height:auto;
margin:0;
}


.flib {
position:relative;
overflow:hidden;
float:left;
padding:0;
margin:0;
}
.frib {
position:relative;
overflow:hidden;
float:right;
padding:0;
margin:0;
}

@media screen and (max-width: 480px) {
    .flib,
    .frib {
        float:initial;
    }
}

/* --------------------------------

HEADER

-------------------------------- */

header {
position: fixed;
top:0;
z-index: 3;
height: 54px;
width: 100%;
background-color: #fff;
-moz-opacity:0.90;
opacity:0.90;
filter:alpha(opacity=90);
box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.1);

}

header .headerwrap {
position:relative;
width: 960px;
height: 54px;
margin: 0 auto;
margin-top:0;
}

.si-logo {
display:inline-block;
\display:inline;
\zoom:1;
width:200px;
height:20px;
margin-left:15px;
margin-top:16px;
}

.si-logo img {
display:block;
width:180px;
height:20px;
}

.si-trigger {
display:none;
}

@media screen and (max-width: 960px) {

    header .headerwrap {
    width: 100%;
    }

    .si-trigger {
    display: block;
    position:absolute;
    content:'';
    border:none;
    background:url(../img/nav/nav_btn_open.png);
    background-size:20px 20px;
    background-position:center center;
    background-repeat:no-repeat;
    color:#333;
    padding:0;
    width:20px;
    height:20px;
    cursor:pointer;
    right:20px;
    top:16px;
    /* hide text */
    overflow:hidden;
    white-space:nowrap;
    color:transparent;
    }

    .si-trigger.active {
    content:'';
    background:url(../img/nav/nav_btn_logo.png);
    background-size:20px 20px;
    background-position:center center;
    background-repeat:no-repeat;
    }

}

/* --------------------------------

main_nav
-------------------------------- */

header .si-sinav {
z-index:4;
display:block;
position: absolute;
overflow:hidden;
width: 100%;
height: 54px;
right:0;
top:0;
line-height: 54px;
padding: 0 1%;
background: transparent;
text-align: right;
}

.si-sinav.si-sinav-open {
display:block;
}

.si-sinav-push {
display:block;
overflow-x:hidden;
position:relative;
left:0;
}

.si-sinav-push-it {
left:0;
display:none;
}

.si-sinav li{
display: inline-block;
\display:inline;
\zoom:1;
width:auto;
height: auto;
}

.si-sinav li.current {
display: inline-block;
\display:inline;
\zoom:1;
font-size: 16px;
font-size: 1.6rem;
color: #aaa;
padding: 10px;
line-height: 1;
cursor:default;
}

.si-sinav li a {
display: inline-block;
\display:inline;
\zoom:1;
font-size: 16px;
font-size: 1.6rem;
color: #333;
padding: 10px;
line-height: 1;
border-bottom: none;
}

.si-sinav li a:hover {
color:#666;
}

.si-sinav,
.si-sinav-push {
display:block;
overflow:hidden;
}

.si-sinav li.si-goback {
display:none;
}

.si-sinav li.pc_out{
display:none;
}

@media screen and (max-width: 960px) {

    header .si-sinav {
    display:block;
    visibility:hidden;
    overflow: hidden;
    position: fixed;
    top: 0!important;
    right: -180px;
    width: 180px;
    height: 100%;
    border-left:1px solid #eee;
    background-color:#fff;
    -moz-opacity:0.90;
    opacity:0.90;
    filter:alpha(opacity=90);
    }

    .si-sinav.si-sinav-open {
    display:block;
    visibility:visible;
    position: fixed;
    right:0!important;
    top: 0!important;
    }

    .si-sinav-push {
    left:0;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    }

    .si-sinav-push-it {
    display:block;
    left:-180px;

    }

    .si-sinav li {
    display:block;
    width:100%;
    text-align:left;
    }

    .si-sinav li.current {
    display:block;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    cursor:default;
    }

    .si-sinav li a {
    display:block;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    }

    .si-sinav li.si-goback {
    display:block;
    background:url(../img/nav/nav_btn_close.png);
    background-size:20px 20px;
    background-position:140px center;
    background-repeat:no-repeat;
    width:100%;
    height:54px;
    content:'';
    cursor:pointer;
    font-size:13px;
    font-size:1.3rem;
    line-height:54px;
    text-align:left;
    text-indent:105px;
    color:#444;
    }

    .si-sinav li.pc_out{
    display:block;
    }

}

/* --------------------------------

main_content

-------------------------------- */

.contents {
position: relative;
z-index: 2;
width:100%;
padding-top: 54px;
}

.contents .wrapper{
position:relative;
width:960px;
padding:30px 10px 20px;
margin: 0 auto;
}

@media screen and (max-width: 960px) {
    .contents .wrapper{
    width:96%;
    }
}

/* --------------------------------

FOOTER

-------------------------------- */

footer {
position: relative;
z-index:0;
width: 100%;
height: auto;
margin-top:30px;
}
footer .footertop{
position: relative;
z-index:0;
width: 100%;
height: auto;
margin:0;
}
footer .footerbottom{
position: relative;
z-index:0;
width: 100%;
height: auto;
margin:0;
background-color:#105646;/*#9FC91B;*/
}

footer .footertop_wrap {
position:relative;
overflow: hidden;
background:url(../img/element/footer_top.png);
background-size:1200px 200px;
background-position:center center;
background-repeat:no-repeat;
text-align:center;
width: 1200px;
height:200px;
margin: 0 auto;
padding: 0;
}

footer .footerbottom_wrap {
position:relative;
overflow: hidden;
text-align:center;
width: 1200px;
height:8px;
margin: 0 auto;
padding: 0;
}

footer .footercopy {
position:relative;
width:100%;
padding:10px 0;
margin:0 auto;
text-align:center;
}

footer .footercopy p.copyright{
display: inline-block;
\display:inline;
\zoom:1;
font-size: 14px;
font-size:1.4rem;
line-height:1.5;
color: #555;
}

footer .footerbottom_wrap .footercopy p.copyright a{
color: #555;
}

footer .footerbottom_wrap .footercopy p.copyright a:hover{
color: #555;
text-decoration: underline;
}

@media screen and (max-width: 1220px) {
    footer .footertop_wrap {
    width: 100%;
    }
    footer .footerbottom_wrap {
    width: 100%;
    }
}

/* --------------------------------

 BREADBOX

-------------------------------- */

#breadbox{
position:relative;
margin:0 auto;
overflow:hidden;
}

#breadbox ul {
position:relative;
overflow:hidden;
width:99%;
font-size:11px;
font-size:1.1rem;
text-align:right;
padding:5px 10px;
}

#breadbox ul li {
background:url(../img/element/icon_bread_next.png);
background-size: 15px 15px;
background-position: left 0;
background-repeat: no-repeat;
display:inline-block;
\display:inline;
\zoom:1;
height:20px;
padding:0;
margin:0;
line-height:20px;
letter-spacing:normal;
color:#333;
text-indent:20px;
}

#breadbox ul li.home {
background:url(../img/element/icon_bread_home.png);
background-size: 15px 15px;
background-position: left 0;
background-repeat: no-repeat;
}


#breadbox ul li a{
text-decoration:none;
color:#105646;
}

#breadbox ul li a:hover{
color:#333;
}

/* --------------------------------

 PAGETOP

-------------------------------- */

#pagetop a {
z-index:99;
}

#pagetop a {
background-image:url(../img/element/icon_pagetop.png);
text-indent:-999em;
height:80px;
width:80px;
position:fixed;
bottom:20px;
right:20px;
color:#fff;
-moz-opacity:0.70;
opacity:0.70;
filter:alpha(opacity=70);
}

#pagetop a:hover{
cursor:pointer;
-moz-opacity:1;
opacity:1;
filter:alpha(opacity=100);
}

/*================================
TOP PAGE
=================================*/

#fade {
position:absolute;
width:100%;
height:400px;
background-color:#3ca4ea;
top:0px;
left:0px;
z-index:100;
display:none;
}

#loader {
background:url(../img/anim/loader.svg);
background-size:40px 40px;
background-position:center center;
background-repeat:no-repeat;
position:relative;
width:40px;
height:40px;
margin:100px auto;
z-index:101;
display:none;
animation:loader_frame 1s infinite;
-webkit-animation:loader_frame 1s infinite;
-moz-animation:loader_frame 1s infinite;
-o-animation:loader_frame 1s infinite;
-ms-animation:loader_frame 1s infinite;
}
@keyframes loader_frame {
0%   { transform:rotate(0);}
100% { transform:rotate(360deg); }
}
@-webkit-keyframes loader_frame {
0%   { -webkit-transform:rotate(0);}
100% { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes loader_frame {
0%   { -moz-transform:rotate(0);}
100% { -moz-transform:rotate(360deg); }
}
@-o-keyframes loader_frame {
0%   { -o-transform:rotate(0);}
100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes loader_frame {
0%   { -ms-transform:rotate(0);}
100% { -ms-transform:rotate(360deg); }
}

/* --------------------------------

TOP HEADER

-------------------------------- */

.contents #topheader {
clear:both;
position:relative;
display:block;
overflow:hidden;
width:100%;
height:240px;
z-index:-11;
margin-top:0;
margin-bottom:0;
background-color:#105646;

background-image:url(../img/element/toptex.png);
background-position:center center;
background-repeat:repeat;
background-attachment:fixed;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;

}

.contents #topheader .logo {
position:relative;
width:200px;
height:200px;
display: block;
margin: 20px auto 0;
}

@media screen and (max-width:480px) {
    .contents #topheader {
    height:260px;
    }
    .contents #topheader .logo {
    margin-top: 20px;
    }
}

/* --------------------------------

CONTENT HEADER

-------------------------------- */

.contents #contentheader {
clear:both;
position:relative;
display:block;
overflow:hidden;
width:100%;
height:240px;
z-index:-11;
margin-top:0;
margin-bottom:0;
background-color:#105646;
}

.contents #contentheader .logo {
position:relative;
width:200px;
height:200px;
display: block;
margin: 20px auto 0;
}


/* --------------------------------

TBX

-------------------------------- */

.obx{
position:relative;
width:100%;
padding:0;
margin:0;
}
.obx h2{
font-size:18px;
font-size:1.8rem;
line-height:1.3;
padding:10px 0;
margin:0;
}


.tbx{
position:relative;
width:450px;
padding:0;
margin:5px;
}

.tbx h3{
margin:0;
}


@media screen and (max-width:960px) {
    .tbx{
    width:98%;
    margin:5px auto;
    text-align:center;

    }
}

.tbx a{
display:block;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}

.tbx a:hover{
-moz-opacity:0.70;
opacity:0.70;
filter:alpha(opacity=70);
}

.tbx .si_clk {
position: relative;
display:block;
overflow:hidden;
background-image: url(../img/top/clk_ff.png);
background-size:220px 220px;
background-position:center center;
background-repeat:no-repeat;
width:220px;
height:220px;
padding:0;
margin:0 auto;
}

.si_clk .clock_hh,
.si_clk .clock_mm {
position: absolute;
width:100%;
top:0;
left:0;
overflow:hidden;
}


.tbx ul.pab li{
position:relative;
display:inline-block;
    \display:inline;
    \zoom:1;
width:222px;
height:220px;
vertical-align:top;
line-height:220px;
text-align: center;
letter-spacing:normal;
}

.tbx ul.pab li.clock{
}

.tbx ul.pab li.piece img{
display:block;
width: 150px;
height: 150px;
padding:0;
margin:35px auto;
}

.tbx ul.pab li a{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
-moz-opacity:1;
opacity:1;
filter:alpha(opacity=100);
}

.tbx ul.pab li.piece.gene{
background-color:#292929;
}

.tbx ul.pab li.piece.morning a{
background-color:#E8BF46;
}
.tbx ul.pab li.piece.brunch a{
background-color:#DF8262;
}


.tbx ul.pab li.piece a:hover{
-moz-opacity:0.7;
opacity:0.7;
filter:alpha(opacity=70);
}

@media screen and (max-width:960px) {

    .tbx ul.pab li.piece,
    .tbx ul.pab li.clock,
    .tbx ul.pab li.board {
    width:49%;
    }
}

@media screen and (max-width:480px) {
    .tbx ul.pab li.piece,
    .tbx ul.pab li.clock,
    .tbx ul.pab li.board {
    width:98%;
    margin-bottom:10px;
    }
}

.tbx li.board img{
display:block;
width: 100px;
height: 100px;
padding:0;
margin:60px auto;
}

@media screen and (max-width:960px) {

    .tbx .board {
    margin:0 auto 20px;
    }

}

.tbx .info {
position:relative;
width:448px;
height:220px;
padding:0;
margin:0;
overflow:hidden;
background:#fafafa;
border:3px solid #333;
}

.tbx .info h3{
text-align:left;
line-height:1.4;
font-size:16px;
font-size:1.6rem;
padding:10px;
margin:2px;
color:#fff;
background:#333;
overflow:hidden;
}

.tbx .info h4{
text-align:left;
line-height:1.3;
font-size:15px;
font-size:1.5rem;
padding:10px 20px 0 20px;
overflow:hidden;
}



.tbx .info dl{
padding:6px 20px;
text-align:left;
line-height:1.4;
font-size:14px;
font-size:1.4rem;
overflow:hidden;
}
.tbx .info dt{
font-weight:bold;
}
.tbx .info dd{
border-bottom:1px dotted #333;
margin-bottom:6px;
}

.tbx .info dd a{
display:inline;
}

@media screen and (max-width:960px) {

    .tbx .info {
    width:98%;
    margin:0 auto;
    }

}

.tbx ul.pic li{
position:relative;
display:inline-block;
\display:inline;
\zoom:1;
width:222px;
height:220px;
vertical-align:top;
line-height:220px;
text-align: center;
overflow:hidden;
background-color:#eeeeee;
margin-left:auto;
margin-right:auto;

}
.tbx ul.pic li img{
display:block;
width: 440px;
height: 220px;
padding:0;
/*margin-left:-110px;*/
text-align: center;
  margin: 0 -110px;
}

@media screen and (max-width:960px) {

    .tbx ul.pic{
    }
    .tbx ul.pic li{
    width:49%;
    height:220px;
    }
    .tbx ul.pic li img{
      margin: 0 -10px;
    }
}

@media screen and (max-width:764px) {
    .tbx ul.pic li img{
      margin: 0 -60px;
    }
}
@media screen and (max-width:600px) {
    .tbx ul.pic li img{
      margin: 0 -100px;
    }
}

@media screen and (max-width:480px) {

    .tbx ul.pic li{
    width:98%;
    height:220px;
    margin:0 0 10px 0;
    }
    .tbx ul.pic li img{
    margin: 0;
    }
}

/*
.si_svc {
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-o-transition:0.2s;
-ms-transition:0.2s;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity=0);
}

.si_svc.focus {
-moz-opacity:1;
opacity:1;
filter:alpha(opacity=100);
}
*/


/* --------------------------------

MENU

-------------------------------- */

.menubox{
overflow:hidden;
padding:30px;
margin:20px 0;
}

.menubox.coffee{
color:#fff;
background-color:#A05E50;
}

.menubox.tea{
color:#111;
background-color:#F2DDD0;
}

.menubox.juice{
color:#111;
background-color:#DCEC68;
}

.menubox.morning{
background-color:#FFE699;
}

.menubox.brunch{
overflow:hidden;
background-color:#DF8262;
}

.menubox h3{
display:block;
font-size:24px;
font-size:2.4rem;
line-height:1.2;
text-indent:50px;
}
.menubox h3 em{
display:block;
font-size:15px;
font-size:1.5rem;
margin-bottom:12px;
}
.menubox h3:before{
display:block;
content:"";
height:36px;
width:36px;
position:absolute;
background:url(../img/menu/icon_coffee_k36.png);
background-size: 36px 36px;
background-position:top left;
background-repeat:no-repeat;
}
.menubox.coffee h3:before{
background:url(../img/menu/icon_coffee_k36.png);
}
.menubox.tea h3:before{
background:url(../img/menu/icon_tea_k36.png);
}
.menubox.juice h3:before{
background:url(../img/menu/icon_juice_k36.png);
}
.menubox.morning h3:before{
background:url(../img/menu/icon_bread_k36.png);
}
.menubox.brunch h3:before{
background:url(../img/menu/icon_eat_k36.png);
}

.menubox h4{
display:inline-block;
\display:inline;
\zoom:1;
font-size:18px;
font-size:1.8rem;
color:#ba3c00;
line-height:1.5;
padding:6px 2px;
margin-bottom:10px;
border-top: 4px dotted #ba3c00;
border-bottom: 4px dotted #ba3c00;
}

.menubox p{
font-size:14px;
font-size:1.4rem;
line-height:1.5;
margin-bottom:20px;
}
.menubox.coffee p{
color:#111;
}
.menubox.tea p{
color:#111;
}


.menubox.coffee dl,
.menubox.tea ul,
.menubox.juice ul,
.menubox.brunch dl{
width:100%;
margin:18px 0;
overflow:hidden;
}

.menubox.coffee dt,
.menubox.tea li,
.menubox.juice li,
.menubox.brunch dt{
width:100%;
display:inline-block;
\display:inline;
\zoom:1;
text-align:left;
font-size:15px;
font-size:1.5rem;
line-height:1.5;
padding-bottom:2px;
overflow:hidden;
}
.menubox.coffee dt{
border-bottom:1px dotted #222;
}
.menubox.tea li{
border-bottom:1px dotted #A05E50;
margin-bottom:6px;
}
.menubox.juice li{
border-bottom:1px dotted #A29C33;
margin-bottom:6px;
}
.menubox.brunch dt{
border-bottom:1px dotted #222;
}

.menubox.coffee dt span.price,
.menubox.tea li span.price,
.menubox.juice li span.price,
.menubox.brunch dt span.price{
display:inline-block;
\display:inline;
\zoom:1;
font-size:15px;
font-size:1.5rem;
float:right;
}

.menubox.coffee dd,
.menubox.brunch dd{
display:block;
width:100%;
font-size:14px;
font-size:1.4rem;
line-height:1.5;
color:#111;
margin-bottom:10px;
}


.menubox.morning li span.price,
.menubox.morning dl{
width:100%;
margin-bottom:20px;
overflow:hidden;
}


.menubox.morning dt{
display:block;
width:120px;
text-align:left;
color:#ba3c00;
vertical-align:top;
font-size:16px;
font-size:1.6rem;
line-height:1.5;
}

.menubox.brunch dt{
font-size:16px;
font-size:1.6rem;
color:#fff;
}

.menubox.morning dd{
display:block;
text-align:left;
color:#111;
font-size:15px;
font-size:1.5rem;
line-height:1.5;
padding:12px;
margin-bottom:20px;
border:2px dotted #ba3c00;

}

.choice{
font-size:13px;
font-size:1.3rem;
}

.ancbox{
overflow:hidden;
padding:0;
margin:0;
letter-spacing: -0.4em;
}

.ancbox li{
position:relative;
display:inline-block;
\display:inline;
\zoom:1;
width:20%;
height:90px;
vertical-align:top;
line-height:90px;
text-align: center;
font-size:6px;
font-size:6rem;
text-indent:-9999px;
letter-spacing:normal;
z-index:1;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
-moz-opacity:1;
opacity:1;
filter:alpha(opacity=100);
}

.ancbox li a{
position:relative;
display:block;
width:100%;
height:100%;
}

.ancbox li:hover{
-moz-opacity:0.7;
opacity:0.7;
filter:alpha(opacity=70);
}

.ancbox li:after{
background:url(../img/element/icon_anc_down.png);
content:"";
position:absolute;
line-height:1em;
bottom:10px;
right:10px;
width:15px;
height:15px;
}

.ancbox li.coffee{
background:url(../img/menu/icon_coffee_k36.png);
background-size: 36px 36px;
background-position:center center;
background-repeat:no-repeat;
color:#fff;
background-color:#A05E50;
}
.ancbox li.tea{
background:url(../img/menu/icon_tea_k36.png);
background-size: 36px 36px;
background-position:center center;
background-repeat:no-repeat;
color:#111;
background-color:#F2DDD0;
}
.ancbox li.juice{
background:url(../img/menu/icon_juice_k36.png);
background-size: 36px 36px;
background-position:center center;
background-repeat:no-repeat;
color:#111;
background-color:#DCEC68;
}
.ancbox li.morning{
background:url(../img/menu/icon_bread_k36.png);
background-color:#FFE699;
background-size: 36px 36px;
background-position:center center;
background-repeat:no-repeat;
}
.ancbox li.brunch{
background:url(../img/menu/icon_eat_k36.png);
background-color:#DF8262;
background-size: 36px 36px;
background-position:center center;
background-repeat:no-repeat;
}

/* --------------------------------

ABOUT

-------------------------------- */

.cbx{
position:relative;
width:460px;
padding:0;
margin:5px;
}

@media screen and (max-width:960px) {
    .cbx{
    width:49%;
    margin:5px auto;
    }
}
@media screen and (max-width:480px) {
    .cbx{
    width:100%;
    margin:10px auto;
    text-align:center;
    float:none;
    }
}


#gmapwrap{
position:relative;
width: 100%;
height:290px;
float:none;
padding:10px 0;
margin:20px auto;

}
#gmap{
width:100%!important;
height:290px!important;
}

#aboutpage .wrapper table {
width:100%;
margin:10px 0 0 0;
border-collapse:collapse;
border-spacing:0;
font-size:13px;
font-size:1.3rem;
}

#aboutpage .wrapper tr {
border-bottom:1px solid #ddd;
}

#aboutpage .wrapper th {
width:20%;
padding: 5px 10px;
text-align:left;
border-bottom: 3px solid #aaa;
}

#aboutpage .wrapper th.tit {
font-size:18px;
font-size:1.8rem;
padding:5px 0 5px 10px;
}

#aboutpage .wrapper td {
    padding:10px;
    text-align:left;
}

@media screen and (max-width:880px){

    #aboutpage .wrapper th,
    #aboutpage .wrapper td {
    display:block;
    position:relative;
    width:100%!important;
    }
}

@media screen and (max-width:640px){

    #aboutpage .wrapper .flib,
    #aboutpage .wrapper .frib {
    width:100%;
    height:auto;
    margin:10px auto;
    }
}

.lbx{
position:relative;
width:100%;
padding:10px;
margin:10px 0;
border:5px dotted #eee;
}

.lbx img{
float:left;
display:block;
height:200px;
width:auto;
padding:10px 30px 10px 0;
}
.lbx h4 {
display:block;
font-size:15px;
font-size:1.5rem;
line-height:1.5;
padding-top:10px;
}

.lbx p {
display:block;
font-size:14px;
font-size:1.4rem;
line-height:1.5;
padding:10px;
}

@media screen and (max-width:640px){

    .lbx img{
    float:none;
    width:100%;
    height:auto;
    padding:10px;
    }
    .lbx p {
    float:none;
    display:block;
    width:100%;
    padding:10px;
    }
}

/* --------------------------------

additional style： PREBOX

-------------------------------- */
.pbx{
position:relative;
margin:0 0 20px;
padding:10px 10px;
border-bottom:5px solid #105646;
}

.pbx h2{
display:block;
color:#333333;
font-size:14px;
font-size:1.4rem;
font-weight:bold;
line-height:1;
margin:0 0 10px 0;
padding:0;
}

.pbx h2 span{
display:block;
width:100%;
color:#444444;
font-family: 'Roboto Condensed', sans-serif;
font-weight:700;
font-size:48px;
font-size:4.8rem;
letter-spacing:0px;
line-height:1;
}

.pbx h3{
display:block;
color:#444444;
font-size:18px;
font-size:1.8rem;
font-weight: bold;
line-height:1.3;
margin:20px 0;
}

.pbx p{
display:block;
color:#444444;
font-size:14px;
font-size:1.4rem;
line-height:1.8;
margin:0 0 10px 0;
}

/*---------------------------------------------
INPUT BUTTON
----------------------------------------------*/

textarea,
select,
input,
button,
.btn{
font-family:"ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,"Helvetica Neue",Helvetica,sans-serif;
}

textarea,
input[type="text"]  {
width: 100%;
font-size:15px;
font-size:1.5rem;
line-height:1.5;
text-align:left;
padding:10px;
border: 1px solid #cfd5dd;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
box-shadow: inset 0 1px 1px rgba(16, 16, 16, 0.08);
-webkit-box-shadow: inset 0 1px 1px rgba(16, 16, 16, 0.08);
}

textarea:focus,
input[type="text"]:focus  {
outline: none;
border-color: #2a96cc;
box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
-webkit-box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}

textarea {
  min-height: 150px;
  resize: vertical;
  overflow: auto;
}

/*
#mm_company {background: url("../img/form/icon_company.svg") no-repeat 12px center; background-size:24px 24px; padding-left:46px;}
#mm_name {background: url("../img/form/icon_name.svg") no-repeat 12px center; background-size:24px 24px; padding-left:46px;}
#mm_email {background: url("../img/form/icon_email.svg") no-repeat 12px center; background-size:24px 24px; padding-left:46px;}
#mm_tel {background: url("../img/form/icon_tel.svg") no-repeat 12px center; background-size:24px 24px; padding-left:46px;}
#mm_desc {background: url("../img/form/icon_desc.svg") no-repeat 12px 10px; background-size:24px 24px; padding-left:46px;}
#mm_company:focus,
#mm_name:focus,
#mm_email:focus,
#mm_tel:focus,
#mm_desc:focus {background: none; padding-left:10px;}
*/

input[type="submit"],
input[type="reset"],
input[type="button"],
button
.btn {
font-size:15px;
font-size:1.5rem;
/* font-weight:bold; */
text-align:center;
color:#105646;
padding:12px 36px;
border: 1px solid #105646;
background-color: #ffffff;
border-radius:5px;
margin:0;
cursor:pointer;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;

}

input:hover[type="submit"],
input:hover[type="reset"],
input:hover[type="button"],
button:hover,
.btn:hover {
color:#fff;
background-color:#105646;
text-decoration:none!important;
}


input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button
.btn:active {
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
}

a[href^="tel:"] {
pointer-events: none;
}


/*====================
CONTACT PAGE ＞ STEP
======================*/

#stepbox {
position:relative;
}

#stepbox ul {
width:100%;
letter-spacing:-0.4em;
margin-bottom:30px;
overflow:hidden;
}


#stepbox ul li {
position:relative;
display:inline-block;
width:34%;
height:40px;
line-height:40px;
font-size:15px;
font-size:1.5rem;
letter-spacing:1px;
text-align:center;
background-color:#ddd;
color:#333;
letter-spacing:normal;
margin-right:1%;

}

#stepbox ul li:after {
content:"";
display:block;
position:absolute;
top:0;
right:-12px;
width:0;
height:0;
border-top:20px solid transparent;
border-right:10px solid transparent;
border-bottom:20px solid transparent;
border-left:15px solid #ddd;
background-color:#fff;
}

#stepbox ul li:last-child {
width:30%;
margin-right:0;
}

#stepbox ul li:last-child:after {
content:none;
}

#stepbox ul li.current {
background-color:#105646;
color:#fff;
}

#stepbox ul li.current:after {
border-left-color:#105646;
}


/* --------------------------------
additional style: page contact
contactform
-------------------------------- */
.contact{
width:100%;
padding:2%;
}

#contactform .contact a {
color: #111;
text-decoration: underline;
}
#contactform .contact a:hover {
color: #111;
text-decoration: none;
}

#contactform p.finmes{
font-size:14px;
font-size:1.4rem;
line-height:1.5;
color:#333;
}
#contactform p.errmes{
font-size:12px;
font-size:1.2rem;
color:#db4618!important;
}
#contactform .contact table{
position:relative;
width:100%;
margin:10px 0;
font-size:14px;
font-size:1.4rem;
border:none;
}

#contactform .contact table tr {
width:100%;
vertical-align: inherit;
line-height:1.5;
border-color: inherit;

}

#contactform .contact table th {
width:100%;
display:inline-block;
vertical-align: middle;
text-align: left;
color:#fff;
background-color: #777;
padding:5px 10px;
}

#contactform .contact table td {
width:100%;
display:inline-block;
text-align: left;
padding:10px 10px;
}


/* req btn*/
#contactform .contact table th .req {
background-color:#db4618;
color:#fff;
font-size:10px;
font-size:1rem;
margin-right:6px;
padding:1px 3px;
}

#contactform .contact table th .opt {
background-color:#afafaf;
color:#fff;
font-size:10px;
font-size:1rem;
margin-right:6px;
padding:1px 3px;
}

/* ex btn*/
#contactform .contact table td .ex {
font-size:11px;
font-size:1.1rem;
color:#555;
margin-top:4px;
}

#contactform .contact table td .ex .lbl {
display:inline-block;
background-color:#eee;
color:#333;
font-size:10px;
font-size:1.0rem;
margin-right:6px;
margin-top:4px;
padding:0 2px;
}

@media only screen and (min-width: 768px) {

    #contactform .contact table th,
    #contactform .contact table td{
    display: table-cell;
    padding:20px 20px;
    }
    #contactform .contact table th{
    width:26%;
    border-bottom:none;
    font-size:14px;
    font-size:1.4rem;
    color:#333;
    background-color:#fff;
    }
    #contactform .contact table td{
    width:auto;
    }

    #submit, #reset{margin:30px 10px 10px;}

}