@charset "UTF-8";

/*共通部分-----------------------------------------------*/

html {
    font-size: 100%;
}

body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
}



.news-bg :before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(images/dress-bg-b-min.png) center no-repeat;
    background-size: cover;
}

.concept-bg :before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5;
    width: 100%;
    height: 100vh;
    background: url(images/white-shirt-min.jpg) center no-repeat;
    background-size: cover;
    opacity: 0.7;
}

.zoom-bg:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(zoom.images/bg-s.jpg) center no-repeat;
    background-size: cover;

}


.main_imgBox_ni {
    background-image: url(images/eriuki.jpg);
    background-size: cover;
    width: 100%;
    height: 900px;
    overflow: hidden;
    position: relative;
    top: 135px;

}

/*.main_imgBox_san {
    background-image: url(images/hiraoki.jpg);
    background-size: cover;
    width: 100%;
    height: 900px;
    overflow: hidden;
    position: relative;
    top: 135px;

}*/

.main_imgBox_san {
    background-image: url(images/hiraoki.jpg);
    background-size: cover;
    width: 100%;
    height: 900px;
    overflow: hidden;
    position: relative;
    top: 135px;

}




a {
    /*    text-decoration: none;*/
}

img {
    max-width: 100%;
}


header {
    width: 100%;
    background-color: rgba(255, 255, 255);
    height: auto;
    padding-top: 10px;
    position: fixed;
    z-index: 12;
    top: 0;
    height: 136px
}



footer {
    background-color: #123aa8;
    color: white;
    text-align: center;
    font-size: 1rem;
    padding: 13px;
}

footer li a {
    color: white;
    padding: 20px;
    text-decoration: none;
}

.brank {
    height: 300px;
}

.brank-n {
    height: 50px;
}

.hamburger-menu {
    display: none;
}

.h1-little {
    font-size: 1.5rem;
}

/*共通部分-----------------------------------------------*/


/*使い回し部分*/
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

.flex {
    display: flex;
    justify-content: center;
}





.flex-s {
    display: flex;
    justify-content: flex-start;
}

.flex-b {
    display: flex;
    justify-content: center;
    /*    width: 300px;*/
    margin-left: auto;
    margin-right: auto;
}

.u-line {
    border-bottom: solid 2px rgba(78, 78, 78, 0.5);
    width: auto;
    /*    height: 80px;*/
    /*    background-color: beige;*/
}

.u-line-s {
    border-bottom: solid 2px rgba(78, 78, 78, 0.5);
    width: auto;
    /*    padding: 10px;*/
}

