@charset "UTF-8";

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }

body{
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-style: normal;
font-weight: 400;
color: #a00002;
}
div,table,tr,td,input{box-sizing: border-box;}
li{list-style-type: none;}
img{ border:0;vertical-align: middle; }
.clear{ clear:both; }
.clearL{ clear:left; }

br.pconly{display: block;}
br.sponly{display: none;}

.st_br{fill:#A00002;}
.st_footer{fill:#E20000;}

 a{
 color: #a00002;
 text-decoration: underline;
 transition: all 0.3s;
 }
 a:hover{
 opacity: 0.6;
 text-decoration: none;
 }
 

/*/////////MENU///////////*/

#menu_wrap{
display: none;
z-index: 100;
width: 100%;
min-height: 100vh;
background: #A00002;
color: #fff;
position: absolute;
padding: 50px 0;
box-sizing: border-box;
}
#menu_wrap .menu_logo{
width: 250px;
margin: auto;
}
.menu_menu_wrap{
padding-top: 30px;
}
.menu_menu {
}
.menu_menu li{
font-size: 120%;
text-align: center;
line-height: 1;
padding-bottom: 1.5em;
}
#menu_wrap a{
font-size: 110%;
text-decoration: none;
color: #0072f6;
}
#menu_wrap a:hover{
text-decoration: none;
color: #00a0e9;
opacity: 0.7;
}
.menu_tel{
font-size: 120%;
text-align: center;
color: #fff;
margin-bottom: 0.5em;
}
.menu_tel img{
width: 1.25em;
vertical-align: middle;
padding-bottom: 3px;
}
#menu_wrap .menu_tel a{
display: block;
color: #fff;
text-decoration: none;
}
.menu_contact{
font-size: 100%;
background:  #0072f6;
text-align: center;
color: #fff;
width: 240px;
margin: auto;
height: 30px;
line-height: 30px;
border-radius: 15px;
margin-bottom: 1.5em;
}
#menu_wrap .menu_contact a{
display: block;
color: #fff;
text-decoration: none;
border-radius: 15px;
}
#menu_wrap .menu_contact a:hover{
background: #00a8ff;
}
.menu_sns{
width: 30px;
margin: auto;
margin-top: 2em;
margin-bottom: 1.5em;
text-align: center;
}




/*/////////HAMBURGER///////////*/

#hamburger {
display: none;
position: absolute;

width: 45px;
height: 45px;
border: none;
right:12px;
top: 21px;
cursor: pointer;
z-index: 2;
}
.burger-btn{
display: block;
width: 45px;
height:24px;
position: absolute;
border: none;
left: 0;
top: 11px;
cursor: pointer;
}
.burger-btn .bar{
width: 40px;
height: 2px;
border-radius: 1px;
display: block;
position: absolute;
left: 0;
background-color: #e9a4a4;
}
.burger-btn .bar_top{
top:0;
}
.burger-btn .bar_mid{
top: 46%;
}
.burger-btn .bar_bottom{
bottom: 0;
}

.burger-close{
display: block;
width: 45px;
height: 45px;
position: fixed;
border: none;
right: 6px;
top: 10px;
cursor: pointer;
z-index: 50;
}
.burger-close .bar{
width: 40px;
height: 2px;  
display: block;
position: absolute;
left: 40%;
background-color: #e9a4a4;
}    
.burger-close .bar_top{
top: 15px;
transform: translate(-50%,10px) rotate(45deg);
}
.burger-close .bar_bottom{
bottom: 10px;
transform: translate(-50%,-8px) rotate(-45deg);
}



/*////HEADER/////*/

#page_header{
position: relative;
background: #a00002;
padding: 20px 0 0 30px;
}
#page_header a:hover{
opacity: 1;
}
.head_logo{
width: 260px;
position: relative;
margin-right: 30px;
}
.head_menu{
width: 840px;
position: absolute;
right: 40px;
top: 20px;
}
.head_menu ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.head_menu ul li{
width: 18%;
overflow: hidden;
position: relative;
}
.head_menu a{
display: block;
}
#page_header_btm svg{
vertical-align: top;
}
@media screen and (max-width:1200px){

.head_logo{
width: 21.6%;
}
.head_menu{
width: 66.66%;
}
}
@media screen and (max-width:800px){

#page_header {
    padding: 20px 0 0 0;
}
.head_logo{
width: 250px;
margin-right: 0;
margin: auto;
padding-bottom: 10px;
}
.head_menu{
display: none;
}
#hamburger {
display: block;
}
}


/*////FOOTER/////*/
#footer{
position: relative;
}
#footer_top svg{
vertical-align: bottom;
}
#footer_wrap{
position: relative;
text-align: center;
color: #fff;
background: linear-gradient(to bottom,  #e20000 1%,#e36b00 67%,#e36b00 67%);
padding: 0 0 2em 0;
}
.footer_logo{
width: 300px;
margin: auto;
margin-bottom: 1.5em;
}
#footer_wrap a{
color: #fff;
text-decoration: none;
}
#footer ul{
width: 90%;
max-width: 700px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 120%;
font-weight: 600;
margin-bottom: 1.5em;
}

