/* ---------------------- color */
/* メインカラー */
.txt_color1{color: #003F8B}
.bg_color1{background-color: #003F8B}
.border_color1{border-color: #003F8B}
.hvr_txt_color1:hover{color: #003F8B}
.hvr_bg_color1:hover{background-color: #003F8B}
.hvr_border_color1:hover{border-color: #003F8B}

/* サブカラー */
.txt_color2{color: #EEF2FD}
.bg_color2{background-color: #EEF2FD}
.border_color2{border-color: #EEF2FD}
.hvr_txt_color2:hover{color: #EEF2FD}
.hvr_bg_color2:hover{background-color: #EEF2FD}
.hvr_border_color2:hover{border-color: #EEF2FD}

/* アクセントカラー */
.txt_color3{color: #EDADCC}
.bg_color3{background-color: #EDADCC}
.border_color3{border-color: #EDADCC}
.hvr_txt_color3:hover{color: #EDADCC}
.hvr_bg_color3:hover{background-color: #EDADCC}
.hvr_border_color3:hover{border-color: #EDADCC}
/* ---------------------- common */
body {
    font-family: 'Lato',"Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-image: url('Dup/img/paisley.png');
    background-size: 300px;
}
.font_serif{
    font-family: 'Lato',"Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#wrap{
    overflow: hidden;
}
h1 img {
    max-width: 130px;
}
main {
    padding-top: 30px;
}
p::selection,
span::selection,
h2::selection,
h3::selection,
h4::selection,
a::selection,
div::selection,
img::selection,
iframe::selection,
br::selection{
background:#141414;
color: #fff;
}

p::-moz-selection {
background:#141414;
color: #fff;
}
#page-top {
    background-color: #eef2fd;
    padding: 10px 12px;
}
/* --- automatic link --- */
.linkStyle{color: #003F8B}

.linkStyle:hover{
    text-decoration: underline;
}

/* ---------------------- header */
.sc_nav .logo img {
    max-width: 100px;
}
header #header {
    background-color: #fff;
    padding: 40px 50px 30px;
}
.sns_links li img {
    width: 34px;
}
header #header .shop_link a {
    color: #003f8b;
}
/* ---------------------- nav */
.sc_nav li a{
    opacity: 1;
    font-size: 14px;
}
.sc_nav li a,
footer #footer #footer_links li a{
    font-weight: bold;
}
.sc_nav .shop_link a {
    font-family: 'Teko', sans-serif;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 2px;
    background-color: #003f8b;
    opacity: 1;
}
#main_nav li a {
    font-weight: bold;
}
/* ---------------------- footer */
footer{
    background-image: url('Dup/img/footer5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
        color: #fff;
}
#footer_links li a {
    color: #fff;
}

/* -------------------------- top ------------------------- */
#intro{
    position: relative;
}
#intro:before,#intro:after{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}
#intro:before{
    background-image:url('Dup/img/ink3.png');
    height: 300px;
    width: 300px;
    bottom: 5%;
    left: 5%;
}
#intro:after{
    background-image:url('Dup/img/ink2.png');
    height: 300px;
    width: 300px;
    bottom: 5%;
    right: -1%;
}
.intro_title h3{
    font-family: 'Teko', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 70px;
}
#intro .intro_txt h2 {
    background-color: #141414;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
}
.intro_txt span {
    position: relative;
    z-index: 1;
}
#top_contents1 .contents1_txt h3{
    background-color: #141414;
    color: #fff;
    font-weight: bold;
    text-shadow: none;
    padding: 20px;
    line-height: 1.7;
}
.contents2_txt p {
    z-index: 1;
    position: relative;
}
#con2_img1,#con2_img2{
    position: relative;
}

#con2_img1::before, #con2_img2::before{
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
}
#con2_img1::before{
    background-image: url('Dup/img/grunge1.png');
    /*
    height: 652px;
    width: 839px;
    bottom: -41%;
    left: -16%;
    */
    height: 165%;
    width: 132%;
    bottom: -41%;
    left: -13%;
    transform: rotate(333deg);
}
#con2_img2::before{
    background-image: url('Dup/img/grunge2.png');
    /*
    height: 684px;
    width: 800px;
    bottom: -53%;
    right: -17%;
    */
    bottom: -47%;
    right: -23%;
    height: 169%;
    width: 134%;
}
#top_contents2 h3::after{
    display: none;
}
#top_contents2 h3 span {
    background-color: #141414;
    color: #fff;
    padding: 15px 20px;
    font-weight: bold;
}
.top_cms_title{
    position: relative;
}

.top_cms_title::before{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-image:url('Dup/img/ink1.png');
    height: 70px;
    width: 72px;
    top: 5px;
    left: -7px;
    z-index: -1;
    opacity: 0.7;
}
.top_cms_title h4{
    font-weight: bold;
    letter-spacing: 0px;
}
.top_cms_title h4:first-letter{
    font-size: 150%;
    margin-right: 4px;
}
.top_cms_title p {
    font-family: 'Teko', sans-serif;
    font-weight: bold;
    border-top: 3px solid #EDADCC;
}
/* --- more --- */
#top_cms .top_cms_box .more a {
    border: 2px solid #141414;
}
#top_cms .top_cms_box .more a span{
    font-family: 'Teko', sans-serif;
    font-weight: bold;
}
/* -------------------------- sub ------------------------- */
#page_title h2{
    font-weight: bold;
}
#page_title p{
    font-family: 'Teko', sans-serif;
    font-weight: bold;
}
.cate_title {
    font-weight: bold;
}
/* ---------------------- cms1 */
#cms_1-a .box_txt1{
    opacity: 1;
}
#cms_1-a .date,
.pager li a {
    font-family: 'Teko', sans-serif;
    font-weight: bold;
    font-size: 18px;
}
#cms_1-a .cate_box,
.cms_1-a .cate_box {
    border-color: #edadcc;
}

