@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :top.css
 style info :トップページのスタイル
=================================================================== */
/* ==========================================================
    TOPICS
  ========================================================== */
#topics {
  width: 100%;
  background: #fff; }
  @media screen and (min-width: 751px) {
    #topics {
      min-width: 960px;
      height: 58px; } }
  @media screen and (min-width: 751px) {
    #topics .inner {
      width: 960px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      position: relative; } }
  @media screen and (min-width: 751px) {
    #topics .inner h3 {
      float: left;
      margin-right: 20px;
      padding-top: 6px; } }
  @media screen and (max-width: 750px) {
    #topics .inner h3 {
      width: 20%;
      padding-left: 3%;
      text-align: left; } }
  #topics .inner div.ticker {
    overflow: hidden; }
    @media screen and (min-width: 751px) {
      #topics .inner div.ticker {
        float: left;
        padding-top: 18px; } }
    @media screen and (max-width: 750px) {
      #topics .inner div.ticker {
        font-size: 2.6vw;
        width: 96%;
        margin: 0 auto;
        padding: 2% 0%; } }
    #topics .inner div.ticker ul {
      height: 1.6em; }
      @media screen and (max-width: 750px) {
        #topics .inner div.ticker ul {
          padding: 0% 1%; } }
      #topics .inner div.ticker ul li {
        float: left;
        display: inline;
        clear: both;
        text-align: left;
        list-style-type: none;
        position: relative;
        line-height: 1.6em;
        margin-bottom: -1.6em; }
        #topics .inner div.ticker ul li dl {
          white-space: nowrap; }
          #topics .inner div.ticker ul li dl dt {
            display: inline; }
            @media screen and (min-width: 751px) {
              #topics .inner div.ticker ul li dl dt {
                margin-right: 20px; } }
            @media screen and (max-width: 750px) {
              #topics .inner div.ticker ul li dl dt {
                margin-right: 1%; } }
          #topics .inner div.ticker ul li dl dd {
            display: inline; }
            #topics .inner div.ticker ul li dl dd a {
              color: #c5360f;
              text-decoration: underline; }

/* ==========================================================
    CONTENT
  ========================================================== */
