@charset "utf-8";


/* common ---------------- */
#contents { margin: 80px auto; }

/* title */
.pageTitle { background: no-repeat center /cover; height: 280px; position: relative; }
.pageTitle .TitleBox { width: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); text-align: center;}
.pageTitle .TitleBox .en { font-size: 0.875em; color: #aa944a; }
.pageTitle .TitleBox .jp { font-size: 2em; color: #fff; font-weight: bold;}
#souda .pageTitle .TitleBox .jp { color: #222; }
#about .pageTitle { background-image: url("../img/about/bg_pageTtl.jpg"); }
#company .pageTitle { background-image: url("../img/company/bg_pageTtl.jpg"); }
#works .pageTitle { background-image: url("../img/works/bg_pageTtl.jpg"); }
#premium .pageTitle { background-image: url("../img/gallery/bg_pageTtl.jpg"); }
#contact .pageTitle { background-image: url("../img/contact/bg_pageTtl.jpg"); }
#blog .pageTitle { background-image: url("../img/blog/bg_pageTtl.jpg"); }
#catalog .pageTitle { background-image: url("../img/works/bg_pageTtl.jpg"); }
#publication .pageTitle {  background-image: url(../img/works/bg_pageTtl.jpg); }
#sitemap .pageTitle { background-image: url("../img/sitemap/bg_pageTtl.jpg"); }
#error .pageTitle { background-image: url("../img/sitemap/bg_pageTtl.jpg"); }
#souda .pageTitle { background: #f8f8f8; }
#collection .pageTitle { background-image: url("../img/works/bg_pageTtl.jpg"); }


.conTtl { text-align: center; margin-bottom: 1em; font-size: 1.625em;font-weight: bold; }
.conTtl span { position: relative; padding-top: 60px; }
.conTtl span::before { content: ""; position: absolute; left: 50%; top: 0;
    transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
    background: url("../img/deco_01.png") no-repeat; width: 34px; height: 54px; }

#contents .ttl { font-size:24px; text-align: center; margin-bottom: .5em; font-weight: bold; background: #aa944a; color: #fff; letter-spacing: 2px; }

#pan {padding: 5px 0; }
#pan ul { max-width: 1000px; margin: 0 auto; }
#pan li { display: inline-block; font-size: 13px; }
#pan li:not(:last-child)::after { content: ">"; padding-left: 15px; padding-right: 10px; }

/* contents ---------------- */

/*方丈堂出版についてabout*/
.message { max-width: 800px; margin: 0 auto 150px; padding: 45px 80px 60px; background: url(../img/bg_washi.png) center /cover; }
.message .conTtl { margin-bottom: 1em; font-size: 1.625em; }
.message .txt { font-size: 1.2em; line-height: 2.1; letter-spacing: 1px; }
.message .name { font-size: 1.6em; padding-left: 1em;
    font-family: ro-nikkatsu-sei-kai-std, serif; font-weight: 400; font-style: normal;}
.about .txtBox { padding: 20px 0 220px; background: url("../img/about/bg_about.png") no-repeat right bottom; }
.about .txtBox>p { margin-bottom: 1em; line-height: 2; }

/*事業紹介works*/
#works #contents > section { margin: 60px auto; }
/*.pagenav_works { padding: 1em 2em; margin-bottom: 30px; }*/
.pagenav_works>li:not(:last-child) { margin-right: 1em; }
.pagenav_works>li a { position: relative; padding:.1em 2em .2em 1em; border: 1px solid #626262; background: #626262; color: #fff; font-size: 0.9375em; }
.pagenav_works>li a::before { content: ""; width: 0; height: 0; position: absolute; right: 12px; top:10px; border-left:5px solid transparent; border-right:5px solid transparent; border-top: 6px solid #fff; }
.pagenav_works>li.premium a::before { transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}

.pagenav_works>li a:hover { background: #fff; color: #626262; transition: .3s; }
.pagenav_works>li a:hover::before { border-top: 6px solid #626262; }

#works .brnarea { margin: 40px auto 0; }

#works #contents { margin: 80px auto 0; }
#works #contents .ttl { background: none; color: #111; }
#works #contents .ttl+p { text-align: center;  margin-bottom:30px;}
#works .button { margin-top: 20px; }

#syuppan {  background: #fdfaf1; padding: 60px 0; }
#syuppan > div>div { margin-bottom: 30px; background: #fff; padding: 30px; }
#syuppan .txtBox { text-align: center; }
#syuppan .txtBox h4 {font-size: 20px; font-weight: bold; background: #aa944a; color: #fff; }


/*#syuppan > div .txtBox h4 span { position: relative; }
#syuppan > div .txtBox h4 span::before,#syuppan > div .txtBox h4 span::after {
    content: ""; position: absolute; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);
    background: url("../img/deco_03.png") no-repeat ; width: 10px; height: 20px; }
#syuppan > div .txtBox h4 span::before { left:-40px; }
#syuppan > div .txtBox h4 span::after { right:-40px; transform: scale(-1,1) translate(0,-50%); -webkit-transform: scale(-1,1) translate(0,-50%); }*/
#syuppan .txtBox h4+p { margin: 1em auto 1.5em; }

#syuppan.imgBox img { width: 100%; }
#syuppan.imgBox .txt { margin: .5em auto 30px; }
#syuppan .imgBox .txt h5 { float: left; width: 30%; margin: 0; font-size: 17px; font-weight: bold;}
#syuppan .imgBox .txt h5+p {width: 68%; margin-right: 0;font-size: 15px; letter-spacing: 1px;}

#repair .button { background:#52aabd; }

#self .flex { background:rgba(255, 255, 255, 0.6); padding: 40px;border: 4px double rgba(170, 148, 74, 0.6);}

.imgnone { width: 100%; height: 250px; background: #eee; }

#self { background: #fdfaf1; padding: 60px 0; margin-bottom: 0!important; }
#self .flex figure { width: 40%; }
#self .txt { width: 50%; text-align: left; margin-top: 40px; line-height: 2; font-size: 17px; }
#self .txt>* {margin-bottom: .5em; }

/*カタログcatalog*/
#catalog .catalogBox { margin-top: 2.5em; padding: 2em; background: #fdfaf1; }
#catalog .catalogTtl { padding: .3em 0 .5em; line-height: 1.4; font-weight: bold; }
#catalog .catalogTtl em { font-size: 1.5em; }
#catalog .category { padding-top: 1em; }
#catalog .category span{ padding: 0.1em 1em 0.2em; background: #aa944a; color: #fff; }
#catalog .txtBox {  width: 100%; }
#catalog .txtBox dl > div > dt {  padding: 1em 1em .5em 1.6em; position: relative; }
#catalog .txtBox dl > div > dd {  padding: 0 1em .3em 1.6em; font-size: .95em; }
#catalog .txtBox dl > div > dt::before {  content: "";  position: absolute;  top: 1.65em;  left: .2em;  width: 9px;  height: 9px;  background: #aa944a;  transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#catalog .txtBox dl > div.conNo { display: -webkit-flex;  display: flex;  -webkit-flex-wrap: wrap;  flex-wrap: wrap; }
#catalog .txtBox dl > div.conNo > dt{ width: 10em; }
#catalog .txtBox dl > div.conNo > dd{ flex: 1; -webkit-box-flex: 1; padding: 1.2em 1em 0 0; }
#catalog .imgBox { z-index: 0; }
#catalog .catalogBox .telBox { margin-top: .5em; padding: 0.8em; text-align: center; line-height: 1.4; background: #d7c487; font-weight: bold; }
#catalog .catalogBox .telBox a span{ letter-spacing: 2px; }
#catalog .priceBox { padding-bottom: .8em; text-align: right; line-height: 1.4; border-bottom: 1px solid #ddd4b7; }
#catalog .priceBox .yen { font-size: 1.15em; }
#catalog .priceBox .small { font-size: .82em; }
#catalog .priceBox .price { font-size: 1.45em; letter-spacing: 1px; }
#catalog .leaflet-container { background: none;}

/*プレミアムギャラリーpremium*/
#premium #pan,#premium #contents { background: #000; }
#premium #contents { margin: 0; padding: 60px 0; overflow: hidden; }
#premium #pan ul,#premium #pan ul a { color: #fff; }

.ttl_premium { margin-bottom: 80px; }
.ttl_premium span { position: relative; display: block; padding: 1.5em 0; }
.ttl_premium span::before,.ttl_premium span::after { content: ""; position: absolute; left: 50%; background: url("../img/gallery/line_gold.jpg"); width: 523px; height: 2px; transform:translate(-50%,0); -webkit-transform:translate(-50%,0);  }
.ttl_premium span::before { top: 0; }
.ttl_premium span::after { bottom: 0; }
.ttl_premium img {  max-height: 71px; }
#premium .online .ttl .en {  color: #fff; }

.galleryList > ul { width: 40%; text-align: center; }
.galleryList > ul+ul { margin-top: 100px; }
.galleryList > ul > li { position: relative; margin-bottom: 140px; z-index: 0; }
.galleryList > ul > li::before { content: ""; position:absolute; bottom: -40px; right: -40%; z-index: -1;
    height: 300px; width: 100%; background:#1b1b1b;  }
.galleryList > ul.lBpx li::before { left: -40%; }
.galleryList .name { color: #fff; font-size: .8em; letter-spacing: 1px; }
.galleryList figcaption.name{margin-bottom: 1em; font-size: 1em; line-height: 1.5;}
.galleryList figcaption.name .small{font-size: .8em;}
.galleryList p.name{width:50%; padding-top: .5em; border-top: 1px solid #aa944a; text-align: left;}

.gallery_info { padding:4em 0; }
.gallery_info_data { width:100%; display:none; }
.gallery_info_data dt { width:25%; font-weight:bold; }
.gallery_info_data dd { flex:1; }
.gallery_info_message { margin:0; padding:1.5em 5px; text-align:center; border-top:1px solid #8e8e8e; border-bottom:1px solid #8e8e8e; }

.gallery_info_tab { margin:0 0 4em; }
.gallery_info_tab > li { width:10em; max-width:30.333%; padding:.2em 1em; text-align:center; cursor:pointer; border:2px solid #aa944a; border-radius:5px; background:#000; color: #aa944a; -webkit-transition:all .3s; transition:all .3s; }
.gallery_info_tab > li + li { margin-left:1.8%; }
.gallery_info_tab > li.active{background-color: #aa944a; color: #000;}
.gallery_info_data.active { display:block; -webkit-animation: fadeIn 1.5s ease 0s 1 normal;  animation: fadeIn 1.5s ease 0s 1 normal; }
@-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}

/*制作事例*/
#souda #contents { margin: 40px auto; }
#souda .leadBox { padding: 0 0 150px; margin-bottom: 80px; background:url("../img/top/osyo.png") no-repeat right bottom 30px; }
#souda .lead_txt { width: 48%; margin-right: auto; margin-left: 0; }
#souda .lead_txt p { margin-bottom: .5em; }
.seisakuList li { width: 24%; text-align: center; }
.seisakuList .time { display: block; font-size: 13px; letter-spacing: 1px;}
.seisakuList .title { margin-top: .5em; padding-top: .3em; line-height: 1.5; font-size: 17px;  border-top: 1px solid #eadeb6; }
.seisakuList li a {  padding: 20px; display: block;background: #f9f9f9; }
.a_line {
  position: relative;
  border: 1px solid #fff;
  text-decoration: none;
  outline: none;
  transition: all .2s;
}
.a_line::before,
.a_line::after {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 1px solid transparent;
}
.a_line:hover::before,
.a_line:hover::after {
  width: 100%;
  height: 100%;
}
.a_line:hover::before {
  border-top-color: #aa944a;
  border-right-color: #aa944a;
  transition: width .3s, height .3s .3s;
}
.a_line:hover::after {
  border-bottom-color: #aa944a;
  border-left-color: #aa944a;
  transition: height .3s, width .3s .3s;
}



/*会社概要company*/
.map { margin: 50px auto; }

/*お問い合わせ*/
#contact .txtBox { margin-bottom: 40px; }
#contact .button::before,#error .button::before { top: 45%; left: 20px!important; right: auto; transform: scale(-1,1); -webkit-transform: scale(-1,1); }
/*お問い合わせフォームボタン*/
#contact input[type="submit"],
#contact input[type="button"]{
    margin: 0;
    position: relative;
    font-size: 16px;
    display: block;
    border: 1px solid rgba(215, 64, 64, 0.95);
    outline: 0;
    cursor: pointer;
    background:rgba(215, 64, 64, 0.95);
    color: #fff;
    font-weight: bold;
    width: 100%;
    padding: .7em 3em .6em 3em;
    transition: 0.3s;
}
#contact input[type="button"]{ background: #fff; color: rgba(215, 64, 64, 0.95); }
#contact .submit{ width: 30%; margin: 40px auto; }
#contact input[type="submit"]:hover{ background:#fff; color: rgba(215, 64, 64, 0.95); }
#contact input[type="button"]:hover{ background:rgba(215, 64, 64, 0.95); color: #fff; }

/*お問い合わせ完了*/
.thanksBox { padding: 30px; background: #fdfaf1; }
.thanksBox>p.txt {text-align: center; }
.thanksBox ul { max-width: 600px; margin: 0 auto;}
.thanksBox .info { padding: 20px; margin: 20px auto 30px; background: #fff; }

/*サイトマップ*/
.sitemapBox .sitemapList { width: 30%; }
.sitemapList > li > a { display: block; margin-bottom: 10px; padding: 0 .5em 10px; border-bottom: 1px solid #aa944a; }
.sitemapBox .sitemapList .nav_works>li { position: relative; padding-left: 1em; }
.sitemapBox .sitemapList .nav_works>li { display: block; }
.sitemapBox .sitemapList .nav_works>li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    height: 1px;
    width: 3px;
    background: #aa944a; }

#error p.center { margin: 20px auto; }

/* Collection */
.col4{ display:grid; grid-template-columns: repeat(4,1fr); gap:2.2em 2.5em; }
.collection-list > li .txt{ margin-top:1.2em; padding-left: .6em; padding-bottom: .8em; font-size:1em; font-weight:normal; line-height:1.5;
  text-box:trim-both cap alphabetic; letter-spacing:.05em; border-left:1px solid #aa944a; border-bottom:1px solid #aa944a; }
.collection-list > li .sub-tx{ display: inline-block; margin-right:.6em; padding: .4em; text-box:trim-both cap alphabetic; font-size:.8em; background: #e7e0c7; }


/* ================================================================
  レスポンシブ
=================================================================== */

/* 999px以下(PC) */
@media screen and (max-width: 999px) {
#contents {  margin: 80px 3%; }
#pan ul { margin: 0 3%; }
}

/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
/* #catalog .priceBox { margin-top: -0.8em; } */
}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  #catalog .txtBox { width:56.6%; }
  #catalog .imgBox { width: 40.1%; }

  /* Collection */
  .col4{ gap:3em 3.5em; }
  #collection #contents.inner{ max-width:1100px; }

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
.pageTitle { height: 200px; }

/*方丈堂出版についてabout*/
.about .txtBox { padding: 0 40px 220px; background-size: 65%; }
/*premiumギャラリー*/
.galleryList p.name{width:75%;}
}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  #premium #contents { padding: 40px 0; }
  .ttl_premium { margin-bottom: 50px; }
  .galleryList > ul { width: 48%; }

  #souda #contents { margin: 40px 3%; }
  #souda .leadBox { background-position: right -60px bottom 30px;}

  #repair { padding:0 3%; }
  #self { margin-bottom: 0!important; }
  #self .txt { width: 100%; text-align: center; margin-top: 0; }
  #self .flex { padding: 20px; }
  #self .flex figure { margin: 0 auto;}

  #catalog .txtBox {  order: 2; padding-top: 2em; }

/*premiumギャラリー*/
  .gallery_info_tab { width:65%; margin:0 auto 4em; }
  .gallery_info_tab > li:nth-child(4){margin-top: 2%;}
  .gallery_info_tab > li:nth-child(5){margin-top: 2%;}
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

#header { background: #fff; }

.pageTitle { height: 180px; }
.pageTitle .TitleBox .jp { font-size: 1.8em; }

#contents .ttl { font-size: 22px; }


#about #contents { margin: 40px 3%; }
.message { margin: 0 auto 110px;padding: 30px 20px; }
.message .conTtl { margin-bottom: .5em; }
.message .txt { margin-bottom: 1em; font-size: 1.15em;}
.about .txtBox { padding: 0 3% 140px; }

#works .inner { padding: 0; }
#works #contents > section { margin: 40px auto; }
.pagenav_works { margin-bottom:0;  padding: 0 3%; background: none; justify-content: space-between; -webkit-justify-content: space-between; }
.pagenav_works>li { width: 48%; margin-bottom: 5px; }
.pagenav_works>li:not(:last-child) { margin-right: 0; }
.pagenav_works>li a { display: block; }
#works .brnarea { margin: 20px auto 0; }
#syuppan  h4 { margin: .5em 0; }
#syuppan .txtBox h4+p { text-align: left; }
#syuppan .imgBox .txt h5 { float: none; width: 100%; }
#syuppan .imgBox .txt h5+p { width: 100%; }
#syuppan .imgBox .txt+p { text-align: center;}

#works #contents { margin: 80px 0 0; }
#works #contents .ttl+p { margin-bottom: 0; text-align: left;}

#repair { padding: 0 3%!important; }

#self .flex>* { width: 100%; }
#self .txt { text-align: left;line-height: 1.5; font-size: 1em; }
#syuppan { padding: 30px 0; }
#syuppan > div>div { margin-bottom: 20px; padding: 10px 15px 20px; }
#self .flex figure { width: 100%; }
#self { padding: 30px 0; }

#catalog .catalogBox { margin-top: 1.5em; padding: 1em; }

/*premiumギャラリー*/
  .gallery_info_tab { width:90%; margin:0 auto 4em; }
  .gallery_info_tab > li:nth-child(4){margin-top: 4%;}
  .gallery_info_tab > li:nth-child(5){margin-top: 4%;}

#premium #contents { padding: 50px 0; }
.ttl_premium span::before, .ttl_premium span::after { width: 100%; max-width: 320px; }
.galleryList > ul { width: 100%; margin-bottom:0; }
.galleryList > ul+ul { margin-top: 0; }
.galleryList > ul > li { margin-bottom: 80px; }
.galleryList > ul.lBpx li:nth-child(2n)::before { left: inherit; right: -40%!important; }
.galleryList > ul+ul li:nth-child(2n)::before { right: inherit; left: -40%!important; }
.galleryList .name { font-size: 1.1em; }
.ttl_premium img { max-height: 60px; }

.galleryList figcaption.name{font-size: 1.1em;}
.galleryList p.name{font-size: 1em;}


/*そうだ*/
#souda .leadBox { padding-bottom: 190px; background-size: 80%; background-position: center bottom; }
#souda .lead_txt { width: 100%; }
.seisakuList li { width: 48%; }

/* お問い合わせ */
#contact .txtBox { text-align: left; }
#contact .submit {width: 80%; margin: 20px auto;}
.thanksBox>p.txt {text-align: left; }


.sitemapBox .sitemapList { width: 100%; }
.sitemapBox .sitemapList .nav_works { margin-bottom: 20px; }

/* Collection */
.col4.sp-col2{ grid-template-columns: repeat(2,1fr); column-gap: 1.5em; }
.collection-list > li .txt{ font-size:.95em; }
.collection-list > li .pic{ width:90%; margin-inline:auto; }

}