/* CSS Document */
html{ height:100%;}
    body {
        background-color:#fff;
        font-family: 'Noto Serif JP' , "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "游明朝", YuMincho, "MSP明朝","MS PMincho","MS 明朝",serif;
        color:#262222;

    }
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom; -webkit-backface-visibility: hidden; image-rendering: -webkit-optimize-contrast;}
.sp{ display:none;}
.wrap{ width:1192px; max-width:100%; margin:0 auto; position:relative; padding-bottom:60px;}
p{ font-size:1em; line-height:1.6em; margin:0 auto;}
a:hover img{ opacity:0.8;}
h1.title{ margin:50px auto 30px; font-size:3.2rem; font-weight:700; line-height:1em; letter-spacing:0.05em;}
h1.title span{ font-size:1.8rem; display:block;}


.header_top{ display:flex; justify-content: space-between; flex-wrap: wrap; margin-top:60px; flex-direction : row-reverse;}
.logo{ width:385px; max-width:80%; tex-align:left;}
.logo h1{ margin:20px 10px 20px 10px;}

ul.sns_icon{ width:130px; margin:20px 10px 0 10px;}
ul.sns_icon li{ display:inline-block; margin-right:10px;}




h1.vertical_title{ display:inline-block; font-size:20px; line-height:1.4em; letter-spacing:0.1em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align:left;  margin:80px auto 30px; font-weight:normal;}
h1.vertical_title span{ font-size:0.8em; text-align:left; display:inline; font-family: 'Alegreya', serif;}
h2.title{font-size:22px; font-weight:400; margin:40px auto 40px;}

.col2{ display:flex; justify-content:center; flex-wrap: wrap; margin:40px 20px;}
p.text{ font-size:14px; line-height:2.2em; margin:10px auto;}
.more_btn{ width:240px; margin:30px auto; font-size:16px; line-height:1.2em; border:1px solid #515050; padding:20px;}

#support,#category,#obsession{ width:1100px; max-width:95%; margin:0 auto;}
#support .col2{ width:980px; margin:40px auto; max-width:100%;}
#support .left_box{ width:calc(100% - 358px); text-align:left;}
#support .left_box p{ width:90%; margin:10px auto;}
#support .right_box{ width:338px;}
#support .right_box img{ margin-bottom:10px;}

#category p{ width:860px; margin:30px auto 60px;}
#category h1{ width:125px; margin:60px auto; font-size:22px; border-bottom:1px solid #333; font-family: 'Alegreya', serif;}
#category .category_list{ background:#E3EFFA; max-width:100%; padding:30px 0; font-family:'Noto Sans JP', "Helvetica Neue",Arial, "ヒラギノ角ゴ ProN W3","Hiragino Sans","Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
#category .category_list ul{width:960px; max-width:90%; margin:0 auto; display:flex; justify-content:center; flex-wrap: wrap; }

#category .category_list ul li{ font-size:14px; width:180px; border:1px solid #7B7773; background:#fff; text-align:center; padding:15px 20px; margin:5px;}
#category .category_list ul li img{ margin-bottom:5px;}



#obsession h2{ display: flex; align-items: center; font-size:22px; line-height:1.4em; margin:100px auto 50px;}
#obsession h2:before,#obsession h2:after{ content:""; height: 1px; flex-grow: 1; background-color: #380F07;}

#obsession h2:before {
    margin-right: 2rem;
}
 
#obsession h2:after {
    margin-left: 2rem;
}
#obsession .sec1 .left_box{ background:#F6F2EF;}
#obsession .sec1 .right_box{ background:#E9DBCB;}
#obsession .box{ width:440px; max-width:90%; padding:25px; text-align:left; margin:5px;}
#obsession .box h3{ margin:20px auto 40px; font-size:24px; line-height:1.4em;}

#obsession .sec2 p{ width:760px; text-align:left; max-width:100%;}
#obsession .sec3 .box{ margin:20px auto; background:#F6F2EF;}
#obsession .sec4 .box{ margin:20px auto; background:#E9DBCB;}
#obsession .sec5 .box{ margin:20px auto; background:#F6F2EF;}

#introduction { padding-bottom:80px;}
#introduction .sec1{ width:860px; margin:80px auto; max-width:100%;}
#introduction .sec1 p.text{ font-size:1.6rem; max-width:90%; margin:30px auto;}
#introduction .sec1 img{ width:100%;}
#introduction .menu_list{ width:800px; max-width:100%; display:flex; justify-content:space-between; flex-wrap: wrap; margin:30px auto;}
#introduction .menu_list img{ width:200px; margin:0 0 30px;}
#introduction .menu_list div{ width:calc(100% - 220px); text-align:left;}
#introduction .menu_list p{ font-size:1.4em; line-height:1.6em;}
#introduction h2 { font-size:2.6em; line-height:1.4em; margin:80px auto 60px;}
#introduction h2 span{ display:block; font-size:1.6rem; line-height:1.4em;}
#introduction h3 { font-size:2.8em; line-height:1.2em; font-family: 'Pinyon Script', cursive; margin:5px 0 10px;}

#introduction .sec3 p{ width:600px; text-align:left; font-size:1.6rem; line-height:1.4em; margin:20px auto 10px; max-width:90%; font-family:'Noto Sans JP', "Helvetica Neue",Arial, "ヒラギノ角ゴ ProN W3","Hiragino Sans","Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;}