.t-line {
    border-top: solid 2px rgba(78, 78, 78, 0.5);
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.t-line-b {
    border-top: solid 2px rgba(78, 78, 78, 0.5);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.u-line h3 {
    margin-top: 3px;
}

.u-line p {
    margin-top: 6px;
    margin-left: 50px;
}

.article {
/*    background-color: rgba(234, 232, 232, 0.59);*/
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    z-index: 12;
    margin-top: 170px;
    margin-bottom: 200px;
    padding-bottom: 50px;


}

.article-c {
    /*    background-color: rgba(234, 232, 232, 0.59);*/
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    z-index: 12;
    margin-top: 170px;
    /*    margin-bottom: 20px;*/
    padding-bottom: 30px;


}

.article-d {
    /*    background-color: rgba(234, 232, 232, 0.59);*/
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    z-index: 12;
    margin-top: 30px;
    /*    margin-bottom: 20px;*/
    padding-bottom: 30px;


}

.center {
    text-align: center;
    padding-top: 60px;

}



.bt {
    width: 30px;
    height: 30px;
    margin: 3px;
/*    margin-top: 20px;*/
    
}




.article-b {
    background-color: rgba(28, 90, 173, 0.4);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;


}

.article-c {
    /*    background-color: rgba(234, 232, 232, 0.59);*/
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.article-p {
    /*    background-color: rgba(234, 232, 232, 0.59);*/
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    /*    padding: 60px;*/

}



.price-box {
    width: 815px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 5px;
}

/*.price h3 {
    border-bottom: solid 2px rgba(78, 78, 78, 0.5);
    width: 850px;
}*/


.sns-box {
    width: 300px;
    height: auto;
    background-color: rgba(150, 150, 150, 0.1);
    margin: 10px;
    text-align: center;
    padding: 10px;
}


.sns-box-b {
    text-align: center;
}



.sns-box-c {
    width: 350px;
    height: auto;
    background-color: rgba(150, 150, 150, 0.1);
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10px;
}


/*表示領域へきたらフェイドイン*/
.fade_off {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 2s;

}

.fade_on {
    opacity: 1;
}



/*使い回し部分*/


/*header------------------------------------------*/
.main-nav {
    display: flex;
    justify-content: center;
    font-size: 1.05rem;
    list-style: none;
    padding-top: 20px;
    /*    margin-top: 20px;*/
}




.main-nav-b {
    display: flex;
    justify-content: center;
    /*    font-size: 1.25rem;*/
    list-style: none;
    /*    padding-top: 15px;*/
    /*    padding-left: 20px;*/


    /*    margin-top: 20px;*/

}

.id {
    color: #5a5a5a;
    font-size: 90%;
    /*    text-align: center;*/
}

.main-nav a:hover {
    color: #256cbf;
}

.main-nav a:visited {
    color: #002ec7;
}

.main-nav li {
    /*        border-left: 1px solid #999;*/
    /*    padding: 0 10px;*/
    /*    text-align: center;*/
    color: #123aa8;
    /*            background-color: rgba(163, 163, 163, 0.2);*/
    text-align: center;
    width: 100px;
    padding: 0 3px;

}

.main-nav a {
    text-align: center;


}

.active {
    font-weight: bolder;
    /*    font-size: 1rem;*/
    color: #1b9652;
}

/*.active a {
    color: #123aa8;
}*/

.active a:hover {
    color: #0bd;
}

.page-header {
    z-index: 12;
    /*    height: 80px;*/

}

.logo {
    height: 100%;
}

/*ブログバナーここから*/
.brog {
    font-size: 0.85rem;
    padding: 2px;
    margin: 5px;
    border-radius: 3px;
    background-color: #055ace;
    color: white;
    font-weight: bold;
    position: relative;
    box-shadow: 0 1px 0 0 rgba(5, 17, 154, 0.72);
    /*影の色*/
    overflow: hidden;
    transition: 0.2s;
}

.brog-position {
    float: right;
    width: auto;
}

.brog:hover {
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
}

/*ブログバナーここまで*/

/*top-page----------------*/

/*スライドショーここから*/

.main_imgBox {
    height: 900px;
    overflow: hidden;
    position: relative;
    top: 135px;


}

.main_img {
    z-index: 10;
    opacity: 0;
    width: 100%;
    height: 900px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 42s 0s infinite;
}

.main_img:nth-of-type(1) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

.main_img:nth-of-type(2) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}

.main_img:nth-of-type(3) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

.main_img:nth-of-type(4) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}

.main_img:nth-of-type(5) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}

.main_img:nth-of-type(6) {
    -webkit-animation-delay: 36s;
    animation-delay: 36s;
}

@keyframes anime {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
        transform: scale(1.2);
        z-index: 9;
    }

    100% {
        opacity: 0
    }
}

/*スライドショーここまで*/

.main_logo {
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255, .6);
    padding: 10px;
    border-radius: 5px;
}





.main_logo-b {
    z-index: 11;
    position: absolute;
    top: 15%;
    left: 5%;
    /*    transform: translate(-25%, -25%);*/
    width: 40%;
    height: auto;
    background-color: rgba(255, 255, 255, .76);
    padding: 20px;
    border-radius: 5px;
    animation-name: fadein;
    animation-duration: 2s;
    margin-left: auto;
    margin-right: auto;
}

