@charset "utf-8";
/*
Theme Name: Kanidouraku
Description: かに道楽のホームページテンプレートです。
*/

/* /******************************************************
　　　　*　Common
******************************************************* */

/*@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/

/*@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 100;
    src: url('./fonts/NotoSansCJKjp-Thin.eot');
    src: url('./fonts/NotoSansCJKjp-Thin.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-Thin.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-Thin.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 200;
    src: url('./fonts/NotoSansCJKjp-Light.eot');
    src: url('./fonts/NotoSansCJKjp-Light.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-Light.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-Light.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/NotoSansCJKjp-DemiLight.eot');
    src: url('./fonts/NotoSansCJKjp-DemiLight.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-DemiLight.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-DemiLight.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/NotoSansCJKjp-Regular.eot');
    src: url('./fonts/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-Regular.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-Regular.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/NotoSansCJKjp-Medium.eot');
    src: url('./fonts/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-Medium.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-Medium.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/NotoSansCJKjp-Bold.eot');
    src: url('./fonts/NotoSansCJKjp-Bold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-Bold.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-Bold.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 900;
    src: url('./fonts/NotoSansCJKjp-Black.eot');
    src: url('./fonts/NotoSansCJKjp-Black.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NotoSansCJKjp-Black.woff') format('woff'),
    url('./fonts/NotoSansCJKjp-Black.ttf')  format('truetype');
}*/

h1{
    line-height: 1.4;
}
a{
    color: #E1352B
}

.cf:before,
.cf:after{
content:"";
display: table;
}
.cf:after{
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0.1em;/*added for FF*/
}
/*IE6,7対策 （haslayout対策）*/
.cf{
*zoom:1;
}

/* for IE6 */
* html ol li dl {
  display: inline;
}

/* for IE7 */
*:first-child+html ol li dl {
  display: inline;
}

.mgt5{
    margin-top: 5px;
}
.mgt10{
    margin-top: 10px;
}
.mgt15{
    margin-top: 15px;
}
.mgt20{
    margin-top: 20px;
}
.mgb5{
    margin-bottom: 5px;
}
.mgb10{
    margin-bottom: 10px;
}
.mgb15{
    margin-bottom: 15px;
}
.mgb20{
    margin-bottom: 20px;
}

html {
    font-size: 16.5px;
}

body{
    font-family : "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6",  Meiryo, メイリオ, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-weight: 200;
}
body .contents {
    background-image: url(./images/bg01.jpg);
}

/* 網本、いけす特別対応 start */
body.page-id-1661 .contents,
body.page-id-1664 .contents,
body.page-id-1666 .contents,
body.page-id-757 .contents,
body.page-id-760 .contents,
body.page-id-763 .contents,
body.page-id-766 .contents,
body.page-id-769 .contents,
body.page-id-772 .contents{
    background-image: url(./images/bg03-2.png), url(./images/bg04.png), url(./images/bg03.png),url(./images/bg02.jpg);
    background-position: bottom left, top center, top left, top left;
    background-repeat: repeat-x, no-repeat, repeat-x, repeat;
}
/* 網本、いけす特別対応 end */

ul.notes li{
    line-height:1.7em;
}

ul.notes {
    padding: 15px;
    border: 1px dotted #ccc;
}

ul.notes.indent1em li{
    text-indent:-1em;
    margin-left:1em;
}
/*----------------------------------------------------
    LOADING IMG
----------------------------------------------------*/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 300;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #333333;
  z-index: 2;
}



/*----------------------------------------------------
    FOOT BUNNER LIST
----------------------------------------------------*/

.bottom-bunner {
    padding: 5px 0 0;
    background-image:
        url("//douraku.co.jp/wp-content/themes/kanidouraku/images/boh.jpg"),
        url(./images/bg03.jpg);
    background-repeat:
        repeat-x,
        repeat;
    background-position:
        left top,
        left top;
    background-size:
        2px,
        200px;
}

.bottom-bunner .inner {
    width: 960px;
    margin: auto;
    position:relative;
}
.kani-img {
    background-image: url(./images/kani-bg.png);
    background-position: center top 7px;
    background-repeat: no-repeat;
}




.bottom-bunner .bunner-list li {
    width: 25%;
    float: left;
}
.bottom-bunner .bunner-list li img{
    display:block;
    margin:auto;
}