#content {
  width: 100%;
  background: url(../img_new/shared/bg_wood.gif) repeat top center;
  position: relative; }
  @media screen and (min-width: 751px) {
    #content {
      min-width: 960px; } }
  #content #contentArea {
    background: url(../img_new/shared/bg_woodh.gif) repeat-x top center; }
    @media screen and (min-width: 751px) {
      #content #contentArea {
        padding-top: 50px; } }
    @media screen and (max-width: 750px) {
      #content #contentArea {
        padding-top: 6%; } }
    #content #contentArea .inner {
      text-align: center;
      margin: 0 auto; }
      @media screen and (min-width: 751px) {
        #content #contentArea .inner {
          width: 960px;
          padding-bottom: 30px; } }
      @media screen and (max-width: 750px) {
        #content #contentArea .inner {
          line-height: 1.4;
          padding-bottom: 3%; } }
      @media screen and (max-width: 750px) {
        #content #contentArea .inner .bnr {
          width: 90%;
          margin: 0 auto; } }
      #content #contentArea .inner #slideArea {
        background: url(../img_new/top/bg_slide.png) no-repeat top center; }
        @media screen and (min-width: 751px) {
          #content #contentArea .inner #slideArea {
            height: 577px;
            padding: 21px;
            margin-bottom: 40px; } }
        @media screen and (max-width: 750px) {
          #content #contentArea .inner #slideArea {
            width: 96%;
            padding: 2% 2% 4%;
            margin: 0 auto 4%;
            background-size: 100%; } }
        @media screen and (min-width: 751px) {
          #content #contentArea .inner #slideArea .slider {
            margin-bottom: 14px; } }
        @media screen and (max-width: 750px) {
          #content #contentArea .inner #slideArea .slider {
            margin-bottom: 1%; } }
        #content #contentArea .inner #slideArea .thumb li {
          opacity: 0.6; }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner #slideArea .thumb li {
              width: 220px !important; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner #slideArea .thumb li {
              width: 24% !important;
              margin-left: 1%;
              /*
              width: 6.92%!important;
              margin-left: 0.2%;
              */ } }
        #content #contentArea .inner #slideArea .thumb .slick-current {
          opacity: 1; }
        #content #contentArea .inner #slideArea .thumb .slick-list {
          margin: 0 auto !important;
          position: relative;
          padding: 0 !important; }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner #slideArea .thumb .slick-list {
              width: 880px !important;
              left: 3px; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner #slideArea .thumb .slick-list {
              width: 98.6% !important;
              position: relative;
              left: -0.5%;
              /*
              width: 92%!important;
              */ } }
        #content #contentArea .inner #slideArea .thumb .slick-arrow {
          width: 17px;
          height: 17px;
          overflow: hidden;
          text-indent: 100%;
          white-space: nowrap; }
        #content #contentArea .inner #slideArea .thumb .slick-prev {
          left: 0 !important;
          background: url(../img_new/top/btn_slide_l.png) no-repeat 0 0; }
        #content #contentArea .inner #slideArea .thumb .slick-next {
          right: 0 !important;
          background: url(../img_new/top/btn_slide_r.png) no-repeat 0 0; }
      #content #contentArea .inner .box {
        background-image: url(../img_new/top/bg_content_t.gif), url(../img_new/top/bg_content_b.gif), url(../img_new/top/bg_content_loop.gif);
        background-repeat: no-repeat,no-repeat,repeat-y;
        background-position: top center,bottom center,top center; }
        @media screen and (min-width: 751px) {
          #content #contentArea .inner .box {
            margin: 50px auto 40px;
            padding: 40px 0px; } }
        @media screen and (max-width: 750px) {
          #content #contentArea .inner .box {
            width: 96%;
            background-size: 100%;
            margin: 5% auto 4%;
            padding: 4% 2%; } }
        @media screen and (min-width: 751px) {
          #content #contentArea .inner .box h3 {
            margin-bottom: 30px; } }
        @media screen and (max-width: 750px) {
          #content #contentArea .inner .box h3 {
            margin-bottom: 4%; } }
        #content #contentArea .inner .box ul {
          margin: 0 auto; }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner .box ul {
              width: 880px;
              padding: 0px 20px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-orient: horizontal;
              -webkit-box-direction: normal;
              -ms-flex-flow: row wrap;
              flex-flow: row wrap;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box ul {
              width: 100%; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box ul li {
              width: 74%;
              margin: 0 auto; } }
          #content #contentArea .inner .box ul li:nth-child(1) {
            margin-bottom: 4%; }
        #content #contentArea .inner .box .laytonAppArea {
          border-bottom: solid 2px #e1c8a5; }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner .box .laytonAppArea {
              padding-bottom: 10px; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box .laytonAppArea {
              padding-bottom: 4%; } }
        #content #contentArea .inner .box .laytonArea {
          border-top: solid 2px #faf6f0;
          border-bottom: solid 2px #e1c8a5;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
          flex-flow: row wrap;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner .box .laytonArea {
              padding-top: 40px; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box .laytonArea {
              padding-top: 4%; } }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner .box .laytonArea li {
              margin-bottom: 20px; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box .laytonArea li {
              margin-bottom: 2%;
              width: 48%; }
              #content #contentArea .inner .box .laytonArea li:nth-child(1) {
                margin-bottom: 0%; } }
        #content #contentArea .inner .box .otherArea {
          border-top: solid 2px #faf6f0;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
          flex-flow: row wrap;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner .box .otherArea {
              padding-top: 20px; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box .otherArea {
              padding: 2% 1%; } }
          @media screen and (min-width: 751px) {
            #content #contentArea .inner .box .otherArea li {
              margin-bottom: 20px; } }
          @media screen and (max-width: 750px) {
            #content #contentArea .inner .box .otherArea li {
              margin-bottom: 0% !important;
              width: 50%; } }
          #content #contentArea .inner .box .otherArea li:nth-child(odd) {
            border-right: solid 2px #e1c8a5; }
            @media screen and (min-width: 751px) {
              #content #contentArea .inner .box .otherArea li:nth-child(odd) {
                padding-right: 15px; } }
            @media screen and (max-width: 750px) {
              #content #contentArea .inner .box .otherArea li:nth-child(odd) {
                padding-right: 2%; } }
          #content #contentArea .inner .box .otherArea li:nth-child(even) {
            border-left: solid 2px #faf6f0; }
            @media screen and (min-width: 751px) {
              #content #contentArea .inner .box .otherArea li:nth-child(even) {
                padding-left: 20px;
                margin-right: -5px; } }
            @media screen and (max-width: 750px) {
              #content #contentArea .inner .box .otherArea li:nth-child(even) {
                padding-left: 2%; }
                #content #contentArea .inner .box .otherArea li:nth-child(even) a {
                  margin-right: -2%; } }
      #content #contentArea .inner #stamp {
        margin: 0 auto; }
        @media screen and (min-width: 751px) {
          #content #contentArea .inner #stamp {
            width: 846px; } }
        @media screen and (max-width: 750px) {
          #content #contentArea .inner #stamp {
            width: 80%; } }
        @media screen and (max-width: 750px) {
          #content #contentArea .inner #stamp:after {
            top: -18px !important; } }