@charset "UTF-8";
main .example {
  display: flex;
  flex-wrap: wrap; }
  main .example dl {
    width: 480px;
    margin-top: 60px;
    overflow: hidden; }
    main .example dl:nth-child(2n) {
      margin-left: 100px; }
    main .example dl dt {
      border-bottom: 1px solid #B2B2B2;
      position: relative;
      padding-bottom: 5px;
      margin-bottom: 20px;
      font-size: 30px; }
      main .example dl dt:after {
        content: "";
        display: block;
        line-height: 0;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 80px;
        border-bottom: 1px solid #15508C; }
    main .example dl dd .no-slide {
      margin-bottom: 10px; }
    main .example dl dd .slide-wrap div {
      width: 480px; }
    main .example dl dd .slide-wrap .now-image, main .example dl dd .slide-wrap .thumbnail {
      cursor: pointer; }
      main .example dl dd .slide-wrap .now-image :focus, main .example dl dd .slide-wrap .thumbnail :focus {
        outline: none; }
    main .example dl dd .slide-wrap .now-image {
      height: 320px; }
      main .example dl dd .slide-wrap .now-image .slick-active, main .example dl dd .slide-wrap .now-image .slick-slide {
        height: 320px; }
    main .example dl dd .slide-wrap .slick-slide {
      display: block;
      float: left;
      height: 100%;
      min-height: 1px; }
    main .example dl dd .slide-wrap .thumbnail {
      height: 76px;
      margin: 8px 0 20px; }
      main .example dl dd .slide-wrap .thumbnail .slide-item-thum {
        cursor: pointer;
        width: 24% !important;
        list-style: none;
        margin-right: 6px; }
        main .example dl dd .slide-wrap .thumbnail .slide-item-thum img {
          opacity: 0.5;
          width: 100%;
          height: auto; }
        main .example dl dd .slide-wrap .thumbnail .slide-item-thum.slick-current img {
          opacity: 1; }
        main .example dl dd .slide-wrap .thumbnail .slide-item-thum:last-child {
          margin: 0; }
      main .example dl dd .slide-wrap .thumbnail .slick-track {
        transform: none !important; }
    main .example dl dd p {
      clear: both; }
    main .example dl dd ul li {
      display: flex; }
      main .example dl dd ul li:before {
        content: "●"; }

@media screen and (max-width: 1180px) {
  main .example {
    max-width: 830px;
    margin: 0 auto; }
    main .example dl {
      max-width: 400px; }
      main .example dl:nth-child(2n) {
        margin-left: 30px; }
      main .example dl dt {
        font-size: 26px; }
      main .example dl dd .slide-wrap div {
        width: 400px; }
      main .example dl dd .slide-wrap .now-image {
        height: 266px; }
        main .example dl dd .slide-wrap .now-image .slick-active, main .example dl dd .slide-wrap .now-image .slick-slide {
          height: 266px; }
      main .example dl dd .slide-wrap .thumbnail {
        margin-top: 6px; }
        main .example dl dd .slide-wrap .thumbnail .slide-item-thum {
          margin-right: 1.2%; } }
@media screen and (max-width: 950px) {
  main .example {
    display: block; }
    main .example dl {
      max-width: 100%;
      margin: 30px auto 0 !important; }
      main .example dl dt {
        font-size: 24px; }
      main .example dl dd .slide-wrap div {
        width: 100%; }
      main .example dl dd .slide-wrap .now-image {
        height: auto;
        display: inline-block; }
        main .example dl dd .slide-wrap .now-image .slick-active, main .example dl dd .slide-wrap .now-image .slick-slide {
          height: auto; }
      main .example dl dd .slide-wrap .thumbnail {
        height: auto;
        display: inline-block;
        margin: 0 0 10px; } }