.main_logo-c {
    z-index: 11;
    position: absolute;
    top: 0%;
    left: 50%;
    /*    transform: translate(-25%, -25%);*/
    width: 650px;
    height: auto;
    background-color: rgba(255, 255, 255, .6);
    padding: 10px;
    border-radius: 5px;
    animation-name: fadein;
    animation-duration: 2s;
    margin-left: auto;
    margin-right: auto;
}

.top-news {
    background-color: rgba(0, 0, 0, 0.2);
    width: 300px;
    margin-top: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 9px;
    border-radius: 5px;
    margin-right: 10px;
}

.onegai-box {
    width: 300px;
    padding: 5px;
    margin-right: 10px;
    background-color: rgba(252, 243, 134, 0.3);
    font-size: 0.84rem;
    border-radius: 5px;
    border: 1px solid red;
}

.red {
    font-weight: bold;
    color: red;
    border-bottom: 1px solid #ff0000;

}

.black {
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #000000;

}



/*NEWの表示ここから*/

.new {
    position: relative;
}


.new::before {
    position: absolute;
    content: "NEW!";
    font-size: 0.6rem;
    top: 0px;
    left: 0;
    background-color: crimson;
    padding: 0px 1px;
    width: 34%;
    height: 35%;
    top: -3px;
    left: -5px;
    background-color: crimson;
    padding: 0px 2px;
    transform: rotate(-20deg);

    /*    いらなければ削除するここから*/
    -webkit-animation: blink 1s ease-in-out infinite alternate;
    -moz-animation: blink 1s ease-in-out infinite alternate;
    animation: blink 1s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    /*    いらなければ削除するここまで*/
}


/*NEW表示ここまで*/

/*ロゴのフェイドインーーーーーーーーーーーーーー*/
@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*ロゴのフェイドインここまでーーーーーーーーーーー*/


.topic-box {
    padding: 2px;
    margin: 10px;
    border: 1px solid #666;
    border-radius: 3px;
    margin-bottom: 5px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.94);
    margin-top: 0px;
}

.mini {
    font-size: 0.8rem;
    text-align: center;
}
.mini_ni {
    font-size: 0.8rem;
}

/*
.mini img {
    width: 210px;
}
*/

.hokan {
    /*    width:280px; */
    /*    font-size: 13px; */
    border: solid 2px rgb(0, 0, 0);
    background-color: white;
    text-align: center;
}

.news-box {
    width: 700px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    /*    margin-top: 150px;*/
    /*    background-color: aqua;*/
}



.news-contents {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: rgba(129, 129, 129, 0.2);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;

}


#oshitate {
    /*    background-color: rgba(129, 129, 129, 0.2);*/
    margin-top: -150px;
    padding-top: 150px;
}

#new {
    margin-top: -150px;
    padding-top: 150px;
}


.how-to-contents {
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(129, 129, 129, 0.2);
    margin-bottom: 20px;
    padding: 15px;
    width: 500px;
    border-radius: 5px;

}

.how-to {
    /*    height: 200px;*/
}

.how-to p {
    width: 300px;
    padding-left: 10px;
}

.nibunnkatu {
    width: 340px;
    height: 500px;
    /*    background-color: aquamarine;*/
    padding: 10px;
}


.denwa {
    width: 100%;
}

.glid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 5px;
    margin-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
}


/*オーバーマウスで拡大ここから（現在未使用）*/
.image_mouseover_1 {
    overflow: visible;
    width: 100%;
    /*    height: 100%;いらないかも*/
}

.image_mouseover_1 img {
    display: block;
    transition-duration: 0.5s;
}

.image_mouseover_1 img:hover {
    transform: scale(1.1, 1.1);
    transition-duration: 0.5s;
}

/*オーバーマウスで拡大ここまで（現在未使用）*/

/*
.yagou {
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255, .6);
    padding: 40px;
    font-size: 4rem;
    font-family: 'Dancing Script', cursive;
    font-weight: bold;
    color: #2929d4;
    border-radius: 50%;
}
*/