.bottom-bunner .inner{
    width: 960px;
    margin:auto;
}
.bottom-bunner {
    padding: 50px 0;
}
.bottom-bunner .fb-bunner {
    width: 960px;
    margin: auto;
}
@media only screen and (max-width:975px) {
    .bottom-bunner .fb-bunner {
        width: 100% !important;
    }
    .bottom-bunner .inner {
        width: 90% !important;
    }
    .bottom-bunner .bunner-list li {
        width: 24%;
        float: left;
        margin-right: 1%;
        box-sizing: border-box;
    }
    .bottom-bunner .fb-bunner{
        width:100%;
    }
    .bottom-bunner .fb-bunner img {
        max-width: 90%;
    }
    .bottom-bunner .fb-bunner {
        margin-top: 20px;
    }
    .bottom-bunner .bunner-list li img {
        width: 90%;
    }
}
.bottom-bunner .fb-bunner img {
    max-width: 468px;
    margin: auto;
    display: block;
    margin-top: 30px;
    width: 100%;
}
.fb-bunner a.Lbnr{
    float: left;
    margin-left: 1%;
}
.fb-bunner a.Rbnr{
    float: right;
}


@media only screen and (max-width: 784px){
.fb-bunner a.Lbnr{
    margin-left: 0;
    margin-bottom: 2%;
}
}





/*----------------------------------------------------
    FOOTER
----------------------------------------------------*/
footer {
    background-color: #E1352B;
    padding: 40px 0;
    color: #FFF;
    background-image: url(./images/pat.gif);
    background-repeat: repeat-x;
    background-position: bottom;
}
footer small {
    font-size: 0.7rem;
    font-size: 12px;
    display: block;
    width: 960px;
    margin: auto;
    text-align: center;
    margin-top: 100px;
}
/*@media only screen and (max-width:978px) {
    footer small {
        width: 100%;
    }
}*/
footer img {
    margin: auto;
    display: block;
}
footer ul.foot-nav li {
    display: inline;
}
footer ul.foot-nav li a {
    color: #FFF;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    margin: 0 15px;
    border-bottom: 1px dotted #F67870;
    padding-bottom: 4px;
}
footer ul.foot-nav {
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
    text-align: center;
}
footer ul.foot-nav2 li{
    display: inline;
}
footer ul.foot-nav2 li a {
    color: #FFF;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    border-bottom: 1px dotted #F67870;
    margin: 0 15px;
    padding-bottom:4px;
}
footer ul.foot-nav2 {
    width: 100%;
    margin: auto;
    margin-bottom: 40px;
    text-align: center;
}

/*----------------------------------------------------
    HEADER
----------------------------------------------------*/
header {
    background-image: url(./images/pat.gif);
    background-repeat: repeat-x;
    background-position: top;
    border-bottom: 1px solid #EEE;
    background-size: 8px;
}
i{
font-family:FontAwesome;
font-style:normal;
}
header h1 {
    margin: 0;
    padding: 40px 0 30px 0;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    /*width: 260px;*/
    float: left;
}
header .header-row1 {
    float: right;
    padding: 20px 0;
}
.header-row2.cf {
    float: right;
}
header .inner{
    width: 960px;
    margin: auto;
}
@media only screen and (max-width:975px) {
    header .inner {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 10px;
    }
}
header ul.main-nav {
    position: relative;
}
header ul.main-nav li {
    display:inline;
}
header ul.main-nav li.area {
    margin-top: 7px;
    border-bottom: 3px solid #E61818;
    margin-left: 20px;
}
header ul.social-nav {
    margin-top: 4px;
}
ul.main-nav li.area a {
    text-decoration: none;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    line-height: 2em;
    font-size:1rem;
    /*font-family: 'Noto Sans Japanese', serif;*/
    font-weight: 600;
    color: #333;
}
header li.omotenashi a {
    color: #FFF;
    text-decoration: none;
    font-size: 0.8rem;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #9F7803;
    font-weight: 600;
    padding: 3px 10px!important;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*font-family: 'Noto Sans Japanese', serif;*/
    text-align: center;
    -moz-box-shadow: 0 4px 0 #795B03;
    -webkit-box-shadow: 0 4px 0 #795B03;
    -ms-box-shadow: 0 4px 0 #795B03;
    -o-box-shadow: 0 4px 0 #795B03;
    box-shadow: 0 4px 0 #795B03;
    width: 150px;
}
header li.omotenashi span{
    display:block;
    font-family : Arial,'ＭＳ Ｐゴシック',serif!important;
    font-size: 0.6rem;
    margin-top: 5px;
}
header ul.social-nav,
header ul.lang-nav,
header ul.small-nav{
    float:left;
}
header ul.social-nav li {
    float: left;
    margin-right: 10px;
}
header ul.lang-nav li {
    float: left;
    border-right: 1px solid #DDD;
    margin-right: 10px;
    padding-right: 10px;
    padding: 5px 10px 3px 0;
}
header ul.lang-nav li:last-child,
header ul.lang-nav li.lastChild{
    border-right: 0;
}
header ul.lang-nav li a {
    text-decoration: none;
    color: #333;
    font-size: 12px!important;
    font-size: 0.75rem;
}
header ul.small-nav li {
    float: left;
    margin-left: 10px;
    padding: 4px 0 2px;
}
header ul.small-nav li a {
    text-decoration: none;
    color: #666;
    font-size: 12px!important;
    font-size: 0.75rem;
    border-bottom: 1px solid #666;
    line-height: 1.2em;
}