#introduction .main_image {
  box-sizing: border-box;
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  background:url(../images/introduction_image1.jpg);
  background-size:cover;
  background-position:center;
  }

#introduction .main_image .text_box {
  width: 660px;
  max-width:90%;
  color:#fff;
  text-shadow: 1px 2px 3px #333; 
}

#introduction .main_image .text_box h1{font-size:3rem;line-height:1.4em; margin-bottom:40px;}
#introduction .main_image .text_box p{ font-size:1.8rem;}













    #baseMenu {
        box-sizing: border-box;
        position: fixed;
        right: 25px;
        top: calc(var(--information-banner-height, 0px) + 5px);
        z-index: 2002;
    }
    #baseMenu > ul > li {
        float: left;
        list-style: none;
    }
    #baseMenu > ul > li.base {
        margin: 0 10px 0 0;
    }
    #baseMenu > ul > li a {
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 0 1px rgba(150, 150, 150, 0.4);
        cursor: pointer;
        display: block;
        -webkit-font-smoothing: antialiased;
        margin: 1px 0 0;
        padding: 5px 15px;
        text-decoration: none;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
    }
    #baseMenu > ul > li a:hover {
        box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.2);
        padding: 6px 15px 4px;
    }

     @media(max-width: 660px) {
	#support .col2{ display:block;}
	#support .left_box{ width:100%;}
	#support .right_box{ width:338px; margin:40px auto;}
.header_top {
  display: block;
} 
ul.sns_icon{margin:20px 10px 0 auto;}
	 }
 
     body.shop .wrapper {
        margin: 0 auto 60px;
        padding: 0 10px;
    }

    @media(min-width: 769px) {
        body.shop .wrapper {
            width: 1100px;
            max-width:100%;
        }
    }
    body.shop #shopHeader nav {
        font-size: 12px;
    }
    body.shop #shopHeader nav {
        margin:0 7px;
    }


    body.shop #shopHeader nav ul li {
        display:inline-block;
        line-height: 22px;
        text-align: center;
        font-family: 'Alegreya', serif;
        font-size:20px;
        font-width:400;
        cursor: pointer;
        margin-bottom:5px;
        
    }
    body.shop #shopHeader nav ul li:hover{color:#C9251F;}
    body.shop #shopHeader nav ul li a:hover{color:#C9251F;}
    body.shop #shopHeader nav ul li span{
        display:block;
        font-family: 'Noto Sans JP', sans-serif;
        font-size:12px;
        font-width:400;
    }

    body.shop #shopHeader nav ul li.itemSearch {
        width: 100%;
        padding: 0 16px;
    }

    body.shop #shopHeader nav ul li.itemSearch form {
        box-sizing: border-box;
        border: none;
        display: inline-block;
        padding: 0 30px 0 0;
        position: relative;
        width: 100%;
        height: 40px;
    }

    body.shop #shopHeader nav ul li.itemSearch form input {
        width: 100%;
        background-color: transparent;
        box-sizing: border-box;
        box-shadow: none;
        border: none;
        display: inline-block;
        margin: auto;
        padding: 0 0 0 8px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 20px;
    }

    body.shop #shopHeader nav ul li.itemSearch form .itemSearch__btn {
        background-color: transparent;
        border-style: none;
        display: block;
        font-size: 15px;
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        width: auto;
        cursor: pointer;
    }

    @media(min-width: 769px) {
        body.shop #shopHeader nav ul li.itemSearch form {
            width: 65px;
        }

            body.shop #shopHeader nav ul {
            flex-wrap: wrap;
            justify-content: space-between;
        }

    }



    body.shop #shopHeader nav ul li a {
        display: block;
        padding: 10px;
    }

    @media(min-width: 470px) {
    body.shop #shopHeader nav ul li {
        font-size:20px;
        padding:0 10px;
    }
    body.shop #shopHeader nav ul li span{
        font-size:12px;
    }
    body.shop #shopHeader nav ul {
        display: flex;
        flex-wrap: wrap;
   justify-content: center;
align-items: start;
        width:100%;
 

    }
    }

    .titleForSearchResult {
        font-size: 14px;
        font-weight: 400;
        margin: -20px auto 0;
        padding: 0 0 30px;
        text-align: center;
        width: 100%;
    }
	
	
	/*グーぐるマップ*/
.gmap {
position: relative;
width:800px;
padding-bottom: 40%;
height: 0;
overflow: hidden;
max-width:100%;
margin:20px auto 0;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



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


}


/*960以下
 */
@media screen and (max-width: 960px){



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




}





/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
#introduction .menu_list{ max-width:90%; display:block; margin:30px auto; text-align:left;}
#introduction .menu_list img{ width:200px; margin:0 0 10px;}
#introduction .menu_list div{ width:100%; margin-bottom:30px;}

}


/*660以下 */
@media screen and (max-width: 670px){
#introduction .main_image {
  width: 100%;
  height: 500px;
  }
#introduction .main_image .text_box h1{font-size:2.4rem;line-height:1.4em; margin-bottom:30px;}
#introduction .main_image .text_box p{ font-size:1.6rem;}

}


/*500以下 */
@media screen and (max-width: 500px){
#obsession .box{max-width:90%; padding:5%; margin:0;}
/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){

}