.strong {
    font-size: 9rem;
}

.sub-t {
    font-size: 2rem;
    color: #f28e07;
    font-family: inherit;
    text-align: center;
}

#price {
    background-image: url(images/price-bg-w-min.jpg);
    background-size: cover;
    width: 100%;

}

/*お店紹介ここから*/
.tenpo {
    width: auto;
    /*    background-color: rgba(242, 13, 13, 0.81);*/
    padding: 40px 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    /*    border-bottom: 2px solid #123aa8;*/

}

.sikiri-sen {
    border-bottom: 2px solid #123aa8;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/*会社紹介ここから*/
.text {
    width: 700px;
    padding: 20px;

}

.omise {
    padding: 10px;
    width: 400px;
    margin: 5px;
}

.omise iframe {
    width: 100%;
    height: 100%;

}




/*zoomここから*/

.container {
    margin-bottom: 300px;
}

.tytle-text {
    text-align: center;
    padding: 30px;
    background-color: rgba(255, 255, 255, .8);
    padding-top: 50px;
    padding-bottom: 50px;

}

/*下へのスクロールを施すエフェクト*/
/*.scroll {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    margin-bottom: 45px;
    margin-top: 20px;
}

.scroll-announce {
    text-align: center;
    position: relative;
    font-size: 1.5rem;
    color: #1c5aad;
}

.scroll-announce:after {
    font-size: 40px;
    font-weight: bold;
    display: block;
    text-align: center;
    content: "\f103";
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    left: 50%;
    left: calc(50% - 24px);
    bottom: -50px;
    width: 48px;
    animation: scroll-announce 2s ease infinite;
    //background-color: rgba(255,255,255,.5);
    -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
}

@keyframes scroll-announce {
    0% {
        transform: translateY(0)
    }

    70% {
        transform: translateY(-15px)
    }

    100% {
        transform: translateY(0)
    }
}*/

/*下へのスクロールを施すエフェクトここまでーーーーーーーーー*/

/*ページタイトル--------------------------------------------------*/




.rbz {
    font-size: 4rem;
    font-family: 'Dancing Script', cursive;
    color: #1c5aad;
    font-weight: lighter;
}


/*トップページ---------------------------------*/
.word {
    width: 100%;
    font-size: 2rem;
    padding-bottom: 10px;
    text-align: center;
    color: #1c5aad;
    border-bottom: 3px solid #209669;
    margin-bottom: 20px;
}




.mejar {
    float: right;
    margin-top: 0px;
    display: block;
}

.mejar img {
    display: block;
}


.container {
    margin-bottom: 30px;
}


/*電話注文のボタンを変化させるここからーーーーーーーーーー*/

.btn {
    width: 350px;
    height: auto;
    font-size: 15px;
    padding: 5px 5px;
    color: #fff;
    border-radius: 5px;
    display: block;
    position: relative;
    background: rgba(204, 0, 0, 0.8);
    box-shadow: 0 3px 0 0 rgba(111, 2, 19, 0.72);
    /*影の色*/
    border: 3px solid rgba(100, 1, 1, 0.33);
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000,
        -1px 1px 0 #000000, 1px -1px 0 #000000,
        0px 1px 0 #000000, 0-1px 0 #000000,
        -1px 0 0 #000000, 1px 0 0 #000000;
}

.btn:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn 3s ease-in-out infinite;
}

@-webkit-keyframes btn {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


.btn a {
    color: white;

}

/*電話注文のボタンを変化させるここまでーーーーーーーーーー*/


/*OEMのボタンを変化させるここからーーーーーーーーーー*/

.btn-c {
    width: 200px;
    height: auto;
    font-size: 15px;
    background: rgba(91, 8, 162, 0.8);
    opacity: 0.8;
    color: #fff;
    border-radius: 5px;
    padding: 5px 5px;
    height: auto;
    text-align: center;
    display: block;
    position: relative;
    box-shadow: 0 3px 0 0 rgba(63, 5, 105, 0.72);
    /*影の色*/
    border: 3px solid rgba(42, 0, 72, 0.33);
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000,
        -1px 1px 0 #000000, 1px -1px 0 #000000,
        0px 1px 0 #000000, 0-1px 0 #000000,
        -1px 0 0 #000000, 1px 0 0 #000000;
}

.btn-c:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.btn-c::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn 3s ease-in-out infinite;
}