.foot_icon1 {
position: absolute;
    width: 80px;
    left: 6%;
    top: 0;
}
.foot_icon2 {
position: absolute;
    width: 80px;
    left: 15%;
    top:-20px;
}
.foot_icon3 {
position: absolute;
    width: 80px;
    right: 20%;
    top: -30px;
}
.foot_icon4 {
position: absolute;
width: 100px;
right: 2%;
top: 0;
}

@media screen and (max-width:800px){
.foot_icon1 { width: 65px;}
.foot_icon2 {display: none;}
.foot_icon3 {display: none;}
.foot_icon4 { width: 80px;}
.footer_logo{
width: 250px;
margin: auto;
margin-bottom: 1.5em;
padding-top: 10px;
}
}


/*////COMMON/////*/

#page_contets{
width: 90%;
max-width: 1200px;
margin: auto;
padding: 40px 0;
}
#page_contets h2{
font-size: 240%;
line-height: 1.4;
text-align: center;
padding: 0 0 1em 0;
}
#page_contets h3{
font-size: 150%;
line-height: 1.4;
}

p.contact{
text-align: center;
font-size: 130%;
}

@media screen and (max-width:800px){
#page_contets{
padding: 10px 0 40px;
}
#page_contets h2{
font-size: 180%;
}
}
@media screen and (max-width:640px){
br.pconly{
display: none;
}
}


/*////ABOUT/////*/

.page_main{
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page_pic{
width: 55%;
}
.page_pic img {
  mask-image: url("../img/book/book_mask.svg");
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../img/book/book_mask.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100%;
}
.page_txt{
width: 42%;
}
.page_txt h3{
letter-spacing: -0.02em;
line-height: 1.5;
padding: 0 0 0.5em 0;
}
.about_info{
width: 90%;
max-width: 1200px;
margin: 2em auto;
}
.about_info ul{
width: 100%;
border-top: solid 1px #a00002;
}
.about_info li{
width: 100%;
border-bottom: solid 1px #a00002;
padding: 0.5em 20%;
color: #000;
}
.about_story{
width: 100%;
max-width: 1000px;
margin: auto;
padding: 3em 0;
position: relative;
text-align: center;
color: #fff;
background: url("../img/book/book_history_bg.gif");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.about_story h3{
padding-bottom: 1.0em;
}
.story{
width: 60%;
max-width: 600px;
margin: auto;
text-align: left;
}
.about_story p{
padding-bottom: 1.5em;
}
.about_story_pic1{
position: absolute;
width: 200px;
left: -70px;
top: 20%;
z-index: 2;
border-radius: 100%;
overflow: hidden;
}
.about_story_pic2{
position: absolute;
width: 200px;
right: -40px;
bottom: 20%;
z-index: 2;
border-radius: 100%;
overflow: hidden;
}
#page_contets h3.access{
font-size: 180%;
text-align: center;
padding: 1.0em 0;
}
.access_map{
width:100%;
max-width: 900px;
margin: 0 auto 40px;
position: relative;
border-radius: 10%;
overflow: hidden;
}



/*////GALLERY/////*/

.gallery_topic{
width: 100%;
max-width: 900px;
margin: auto;
padding-bottom: 2em;
}
.gallery_txt{
display: inline-block;
vertical-align: top;
width: 60%;
text-align: left;
font-weight: 600;
font-size: 95%;
line-height: 1.6;
position: relative;
}
.gallery_pic{
display: inline-block;
vertical-align: top;
width: 38%;
padding-right: 15px;
}
h3.gallery_sp{
display: none;
}
.gallery_txt h3{
padding-bottom: 0.5em;
}
.gallery_txt p{
padding-bottom: 0.8em;
}
.gallery_info{
width: 90%;
max-width: 1200px;
margin: 2em auto;
text-align: center;
}
.gallery_info h3{
text-align: center;
padding-bottom: 0.25em;
}
.gallery_info h4{
font-size: 120%;
}
.gallery_info ul{
width: 100%;
border-top: solid 1px #a00002;
}
.gallery_info li{
text-align: center;
width: 100%;
border-bottom: solid 1px #a00002;
padding: 0.5em 0;
color: #000;
}
.gallery_sample{
text-align: center;
width: 100%;
max-width: 900px;
margin: 80px auto;
}
.gallery_sample h4{
font-size: 120%;
padding-bottom: 0.75em;
}
.event_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 30px;
}
.event_box{
width: 32%;
font-size: 90%;
font-weight: bold;
}
.event_box .event_pic{
border-radius: 15px;
overflow: hidden;
}


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

h3.gallery_sp{
display: block;
text-align: center;
padding-bottom: 0.25em;
}
.gallery_txt{
display: block;
vertical-align: top;
width: 100%;
text-align: left;
font-weight: 600;
font-size: 90%;
line-height: 1.6;
position: relative;
margin: auto;
}
.gallery_txt p{
padding-bottom: 0.5em;
}
.gallery_pic{
display: block;
vertical-align: top;
width: 80%;
max-width: 398px;
padding-right: 0;
margin: auto;
}
.gallery_txt h3{
display: none;
}