/* ---------------------- cms3 */
#cms_3-c .box_txt1 {
    padding: 10px 20px;
}
.buy_btn{
    background-color: #003F8B;
    color: #fff;
    transition: all 0.3s;
    position: relative;
    padding: 10px 20px;
    font-size: 20px;
    margin: 30px auto;
    display: block;
    width: 160px;
    text-align: center;
}
.buy_btn:hover{
    transform: translateY(-3px);
}
.fa-hand-point-right {
    margin-left: 5px;
}
.cms_3-c .box_img1 {
    margin: 50px auto;
    max-width: 400px;
}
#cms_3-c .box_title1,
.cms_3-c .box_title1{
    font-weight: bold;
}
#cms_3-c .box_img1 {
    max-width: 400px;
    text-align: center;
    box-shadow: none;
}

#cms_3-c .item_contents{
    align-items: flex-start;
}

/* ---------------------- info */
#page07 .box h3, 
#page07 .box p {
    border-color: #ccc;
}

/* ---------------------- sitemap */
#page10 ul li a .title2 {
    font-family: 'Teko', sans-serif;
        font-size: 16px;
}


@media screen and (max-width: 1367px){
header #header {
    padding: 30px;
}
main {
    padding-top: 0;
}
}
/* ----------------------------------------------------------------------------------------------------------------------------
IE
--------------------------------------------------------- */
@media all and (-ms-high-contrast: none){

/* ---------------------- header */
.sc_nav .shop_link a {
    padding-top: 12px!important;
    padding-bottom: 8px!important;
}

/* -------------------------- top ------------------------- */
.top_cms_title::before {
    top: 0px!important;
}

/* ---------------------- cms3 */
.buy_btn {
    padding: 10px 20px 12px!important;
}

}

/* ---------------------------------------------------------------------------------------------------------------------------- 
タブレット　
--------------------------------------------------------- */
@media screen and (max-width: 768px){
/* ---------------------- common */
 .linkStyle{
    text-decoration: underline;
}
main {
    padding-top: 0;
}
 /* ---------------------- header */

/* ---------------------- nav */
#menu_bt {
    top: 38px;
}
/* ---------------------- footer */



/* -------------------------- top ------------------------- */
#intro .intro_img {
    margin-bottom: 100px;
}
.shop_link a {
    border: 2px solid #003f8b;
    color: #003f8b;
    font-family: 'Teko', sans-serif;
    font-weight: bold;
    font-size: 20px;
}
#intro:before {
    height: 250px;
    width: 170px;
    bottom: -3%;
    left: 3%;
}
#intro:after {
    height: 247px;
    width: 218px;
    bottom: 18%;
}
.top_cms_title {
    padding-left: 30px;
}
.top_cms_title::before {
    left: 0px;
}
/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms3 */
#cms_3-c .box_title1 {
    width: 100%!important;
    border: none;
}
#cms_3-c .box_title2 {
    width: 100%!important;
}
/* ---------------------- sitemap */
#page10 ul li a .title1 {
    font-size: 15px;
    font-weight: bold;
}
#page10 ul li a .title2 {
    font-size: 15px;
}
 
}

/* ----------------------------------------------------------------------------------------------------------------------------
スマホ　
--------------------------------------------------------- */
@media screen and (max-width: 667px){
/* ---------------------- common */
    
/* ---------------------- header */
h1 img {
    width: 30%!important;
}
/* ---------------------- nav */

/* ---------------------- footer */
footer #footer #map iframe {
    height: 450px;
}