@-webkit-keyframes btn-c {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


.btn-c a {
    color: white;

}

/*OEMのボタンを変化させるここまでーーーーーーーーーー*/


/*メルマガのボタンを変化させる大そのここからーーーーーーーーーー*/

.btn-d {
    display: block;
    position: relative;
    box-shadow: 0 3px 0 0 rgba(0, 17, 41, 0.79);
    /*影の色*/
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
    background: rgba(0, 26, 167);
    opacity: 0.8;
    color: #fff;
    border-radius: 5px;
    padding: 5px 5px;
    text-align: center;
    border: 3px solid rgba(1, 1, 98, 0.33);
    color: white;
    width: 200px;
    max-width: 200px;
    height: auto;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000,
        -1px 1px 0 #000000, 1px -1px 0 #000000,
        0px 1px 0 #000000, 0-1px 0 #000000,
        -1px 0 0 #000000, 1px 0 0 #000000;


}

.btn-d:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.btn-d::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn 3s ease-in-out infinite;
}

@-webkit-keyframes btn-d {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

.btn-d border {
    animation: flash 1s linear infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/*メルマガのボタンを変化させるここまでーーーーーーーーーー*/


.btn-d {
    display: block;
    position: relative;
    box-shadow: 0 3px 0 0 rgba(0, 17, 41, 0.79);
    /*影の色*/
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
    background: rgba(0, 26, 167);
    opacity: 0.8;
    color: #fff;
    border-radius: 5px;
    padding: 5px 5px;
    text-align: center;
    border: 3px solid rgba(1, 1, 98, 0.33);
    color: white;
    width: 400px;
    max-width: 400px;
    height: auto;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000,
        -1px 1px 0 #000000, 1px -1px 0 #000000,
        0px 1px 0 #000000, 0-1px 0 #000000,
        -1px 0 0 #000000, 1px 0 0 #000000;


}

.btn-d:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.btn-d::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn 3s ease-in-out infinite;
}

@-webkit-keyframes btn-d {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

.btn-d border {
    animation: flash 1s linear infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/*メルマガのボタンを変化させるここまでーーーーーーーーーー*/


/*メルマガのボタンを変化させる2ここまでーーーーーーーーーー*/


.btn-e {
    display: block;
    position: relative;
    box-shadow: 0 3px 0 0 rgba(0, 17, 41, 0.79);
    /*影の色*/
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
    background: rgba(0, 26, 167);
    opacity: 0.8;
    color: #fff;
    border-radius: 5px;
    padding: 5px 5px;
    text-align: center;
    border: 3px solid rgba(1, 1, 98, 0.33);
    color: white;
    width: 270px;
    max-width: 270px;
    height: auto;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000,
        -1px 1px 0 #000000, 1px -1px 0 #000000,
        0px 1px 0 #000000, 0-1px 0 #000000,
        -1px 0 0 #000000, 1px 0 0 #000000;


}

.btn-e:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.btn-e::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn 3s ease-in-out infinite;
}

@-webkit-keyframes btn-e {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

.btn-d border {
    animation: flash 1s linear infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/*メルマガのボタンを変化させる2ここまでーーーーーーーーーー*/





/*電話直通のボタンを変化させるここからーーーーーーーーーー*/

.btn-b {
    font-size: 1rem;
    background: rgba(0, 26, 167);
    opacity: 0.8;
    color: #fff;
    border-radius: 5px;
    padding: 5px 5px;
    height: auto;
    width: 300px;
    text-align: center;
    border: 3px solid rgba(1, 1, 98, 0.33);
    color: white;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000,
        -1px 1px 0 #000000, 1px -1px 0 #000000,
        0px 1px 0 #000000, 0-1px 0 #000000,
        -1px 0 0 #000000, 1px 0 0 #000000;
    display: block;
    position: relative;
    box-shadow: 0 3px 0 0 rgba(0, 17, 41, 0.79);
    /*影の色*/
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
}

.btn-b:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.7;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.btn-b::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn 3s ease-in-out infinite;
}

@-webkit-keyframes btn-b {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


.btn-b border {
    animation: flash 1s linear infinite;
}


@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/*電話直通のボタンを変化させる小ここまでーーーーーーーーーー*/


.box {
    padding-top: 150px;
    padding-bottom: 50px;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 5px;
}

.messsage {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

}

.storong {
    font-size: 1.25rem;
    font-weight: bolder;
    color: #1c5aad;
    padding-left: 3px;
    padding-right: 3px;

}


/*枕がフェードイン----------------*/

.box {
    animation-name: fadein;
    animation-duration: 2s;

}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*枕がフェードインここまで----------------*/

.sns {
    margin-top: 10px;
    margin-bottom: 10px;

}

/*shopsここから*/

.menu_naka {
    display: none;
    background-color: rgb(245, 245, 245);
    width: auto;
    height: auto;
    color: blue;
    border-radius: 10px;
    font-size: 0.8rem;

}

/*.menu_naka a:hover {
    color: #0bd;
}*/

.menu_naka li {
    list-style: none;
    color: aqua;
}

.menu_moto:hover .menu_naka {
    display: block;
}

/*.list {
        height: 70px;
        width: 100%;
        border-right-color: aliceblue;
        background-color: rgba(255, 255, 255, 0.44);
        text-align: center;
        padding-bottom: 10px;
        font-size: 1rem;
        margin-left: 20px;

    }*/
/*.list li{
    border-left: 1px solid #999;
    padding: 0 5px;
    text-align: center;
    color: #123aa8;
     list-style: none;
        background-color: antiquewhite;
    text-align: center;
}*/


/*footer.html分*/

.space-a {
    list-style-type: disc;
    margin-left: 20px;
}


.space-b {
    /*    list-style-type:square;*/
    margin-left: 25px;
}


.footer li {
    list-style: none;
    margin-right: 20px;
}

.copyright {
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 470px;
}

table tr {
    border: 1px solid #666;
}

table th {
    background-color: rgba(0, 0, 0, 0.1);
    border-right: 1px solid #666;
}


.table {
    margin: 10px;
    padding: 10px;
}


/*電話注文新ページ向け追加分ここから*/

.how-order {
    list-style: decimal;
}

.syubun {
    background-color: #e1ed4d;
    font-weight: bold;
}

/*アコーディオンメニューここから*/
.menu {
    max-width: 300px;

}

.menu a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #000;
    font-size: 0.8rem;
}

label {
    display: block;
    margin: 0 0 4px 0;
    padding: 2px;
    line-height: 1;
    color: #fff;
    background: green;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
    height: 50px;
    font-size: 1.1rem;
    padding-top: 17px;
}

input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    list-style: none;
}

.menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    height: 54px;
    opacity: 1;
}

/*アコーディオンメニューここまで*/

.menu-bt {
    margin: 0 0 4px 0;
    padding: 5px;
    line-height: 0.8;
    color: #fff;
    background: green;
    cursor: pointer;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 3px;
    height: 50px;
    font-size: 20px;
    padding-top: 17px;
    width: 100px;
}

.nav-bt {
    margin: 0 0 4px 0;
    padding: 5px;
    line-height: 1.2;
    color: #fff;
    background-color: rgba(255, 166, 23, 0.8);
    text-align: center;
    border-radius: 3px;
    height: 50px;
    width: 100px;
}




.menu-bt a {
    /*    padding: 5px;*/
    text-decoration: none;
    color: #fff;
    font-size: 0.9rem;
    margin: 0;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
}


.spad {
    visibility: visible;
    vertical-align: text-top;
    display: inline-block;
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%);
}

