/****************スマホ,iphone用*****************************/

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

    /***********************************************************/
    /*********************/
    /*----------------------------------------------------------------------------
******************************************************************************
** style
******************************************************************************
----------------------------------------------------------------------------*/
    .pc {
        display: none;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: inherit;
    }
    .cp_offcm01 {
        position: absolute;
        top: 20px;
        right: 20px;
        display: inline-block;
    }
    /* menu */
    .cp_offcm01 .cp_menu {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 250px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: 0.53s transform;
        transition: 0.53s transform;
        -webkit-transition-timing-function: cubic-bezier(.38, .52, .23, .99);
        transition-timing-function: cubic-bezier(.38, .52, .23, .99);
        background-color: #607D8B;
        opacity: 0.8;
    }
    .cp_offcm01 .cp_menu ul {
        margin: 0;
        padding: 0;
        margin-top: 85px;
    }
    .cp_offcm01 .cp_menu li {
        list-style: none;
    }
    .cp_offcm01 .cp_menu li a {
        display: block;
        padding: 20px;
        text-decoration: none;
        color: #ffffff;
        border-bottom: 1px solid #ffffff;
    }

    .cp_offcm01 #cp_toggle01 {
        position: absolute;
        display: none;
        opacity: 0;
    }
    .cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
    /* menu toggle */
    .cp_offcm01 #cp_toggle01 ~ label {
        display: block;
        padding: 0.5em;
        cursor: pointer;
        -webkit-transition: 0.5s transform;
        transition: 0.5s transform;
        -webkit-transition-timing-function: cubic-bezier(.61, -0.38, .37, 1.27);
        transition-timing-function: cubic-bezier(.61, -0.38, .37, 1.27);
        text-align: center;
        color: #333333;
    }
    .cp_offcm01 #cp_toggle01:checked ~ label {
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
    .cp_offcm01 #cp_toggle01 ~ label::before {
        font-weight: 900;
        font-family: 'Font Awesome 5 Free';
        content: '\f0c9';
        font-size: 2em;
        color: #fff;
    }
    .cp_offcm01 #cp_toggle01:checked ~ label::before {
        content: '\f00d';
    }


    .mcon {
        line-height: 1.6;
        word-wrap: break-word
    }
    .mcon a img:hover {
        opacity: 0.8;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease
    }
    .mcon h1 {
        font-size: 2.2rem;
        margin-bottom: 20px;
        background: #eeeeee
    }
    .mcon h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .mcon h3 {
        font-size: 1.6rem;
        margin-bottom: 8px;
        margin-top: 16px;
    }
    .mcon h4 {
        font-size: 1.2em;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    .mcon h5,
    .mcon h6 {
        margin-bottom: 2px;
        margin-top: 5px;
    }
    .mcon hr {
        border: none;
        border-top: 1px dotted #000
    }
    .mcon iframe {
        max-width: 100%
    }
    .mcon img {
        max-width: 100%;
        height: auto
    }
    .mcon ol {
        margin-top: 1.2em;
        margin-bottom: 0.7em
    }
    .mcon ol li {
        margin-left: 1.5em;
        margin-bottom: 0.5rem
    }
    .mcon p {
        margin-bottom: 1em
    }
    .mcon ul {
        margin-top: 1.2em;
        margin-bottom: 0.7em
    }
    .mcon ul li {
        list-style-type: disc;
        margin-left: 1.5em;
        margin-bottom: 0.5rem
    }
    .wrap {
        overflow: hidden;
    }
    /***********************  header sp  *******************/
    header {
        padding: 1em 1em 0;
        position: fixed;
        top: 0;
        width: 100%;
        background: #141414;
        border-bottom: solid 3px #4549b2;
        z-index: 10;
        color: #fff;
        opacity: 1;
    }
    header div h1 {
        width: 20%;
        margin-right: 10%;
        float: left;
    }
    header div h1 img {
        width: 100%;
    }
    header div p {
        padding: 1em;
        border: 1px solid #fff;
        width: 25%;
        line-height: 1.3;
        float: left;
        margin-right: 5%;
        font-size: 0.9vw;
    }
    header div nav {
        width: 70%;
        float: left;
    }
    header div nav ul {
        margin-top: 7%;
        display: table;
    }
    header div nav ul li {
        width: 22%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        margin-right: 3%;
    }
    header div nav ul li:last-child {
        margin-right: 0;
    }
    header div nav ul li a {
        display: inline-block;
        font-size: 3vw;
        line-height: 1.5;
        color: #fff;
        padding-bottom: 2%;
        position: relative;
        text-decoration: none;
    }
    /***********************  main sp  *******************/
    main {
        width: 100%;
        padding-top: 10%;
        background: #1f1f1f;
    }
    main ol {
        display: none;
    }
    main section.slider {
        width: 100%;
        margin: 0 auto;
        position: relative;
        margin-bottom: 1%;
    }
    main section.slider .slider3 img {
        width: 100%;
    }
    main .slider3 {
        width: 100%;
        background: black;
        opacity: 0.8;
    }
    main .slider3 li {
        overflow: hidden;
    }
    main section.slider p {
        padding: 1em;
        line-height: 1.3;
        color: white;
    }
    main section.setumei {
        height: auto;
        background: #d9d9d9;
    }
    main section.Category h2 {
        font-family: 'Roboto', Century Gothic, sans-serif;
        line-height: 3.5;
        margin-bottom: 2%;
        margin-right: 1%;
        font-size: 2.2em;
        color: white;
    }
    main section.Category {
        width: 90%;
        margin: 0 auto;
    }
    main .slider2 {
        width: 95%;
        margin: 0 auto;
    }
    main .slider2 li {
        overflow: hidden;
        position: relative;
    }
    main .slider2 img {
        width: 100%;
    }
    main .slider2 .slick-slide {
        margin: 0.3%;
    }
    main .slider2 li:hover img.tran {
        -webkit-transform: rotate(-15deg) scale(1.3);
        transform: rotate(-15deg) scale(1.3);
    }
    main .slider2 li img.tran {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    main .slider2 img {
        width: 100%;
    }
    main .slider2 .slick-slide {
        margin: 0.3%;
    }
    main section.Category ul li div {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        -webkit-transition: .3s;
        transition: .3s;
        opacity: 0;
        padding: 1em;
    }
    main section.Category ul li a {
        display: block;
        color: #fff;
        height: 100%;
    }
    main section.Category ul li div p {
        width: 100%;
        height: 100%;
        display: none;
    }
    main section.Category ul li:hover div {
        opacity: 1;
        display: none;
    }
    main section.Category ul li:hover a div p {
        height: 100%;
    }
    /***********************  footer sp  *******************/
    footer {
        background: #1f1f1f;
        text-align: center;
    }
    footer a {
        color: #fff;
    }
    footer h3 {
        font-weight: bolder;
        color: #fff;
    }
    footer > div {
        padding: 1em;
        text-align: left;
        width: 85%;
        margin: 0 auto;
        background: #454545;
    }
    footer div div div div {
        margin-bottom: 1em;
        font-size: 0.8em;
    }
    footer div div div p a {
        display: inline-block;
        margin-right: 0.5em;
    }
    footer div div div > img {
        width: 20%;
        min-width: 20%;
    }
    footer p {
        line-height: 1.5;
        padding: 2%;
        color: #fff;
    }
    footer > div > p {
        text-align: center;
    }
    footer p small {
        font-size: 0.8em;
    }


}

/*スマホ,iphone用終わり*/