header #sp-menu{
    display:none;
}

header ul.main-nav li.nav_btn {
    margin-left: 20px;
}

header ul.main-nav li.nav_btn a {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #e4332b;
    border-bottom: 3px solid #c02b24;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

/*----------------------------------------------------
    TO TOP
----------------------------------------------------*/
.page-top
{
    margin: 0 ;
    padding: 0 ;
}

.page-top p
{
    margin: 0 ;
    padding: 0 ;

    position: fixed ;
    right: 16px ;
    bottom: 16px ;
}

.move-page-top {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.move-page-top:hover
{
    opacity: 0.85 ;
}

/*----------------------------------------------------
    breadcrumb
----------------------------------------------------*/
.contents .breadcrumb li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    line-height: 1.7em;
    color: #666;
    font-size:0.85rem;
}
.contents .breadcrumb li:after {
    content: ' ＞';
    font-size: 0.6em;
    padding-left: 5px;
    vertical-align: top;
}
.contents .breadcrumb li:last-child:after,
.contents .breadcrumb li.lastChild:after {
    content: '';
}

.contents .breadcrumb  {
    width: 960px;
    margin: auto;
    padding: 20px 0;
}
@media only screen and (max-width:975px) {
    .contents .breadcrumb {
        width: 100% !important;
    }
}

/*----------------------------------------------------
    default page
----------------------------------------------------*/

.page-template-default .contents .inner{
    line-height:1.7em;
}

.page-template-default .contents .page-ttl-wrap {
    background-image: url(./images/area-top/common/h2-bg.png);
    background-repeat: no-repeat;
    background-position: left top;
    width: 960px;
    margin: auto;
    height: 130px;
}

.page-template-default .contents .page-ttl-wrap h2 {
    font-weight: 700;
    font-size: 2rem;
    padding: 50px 0 0 15px;
}

.def-page .inner {
    width: 960px;
    margin: auto;
    background-color: #FFF;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    position: relative;
}
body .def-page {
    padding-bottom: 30px;
}
/*----------------------------------------------------
    copyright page
----------------------------------------------------*/
.copyright-box li.listHead {
    font-weight: bold;
}


@media only screen and (max-width:790px){
/*----------------------------------------------------
    HEADER
----------------------------------------------------*/
    header{
        background-size: 6px;
    }
    header .inner {
        width: 100%;
        position: relative;
    }
    header #sp-menu{
        display:block;
    }
    header #pc-menu{
        display:none;
    }
    header h1 {
        padding: 23px 0 19px 0;
        width: 130px;
        float: none;
        margin: auto;
        display: block;
    }
    header h1 img{
        width:100%;
    }
    #sp-menu-open {
        font-size: 35px;
        position: absolute;
        right: 0;
        top: 0;
        color: #E4332B;
        cursor: pointer;
        display: block;
        border-left: 1px solid #EEE;
        padding: 24px 25px 20px 25px;
    }
    .close-animatedModal .fa {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 230;
        width: 36px;
        height: 36px;
        font-size: 40px;
        cursor: pointer;
        color: #FFF;
    }
    .modal-content {
        margin: 65px 0 20px;
    }

    .sp-social-nav{
        text-align: center;
    }
    li.sp-facebook,
    li.sp-twitter {
        text-align:center;
        display: block;
    }
    li.sp-facebook{
        padding: 10px 10px 5px;
    }
    li.sp-twitter {
        padding: 5px 10px 10px;
    }
    .sp-header-row1 li a {
        text-align: center;
        color: #FFF;
        font-size: 0.9rem;
        display: block;
        text-decoration: none;
        padding: 12px 0;
        /*font-family: 'Noto Sans Japanese', serif;*/
        font-weight: 400;
        padding: 5% 0;
        border-top: 1px solid #1d1d1d;
    }
    ul.cf.sp-lang-nav li a {
        text-align: center;
        color: #FFF;
        font-size: 0.8rem;
        display: block;
        text-decoration: none;
        padding: 7% 0;
        border-top: 1px solid #000;
        background-color: #191919;
    }
    ul.cf.sp-lang-nav li {
        width: 50%;
        float: left;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
    }
    ul.cf.sp-lang-nav li:nth-child(odd) {
        border-right: 1px solid #000;

    }
    .sp-header-row2 .sp-small-nav li a {
        text-align: center;
        color: #FFF;
        font-size: 0.9rem;
        display: block;
        text-decoration: none;
        padding: 5% 0;
        border-top: 1px solid #1d1d1d;
    }
    .sp-header-row2 .sp-small-nav li:last-child a,
    .sp-header-row2 .sp-small-nav li.lastChild a{
        margin-bottom: 0px;
    }
    .sp-header-row2 ul.sp_nav_btn {
        display: flex;
    }
    .sp-header-row2 ul.sp_nav_btn li {
        width: 40%;
        margin: 5% 5%;
        padding: 2% 0;
        background-color: red;
        border-radius: 5px;
        background-color: #e4332b;
        border-bottom: 3px solid #c02b24;
    }
    .sp-header-row2 ul.sp_nav_btn li a {
        display: block;
        text-align: center;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;

    }
}