/* -------------------------- top ------------------------- */
#intro:before {
    height: 147px;
    width: 93px;
    bottom: -9%;
    left: 2%;
}
#intro:after {
    height: 212px;
    width: 152px;
    bottom: 26%;
    right: -11%;
}
#intro .intro_txt h2 {
    font-size: 15px;
    width: 90%!important;
    position: relative;
    z-index: 1;
}
#top_contents1 .contents1_txt h3 {
    font-size: 15px;
}
#top_contents2 h3 span {
    font-size: 15px;
}
.top_cms_title::before {
    height: 60px;
    width: 62px;
    top: 7px;
    left: 5px;
}
#con2_img1::before {
    height: 172%;
    width: 141%;
    bottom: -33%;
    left: -13%;
}
#con2_img2::before {
    bottom: -48%;
    right: -23%;
    height: 174%;
    width: 134%;
}
/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */
#cms_4-b .cate_box {
    width: 90%!important;
}
/* ---------------------- privacy policy */

/* ---------------------- sitemap */



#page10 ul li a:hover span.on{
    display: none;
}
}

/* 211222 fix */
.sc_nav .logo img {
    max-width: 40px;
}
#loader .logo {
    max-width: 100px;
}

.intro_img {
    position: relative;
}
.slick-list {
    background-color: #141414;
}
.intro_img:before{
    content:'';
    position:absolute;
    left: 0;
    top: 22%;
    width: 100%;
    height: 75px;
    background-image: url(./Dup/img/intro1.png);
    background-size: auto 100%;
    background-position-y: 0;
    background-repeat: repeat-x;
    animation: loop1 9s linear infinite;
    z-index: 0;
}

.intro_img:after{
    content:'';
    position:absolute;
    left: 0;
    top: 30%;
    width: 100%;
    height: 99px;
    background-image: url(./Dup/img/intro2.png);
    background-size: auto 100%;
    background-repeat: repeat-x;
    animation: loop2 10s linear infinite;
    z-index: -1;
}
@keyframes loop1 {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -633px;
    }
}
@keyframes loop2 {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -836px;
    }
}
#intro .slick {
    margin: auto;
}
#intro .intro_title {
    display: none;
}
.intro_txt{
    position: relative;
}
.intro_txt:before,.intro_txt:after{
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}
.intro_txt:before{
    background-image:url('Dup/img/ink3.png');
    height: 300px;
    width: 300px;
    bottom: 5%;
    left: -14%;
}
.intro_txt:after{
    background-image:url('Dup/img/ink2.png');
    height: 300px;
    width: 300px;
    bottom: 5%;
    right: -20%;
}
#intro:before,#intro:after{
    display: none;
}

@media screen and (max-width: 1367px){
header #header h1 {
    width: 30%!important;
}
}
@media screen and (max-width: 1280px){

}
@media screen and (max-width: 768px){
    .intro_img:before {
        top: -20px;
        height: 50px;
        animation: loop1 11s linear infinite;
        z-index: 1;
    }
    .intro_img:after {
        top: auto;
        bottom: 20px;
        height: 66px;
        animation: loop2 13s linear infinite;
    opacity: 0.7;
    }
    @keyframes loop1 {
        0% {
            background-position-x: 0;
        }
        100% {
            background-position-x: -422px;
        }
    }
    @keyframes loop2 {
        0% {
            background-position-x: 0;
        }
        100% {
            background-position-x: 560px;
        }
    }
    .intro_txt:before {
        height: 250px;
        width: 170px;
        bottom: -3%;
        left: -16%;
    }
    .intro_txt:after {
        height: 247px;
        width: 218px;
        bottom: 40%;
        right: -22%;
    }
}
@media screen and (max-width: 667px){
    header #header {
        padding: 15px;
    }
    #intro .intro_img {
        margin-bottom: 100px;
        margin-top: 100px;
    }
    .intro_img:before {
        animation: loop1 13s linear infinite;
    }
    .intro_img:after {
        animation: loop2 15s linear infinite;
    }
    .intro_txt:before {
        height: 147px;
        width: 93px;
        bottom: -9%;
        left: -2%;
    }
    .intro_txt:after {
        height: 124px;
    width: 152px;
    bottom: -17%;
    right: -11%;
    }
}

/* 0113 fix */
#loader .logo {
    max-width: 200px;
}
h1 img {
    max-width: 180px;
}
.sc_nav .logo img {
    max-width: 100px;
}
@media screen and (max-width: 1367px){
header #header h1 {
    width: 80%!important;
}
}