.event_wrap{
display: block;
padding-bottom: 30px;
}
.event_box{
width: 100%;
font-size: 95%;
font-weight: bold;
margin: auto;
padding-bottom: 25px;
}
.event_pic{
width: 80%;
margin: auto;
padding-bottom: 0;
}
}

@media screen and (max-width:520px){
.gallery_sample p{
text-align: left;
}
.gallery_sample p br{
display: none;
}
p.contact{
text-align: left;
}
}


/*////CAFE/////*/
.cafe_kakomi{
width: 95%;
max-width:440px;
margin: auto;
text-align: left;
padding: 12px 20px;
border: #CBCBCB 3px solid;
border-radius: 3px;
margin-bottom: 2em;
}
.cafe_menu{
width: 95%;
max-width: 370px;
margin: auto;
text-align: left;
}
h3.cafe{
text-align: center;
margin-top: 2em;
padding-bottom: 0.5em;
font-size: 160%;
}
.cafe_main{
margin: 0 auto 20px;
width: 90%;
max-width: 650px;
}
p.cafe_note{
text-align: center;
font-size: 90%;
}
.cafe_kakomi p.cafe_note{
text-align: left;
font-size: 90%;
line-height: 1.4;
padding-top: 1em;
padding-bottom: 0;
color: #838282;
}
.cafe_kakomi p.cafe_note a{
text-decoration: underline;
color: #838282;
}
.cafe_kakomi p.cafe_note a:hover{
opacity: 0.7;
}
p.cafe_exp{
text-align: center;
}




/*////MITAMURA/////*/

.book_menu{
display: flex;
flex-wrap: wrap;
width: 90%;
max-width: 900px;
margin: auto;
}
.book_cover{
text-align: center;
width: 30%;
margin: 1.5%;
font-size: 90%;
}
.biz_menu{
width: 90%;
max-width: 600px;
margin: 10px auto;
text-align: center;
}
.biz_menu ul{
width: 100%;
border-top: solid 1px #e3e3e3;
}
.biz_menu li{
text-align: center;
width: 100%;
border-bottom: solid 1px #e3e3e3;
padding: 0.5em 0;
color: #a00002;
}
.biz_menu li a{
text-decoration: underline;
color: #a00002;
}
.biz_menu li a:hover{
opacity: 0.7;
}



@media screen and (max-width:600px){
.book_cover{
text-align: center;
width: 47%;
margin: 1.5%;
}

}



/*////BLOG LIST/////*/

.blog_wrap h3{
color: #fff;
text-align: center;
font-size: 200%;
padding-bottom: 0.5em;
}
.blog_wrap .linkbtn {
width: 200px;
position: absolute;
right: 0;
top: 10px;
}

.blog_wrap{
width: 95%;
max-width: 900px;
margin: auto;
}
.blog_wrap h5{
font-size: 120%;
}
.blog_box{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: dashed 2px #EBDAAC;
display: grid;
grid-template-columns: 220px 1fr;
}
.blog_box a{
transition: all 0.3s;
}
.blog_box a:hover{
opacity: 0.7;
}
.blog_thumb{
position: relative;
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
z-index: 0;
}
.blog_title{
}



/*////BLOG SINGLE/////*/

#single_wrap{
width: 90%;
max-width: 900px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 0 60px;
}
.single_article{
width: 68%;
text-align: left;
font-size: 100%;
}
.single_article p{
padding-bottom: 1.5em;
}
.single_header{
padding-bottom: 20px;
}
.single_side{
width: 28%;
}
.single_side h4{
padding-bottom: 20px;
}
.side_thread{
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: dashed 2px #EBDAAC;
}
.side_thread h5{
font-size: 100%;
font-weight: normal;
}
.side_thread p.blog_date{
font-size: 85%;
padding-bottom: 0;
}
.single_side .linkbtn{
width: 180px;
padding-top: 20px;
}
.single_navi_bottom{
margin-top: 3em;
margin-bottom: 3em;
color: #676363;
background: #f4f1ec;
border-radius: 8px;
padding: 10px;
}
.single_navi_bottom a{
color: #676363;
}
.nav_prev{
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: dashed 2px #EBDAAC;
}


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

.page_pic{
width: 100%;
margin-bottom: 1.5em;
}
.page_txt{
width: 100%;
}
.about_info li{
padding: 0.5em 0;
}
.story{
width: 80%;
}
.about_story_pic1{
display: none;
}
.about_story_pic2{
display: none;
}
.about_story{
padding: 3em 5%;
}
}
@media screen and (max-width:670px){

.single_article{
width: 100%;
}
.single_side{
width: 100%;
}
}

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

.about_story{
width: 100%;
max-width: 1000px;
margin: auto;
padding: 2em 20px;
position: relative;
text-align: left;
color: #fff;
background: none;
border-radius: 30px;
background: #A00002;
}
.story{
width: 100%;
}
}

@media screen and (max-width:500px){
.blog_box{
display: block;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: dashed 2px #EBDAAC;
}
.blog_thumb{
position: relative;
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
z-index: 0;
margin: auto;
}
.blog_title{
width: 100%;
}
}