@media only screen and (max-width:768px){
    img{
        max-width: 100%;
        height: auto;
        width /***/:auto;　
    }
/*----------------------------------------------------
    default page
----------------------------------------------------*/
    .page-template-default .contents .page-ttl-wrap{
        background-position: right top;
        width: 100%;
    }
    .page-template-default .contents .page-ttl-wrap h2 {
        padding: 15px 0 0 15px;
        font-size: 1.4rem;
        line-height: 1.5em;
    }
    .page-template-default .contents .inner {
        width: 100%;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        margin-bottom: 0;
    }

/*----------------------------------------------------
    breadcrumb
----------------------------------------------------*/

.contents .breadcrumb {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

/*----------------------------------------------------
    BUNNER AREA
----------------------------------------------------*/
    .bottom-bunner .bunner-list li img {
        width: 100%;
    }
    /*.bottom-bunner .inner {
        width: 90%;
        margin: auto;
    }*/
    /*.bottom-bunner .bunner-list li {
        width: 24%;
        float: left;
        margin-right: 1%;
    }*/
    /*.bottom-bunner .fb-bunner{
        width:100%;
    }
    .bottom-bunner .fb-bunner img {
        max-width: 90%;
    }
    .bottom-bunner .fb-bunner {
        margin-top: 20px;
    }*/
/*----------------------------------------------------
    FOOTER
----------------------------------------------------*/
    footer small {
        width: 100%;
        margin-top: 0;
        padding-bottom: 20px;
    }
    /*footer ul.foot-nav,
    footer ul.foot-nav2{
        width: 90%;
    }*/
    footer ul.foot-nav {
        margin-bottom: 0;
    }
    footer ul.foot-nav li,
    footer ul.foot-nav2 li {
        display: block;
    }
    footer img {
        width: 120px;
        padding: 50px 0;
    }
    footer {
        padding: 0;
        background-size: 6px;
    }
    footer ul.foot-nav li a,
    footer ul.foot-nav2 li a {
        color: #FFF;
        font-weight: 600;
        font-size: 0.8rem;
        font-size: 12px;
        text-decoration: none;
        margin: 0;
        padding-bottom: 0;
        display: block;
        padding: 7px 5%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        line-height: 26px;
        text-align: left;
    }
    footer ul.foot-nav2 {
        margin-bottom: 0;
    }
}

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

/*----------------------------------------------------
    HEADER
----------------------------------------------------*/
    header li.omotenashi a{
        font-family: monospace;
    }
    header h1 {
        width: 100px;
        padding: 18px 0 12px 0;
        display: block;
        margin: auto;
    }
    .close-animatedModal .fa {
        right: 10px;
        top: 11px;
    }
    a#sp-menu-open {
        font-size: 30px;
        position: absolute;
        right: 0;
        top: 0;
        color: #E4332B;
        cursor: pointer;
        display: block;
        border-left: 1px solid #EEE;
        padding: 17px 18px 14px 18px;
    }

/*----------------------------------------------------
    BUNNER AREA
----------------------------------------------------*/
    .bottom-bunner .bunner-list li {
        width: 49%;
        float: left;
        padding: 0 0 2% 0;
        margin-right: 0;
    }
    .bottom-bunner .bunner-list li:nth-child(odd) {
        padding: 0 2% 2% 0;
    }
/*----------------------------------------------------
    FOOTER
----------------------------------------------------*/
    footer img {
        width: 100px;
    }
}