.spad-smaho {
    visibility: hidden;
}



.dno-mov {
    display: none;
}

/*電話注文新ページ向け追加分ここまで*/



/*注目させる文字を点滅させるここから*/
.blinking {
    -webkit-animation: blink 1s ease-in-out infinite alternate;
    -moz-animation: blink 1s ease-in-out infinite alternate;
    animation: blink 1s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*注目させる文字を点滅させるここまで*/

/* デザインB（タブレット） */
@media screen and (min-width: 900px) {

    /* .main_logo {
        width: 90%;
        top:22%;
    }

    .main_imgBox {
        height: 2500px;
        top: 0px;
        overflow: hidden;
    }
    
    .main_img {
         height: 1000px;
        top:2%;
    }*/
    /* タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述 */
}



/*モバイル*/
@media (max-width:600px) {

    header {
        height: 150px;
        margin-bottom: 5px;
        width: 100%;
        position: static;
    }

    h1 {
        text-align: center;
    }



    .page-header {
        flex-direction: column;
        align-items: center;
    }

    .main-nav {
        /*display: grid;
        gap: 3px;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
        margin-top: 5px;
        margin-bottom: 5px;*/
        display: none;
    }



    .dno-pc {
        display: none;

    }

    .dno-mov {
        display: block;
    }

    .brog {
        display: none;
    }

    .main-nav li {
        width: 80px;
        font-size: 0.9rem;
        background-color: whitesmoke;
    }

    .menu_naka li a {
        font-size: 0.5rem;
    }

    .id {
        width: 80px;
    }

    .menu_moto:hover .menu_naka {
        width: 70px;
    }

    .active {
        font-size: 1rem;
    }

    .main_logo {

        margin-left: auto;
        margin-right: auto;
        
/*        クーポンあり */
        top: 59%;
/*        クーポンありここまで*/
        
/*        クーポンなし*/
        top: 56.5%;
/*        クーポンなしここまで*/
        
        left: 48.5%;
        width: 95%x;
        height: 1600px;
        padding-left: 30px;

    }

    .logo-t {
        font-size: 0.9rem;
    }

    .main_imgBox_ni {
        background-image: none;



    }

    .main_imgBox_san {
        background-image: none;
    }

    .main_logo-b {
        top: 0;
        left: 0;
        width: 100%;
        height: 800px;
        height: auto;
        padding-left: 5px;
        padding-right: 5px;
/*        background-color: aqua;*/
    }

    .top-news {
        margin-top: 0px;
    }

    .main_logo-c {
        /*        left: 15%;*/
        /*    transform: translate(-25%, -25%);*/
        width: 300px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        top: 500px;
        padding: 3px;
        left: 3%;
        margin-bottom: 5px;
    }

    .main_imgBox {
        height: 2500px;
        top: 0px;

    }


    .main_imgBox_ni {
        height: 2500px;
        top: 0px;

    }

    .main_imgBox_san {
        height: 2500px;
        top: 0px;

    }

    .main_img {
        display: none;
    }



    h3 {
        font-size: 1.2rem;
    }

    .brank {
        height: 280px;
    }

    .t-line {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .article {
        width: 95%;
        padding-bottom: 10px;
        margin-top: 5px;
    }

    .article-c {
        width: 90%;
        padding-bottom: 10px;
    }

    .price-box {
        width: 80%;
        padding: 3px;
    }

    .u-line {
        width: 100%;
    }

    .u-line p {
        margin-left: 30px;
    }

    .center {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0px;
    }



    .sns-box-b {
        width: 80%;
        height: auto;
    }

    .denwa {
        width: 280px;
    }

    .news-box {
        width: 95%;
    }

    .nibunnkatu {
        width: 300px;
        height: auto;

        padding-top: 3px;
    }

    .how-to-contents {
        width: 270px;
    }

    .how-to-contents p {
        width: auto;
    }

    .flex {
        flex-direction: column;
        align-items: center;
    }


    .flex-b {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .flex-b h2 {
        font-size: 1rem;
        padding-top: 6px;

    }

    .sns-box {
        width: 300px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 3px;
        width: auto;

    }

    .sns-box-c {
        width: 350px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 3px;
        width: auto;

    }

    .sns-box-b iframe {
        width: 280px;
        line-height: 330px;
    }

    .btn {
        font-size: 0.8rem;
        padding: 5px;
        height: auto;

    }

    .btn-d {
        font-size: 0.8rem;
        padding: 10px;
        height: auto;

    }

    .btn-c {
        font-size: 0.8rem;
        padding: 10px;
        height: auto;

    }

    .miryoku {
        padding: 30px;
        width: 90%;
        margin-bottom: 30px;
        border-radius: 5px;
    }

    .kita {
        font-size: 1.6rem;
    }

    .news {
        width: 100%;
        font-size: 1.3rem;
        margin-top: 10px;
    }

    .news-bg :before {
        display: none;
    }

    .brank {
        display: none;
    }



    .scroll-announce:after {
        font-size: 30px;
        font-weight: bold;
        bottom: -40px;
    }

    .scroll p {
        font-size: 1.2rem
    }

    .box {
        width: 80%;
    }

    .box_b {
        width: 50%;
        padding: 30px;
        background-color: rgba(255, 255, 255, .7);
    }

    .main-nav li {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mejar {
        width: 90%;
        height: 100%;
    }

    .mejar img {
        height: 100%;
        object-fit: cover;
    }

    .tenpo {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        /*        background-color: aliceblue;*/
    }

    .t-line-b {
        width: 80%;
    }


    .omise {
        padding: 1px;
        /*    margin: 2.5px;*/

    }

    .space {
        display: none;
    }


    /*ハンバーガーメニューここから*/

    .hamburger-menu {
        display: block;
    }


    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 30px;
        width: 30px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: rgba(53, 132, 187, 0.7);
        padding-bottom: 15px;
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 8px;
    }

    .menu-btn span:after {
        top: 8px;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);
        /*メニューオープン時は真ん中の線を透明にする*/
    }

    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }

    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        background-color: rgba(1, 107, 180, 0.69);
    }

    .menu-content ul {
        padding: 70px 10px 0;
    }

    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }

    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 14px;
        box-sizing: border-box;
        color: #ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }

    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        /*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: rgba(53, 132, 187, 0.8);
        transition: all 0.5s;
        /*アニメーション設定*/
    }

    #menu-btn-check:checked ~ .menu-content {
        left: 0;
        /*メニューを画面内へ*/
    }

    /*ハンバーガーメニューここまで*/


    table {

        width: 300px;
    }

    .footer li {
        margin: 3px 2px;
    }

    /*fabricに追加分ここから*/
    .glid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /*トップへ戻るボタン---------------*/


    #page_top {
        width: 90px;
        height: 60px;
        position: fixed;
        right: 0;
        bottom: 0;
        opacity: 0.6;
        border: 3px solid #3f98ef;
        border-radius: 15px;
    }

    #page_top a {
        position: relative;
        display: block;
        width: 90px;
        height: 60px;
        text-decoration: none;
    }

    #page_top a::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f062';
        font-size: 25px;
        color: #3f98ef;
        position: absolute;
        width: 25px;
        height: 25px;
        top: -25px;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
    }

    #page_top a::after {
        content: 'PAGE TOP';
        font-size: 13px;
        color: #3f98ef;
        position: absolute;
        top: 38px;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
    }

    /*トップへ戻るボタンここまで---------------*/

    .spad {
        visibility: hidden;
    }

    .spad-smaho {
        visibility: visible;

    }


    .logo {
/*        visibility: hidden;*/
/*        height: 95%;*/
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        
    }

    .logo-denwa {
        margin-top: 180px;
    }

    /*fabricに追加分ここまで*/
}