@charset "utf-8";

@import url("reset.css");
@import url("base.css");

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700&display=swap');


/* __________________________________________________
   common
__________________________________________________ */

/*
font-family: 'Zen Old Mincho', serif;
*/

html { overflow-y: scroll; _overflow: auto; font-size: 62.5%;}/**1rem=10px**/
body { background: url(../images/share/bg.jpg) 50% 50%; overflow-x: hidden; position: relative; font-family: "Zen Old Mincho", sans-serif; font-weight: 500; font-style: normal; font-display: swap; letter-spacing: .4em; font-feature-settings: "palt"; color: #000; font-size: 1.6rem; padding: 0; margin: 0;}

html, body { width: 100%; min-height: 100%; position: relative;}

a { color: #000;}
a:hover { color: #424242;}
a[href^="tel:"]{ display: inline-block; pointer-events: none;}

@media screen and (max-width: 768px) {
body {font-size: 1.5rem;}
a[href^="tel:"] { pointer-events: auto; text-decoration: underline; color: #000;}
}

@media screen and (max-width: 580px) {
a[href^="tel:"] { pointer-events: auto; text-decoration: underline; color: #000;}
}


/* fadein -----------------------------------------*/
.fadein { opacity: 0; transform: translateY(100px); transition : all 1s;}
.fadein.active { opacity: 1; transform: translateY(0);}

@keyframes fade-in {
from {opacity:0;}
to {opacity: 1;}
}


/* =================================================
    フェードインアニメーションの指定
================================================= */
.scrollanime { opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeInDown {
0% { opacity: 0;}
100% { opacity: 1; transform: translate(0);}
}

.updown {transform: translateY(-80px);}
.downup {transform: translateY(80px);}

.sect02 {overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right { transform: translateX(80px);}
.slide-left { transform: translateX(-80px);}

/* __________________________________________________
   header
__________________________________________________ */
header { width: 100%; height: 400px; background: #efefef; position: relative;}
header .inner { display: flex; max-width: 1366px; height: 100%; padding: 0; margin: 0 auto;}
header .headerMain { padding: 30px 40px; background: rgba(0, 0, 0, 0.4);}
header .catchcopy { display: block; font-size: 1.1rem; color: #fff; letter-spacing: 0;}
header img.logoWhite  { width: 350px; height: 56px; margin: 0 0 10px;}
header nav.gN_pc ul { list-style: none;}
header nav.gN_pc li { display: block; font-weight: 700; margin: 0 0 15px;}
header nav.gN_pc a { color: #fff; text-decoration: none; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);}
header nav.gN_pc a span { position: relative; z-index: 1;}
header nav.gN_pc a span:after{ content: ""; width: 0%; height: 3px; background: #fff; position: absolute; left: 0; bottom: -8px; z-index: -1; transition: all 0.4s;}
header nav.gN_pc a:hover span:after{ width: 100%;}
.menuTrigger { display: none;}
.menuBg { display: none;}

@media screen and (max-width: 768px){
header { width: 100%; height: 300px;}
header .inner { display: flex; justify-content: flex-end; padding: 0; margin: 0 auto; z-index: 100;}
header .headerMain { display: flex; justify-content: space-between; width: 100%; background: rgba(0, 0, 0, 0.5); writing-mode: horizontal-tb; padding: 10px 30px 0 30px}
header img.logoWhite  { width: 180px; height: 29px; margin: 0 10px 0 0;}
header nav.gN_pc ul { display: none;}
.menuTrigger span { font-size: 1rem;}

.gNav { display: flex; justify-content: center; width: 100%; height: 90px; background: rgba(255, 255, 255, 0.5); position: fixed; top: 0; left: 0; z-index: 3;}
.gNav .inner { display: flex; align-items: center; width: 1080px; height: 100%; margin: 0 auto; padding: 0;}
.gNav .inner a.logo { width: 460px; height: 63px;flex-grow: 1;}
.gNav .inner a.logo img { width: 460px; height: 63px;}
.gNav .inner a.logo:hover img { opacity: .7; transition: .3s;}
.menuTrigger { display: flex; width: 50px; height: 50px; align-items: center; flex-direction: column; cursor: pointer; transition: .2s;}
.gNav .inner #contact:hover, .menuTrigger:hover { opacity: .6; transition: .3s;}
.menuIcon { width: 50px; height: 40px; margin: 5px 0 0; position: relative;}
.menuIcon > div { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; transition: .3s;}
.menuIcon > div:nth-of-type(1) { top: 0;}
.menuIcon > div:nth-of-type(2) { top: 11px;}
.menuIcon > div:nth-of-type(3) { top: 22px;}

.menuBg { width: 100vw; height: 100vh; overflow-y: scroll; background: url(../images//share/bg.jpg) repeat-y; padding: 0; position: absolute; top: 0; left: 0; z-index: 200;}
.menuArea { max-width: 1080px; padding: 30px 15px 0; margin: 0 auto; position: relative;}
.menuTrigger.open { width: 50px; height: 50px; position: absolute; top: 40px; right: 20px;}
.menuTrigger.open .menuIcon { content: ""; display: block; width: 50px; height: 50px; margin: 5px 0;}
.menuTrigger.open .menuIcon > div { background: #000;}
.menuTrigger.open .menuIcon > div:nth-of-type(1) { top: 20px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg); transition: .3s;}
.menuTrigger.open .menuIcon > div:nth-of-type(2) { top: 20px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg); transition: .3s;}
.menuTrigger span { font-size: 1.2rem; color: #fff; letter-spacing: .1em;}
.menuTrigger.open span { display: none;}

.menuArea nav { width: 100%; padding: 50px 0 0;}
.menuArea nav ul { display: block; width: 100%; margin: 0 auto 50px; padding: 0 30px; list-style: none;}
.menuArea nav ul li { line-height: 1.4; margin-bottom: 25px;}
.menuArea nav ul li a { color: #000; transition: .2s; text-decoration: none;}
.menuArea nav ul li a:hover { padding-left: 10px; transition: .3s;}
.menuArea nav ul li dl dt { margin: 10px 0 15px;}
.menuArea nav ul li dl dd > ul { margin-bottom: 10px;}
.menuArea .sub { font-size: 80%;}
.menuBg { display: none;}
.fixed { position: fixed;}
}

@media screen and (max-width: 500px){
header { width: 100%; height: 200px;}
header .catchcopy { font-size: .8rem;}
header .headerMain { padding: 5px 15px}
.menuTrigger {width: 30px;}
.menuIcon { width: 30px;}
.menuTrigger span { font-size: .7rem;}
}

/* __________________________________________________
   footer
__________________________________________________ */
footer { width: 100%; padding: 50px 0 0; background: #000;}

footer .inner { max-width: 1080px; padding: 0; margin: 0 auto; color: #fff;}

footer .footerCont { display: flex; justify-content: space-between; width: 100%; padding: 0 0 30px 0;}

footer ul.textLink { list-style: none;}
footer ul.textLink li { padding: 0 0 1em 0;}
footer ul.textLink li.sub { font-size: 80%;}
footer ul.textLink li a { color: #fff; text-decoration: none;}
footer ul.textLink li a span { position: relative; z-index: 1;}
footer ul.textLink li a span:after{ content: ""; width: 0%; height: 1px; background: #fff; position: absolute; left: 0; bottom: -8px; z-index: -1; transition: all 0.4s;}
footer ul.textLink li a:hover span:after{ width: 100%;}

footer .bottomArea {}
footer .bottomArea p { font-size: 1.2rem; letter-spacing: 0; padding: 0 0 0 .5em;}
footer .bottomArea img { width: 250px; height: 40px; margin: 0 0 5px;}
footer .bottomArea address { font-style: normal; line-height: 2em; letter-spacing: .1em; padding:0; margin: 0 0 10px;}
footer .bottomArea address a { color: #fff; text-decoration: none;}
footer .bottomArea address span {
text-orientation: upright;
-webkit-text-orientation: upright;}
footer .bottomArea .googlemap img { width: 96px; height: 17px; margin: 0 0 15px;}
footer .bottomArea .icon_Instagram img { width: 30px; height: 30px; margin: 0;}
footer .copyright { display: block; width: 100%; text-align: center; font-size: .9rem; color: #fff; letter-spacing: .1em; padding-bottom: 10px;}

@media screen and (max-width: 1100px){
footer .inner { max-width: 100%; padding: 0 30px;}
}

@media screen and (max-width: 768px){
footer .inner { max-width: 100%; padding: 0 30px;}
footer .footerCont { flex-direction: column;}
footer .bottomArea { writing-mode: horizontal-tb;}
footer .bottomArea p { font-size: 1.1rem; padding: 0 0 .5em 0;}
footer .bottomArea .googlemap { display: none;}
footer ul.textLink { margin-bottom: 40px;}
footer ul.textLink li { display: inline-block; letter-spacing: .1em; padding: 0 1em 0 1em; margin-bottom: 2em; border-left: 3px solid #fff;}
footer .bottomArea img { width: 200px; height: 32px;}
footer .bottomArea address { line-height: 1.8em; padding: 10px 0 0 30px; letter-spacing: .1em;}
}

/*
Go to top
*/
a.bt_pageTop {display: block; width: 70px; height: 70px; background: url(../images/share/gototop.svg); background-size: 100%; position: fixed; right: 30px; bottom: -50px; z-index: 100;overflow: hidden; opacity: 0; transition: 1s; text-indent: -9876em;}
a.bt_pageTop.fixed { display: block; position: fixed; right: 30px; bottom: 30px; opacity: 1; transition: 1s;}


/* __________________________________________________
   main
__________________________________________________ */
main { display: block; width: 100%; padding: 0 0 50px;}

main section.breadcrumbArea { width: 100%; background: rgba(255, 255, 255, 0.5); font-family: sans-serif; font-weight: 500; font-style: normal; letter-spacing: .1em; margin-bottom: 20px; padding: 10px 0;}
main section.breadcrumbArea .inner { max-width: 1080px; padding: 0 0; margin: 0 auto;}
main .breadcrumb { margin: 0; padding: 0; list-style: none;}
main .breadcrumb li { display: inline; list-style: none; font-size: 1.2rem; color: #000; font-weight: 500}
main .breadcrumb li:after { content: '/'; padding: 0 0.5em;}
main .breadcrumb li:last-child:after { content: '';}
main .breadcrumb li a { color: #000; font-weight: 700;}
main .breadcrumb li a:hover { text-decoration: none;}

main .inner { display: flex; flex-direction: column; max-width: 1080px; padding: 40px 30px; margin: 0 auto;}
main .contents { padding: 0; margin: 0; position: relative;}
main h1 { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 500; margin: 0 0 30px;}

@media screen and (max-width: 1081px){
main  section.breadcrumbArea .inner { max-width: 100%; padding: 0 30px;}
main .inner { display: flex; max-width: 100%; padding: 40px 30px}
}


@media screen and (max-width: 768px){
main .breadcrumb li { font-size: 1rem;}
}

@media screen and (max-width: 600px){
main .inner { flex-direction: column; padding: 10px 20px 40px 20px;}
main  section.breadcrumbArea .inner { padding: 0 15px;}
main .contents { width: 100%;}
main h1 { width: 100%; font-size: 2.4rem; margin-bottom: 30px;}
main .inner p {letter-spacing: .1em;}
}

/* __________________________________________________
  pagination
__________________________________________________ */
.pagenavi > .wp-pagenavi { display: flex; align-items: center; justify-content: center;}
.pagenavi > .wp-pagenavi a,
.pagenavi > .wp-pagenavi span.current { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 50px; padding: 0; margin: 5px; line-height: 0; letter-spacing: 0;}

.pagenavi > .wp-pagenavi span.current { color: #fff; font-weight: 500; background: #877358; border: 1px solid #877358;}




/* __________________________________________________
   sitepolicy
__________________________________________________ */
.sitepolicy header { background: url(../images/sitepolicy/pageImg.jpg) center center no-repeat; background-size: cover;}

/* __________________________________________________
   privacypolicy
__________________________________________________ */
.privacypolicy header { background: url(../images/privacypolicy/pageImg.jpg) center center no-repeat; background-size: cover;}


/* __________________________________________________
   other
__________________________________________________ */
.other h1 { text-align: center; font-weight: 500; font-size: 4rem; margin: 30px 0;}

@media screen and (max-width: 910px){
.other h1 { font-size: 3rem;}
}

@media screen and (max-width: 650px){
.other h1 { font-size: 2.6rem;}
.other dl > dd { letter-spacing: .1em;}
}

.other dl { display: block; margin-bottom: 50px; letter-spacing: .2em;}
.other dl > dt { width: 100%; font-size: 1.8rem; font-weight: 700; border-bottom: 1px solid #ccc; margin-bottom: 8px; padding-bottom: 7px;}
.other dl > dd { width: 100%; display: block; line-height: 2em;}
.other dl > dd p { text-align: justify; padding-bottom: 1em;}
.other dl > dd ul { margin: 10px 0 30px 0; list-style: none;}
.other dl > dd ul li { display: flex; margin: 0 0 15px 30px; line-height: 1.4em;}
.other dl > dd ul li:before { content: "■"; display: block; color: #877358;}
.other .signature { font-size: 1.4rem; text-align: right;}





/* __________________________________________________
   news
__________________________________________________ */
.news header { background: url(../images/news/pageImg.jpg) center center no-repeat; background-size: cover;}

.news .contents .headarea { list-style: none;}
.news .contents .headline { border-bottom: 1px solid #666;}
.news .contents .headline a { width: 100%; display: flex; align-items: center; text-decoration: none; padding: 30px 0;}
.news .contents .headline a:hover { background: rgba(0, 0, 0, 0.1); transition: .2s;}
.news .contents .headline:first-of-type { border-top: 1px solid #666;}
.news .contents .date { width: 20%; text-align: center; font-size: 1.2rem; letter-spacing: .2em;}
.news .contents .title { width: 80%; font-size: 1.8rem; font-weight: 500;}

.news.single .contents .headline { width: 100%; display: flex; align-items: center; padding: 30px 0; margin-bottom: 30px;}
.news.single .contents p { margin-bottom: 1em;line-height: 2em;}
.news.single .contents ul { margin: 10px 0 30px 0; list-style: none;}
.news.single .contents li { display: flex; margin: 0 0 15px 30px; line-height: 1.4em;}
.news.single .contents li:before { content: "■"; display: block; color: #877358;}

@media screen and (max-width: 768px){
.news .contents .headline a,
.news.single .contents .headline { flex-direction: column;}
.news .contents .date { width: 100%; text-align: left;}
.news .contents .title { width: 100%; font-size: 1.6rem; font-weight: 700; letter-spacing: .2em;}
.news.single .contents p { line-height: 2em; letter-spacing: .2em;}
}

/* __________________________________________________
   work
__________________________________________________ */
.works header { background: url(../images/works/pageImg.jpg) center center no-repeat; background-size: cover;}

.works main p { line-height: 2em; padding-bottom: 2.5em; letter-spacing: .2em;}
.works main img { width: 100%;}
.works .bannerArea { display: flex; flex-wrap: wrap; list-style: none; margin: 40px 0;}
.works .bannerArea li { width: 30%; background: rgba(255, 255, 255, 0.8); border: 1px solid #cacaca; margin: 0 1.5% 2%;}
.works .bannerArea li:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); transition: .2s;}
.works .bannerArea li:hover img { filter: grayscale(100%)}
.works .bannerArea a { display: block; text-decoration: none;}
.works .bannerArea .title { width: 100%; padding: 30px 20px 20px 20px;}
.works .bannerArea .title span { font-size: 1.4rem; display: block; letter-spacing: .1em;}
.works .bannerArea .title h2 { font-size: 1.7rem; font-weight: 500; letter-spacing: .2em;}
.works .bannerArea strong { display: block; padding: 0 20px 20px; font-size: 1.2rem; text-align: right; letter-spacing: .2em; font-weight: 500;}

@media screen and (max-width: 1030px){
.works .bannerArea .title span { font-size: 1.2rem;}
.works .bannerArea .title h2 { font-size: 1.6rem;}
}

@media screen and (max-width: 875px){
.works .bannerArea li { width: 45%; margin: 0 2.5% 5%;}
.works .bannerArea .title { width: 100%; padding: 20px 15px 15px 15px;}
}

@media screen and (max-width: 580px){
.works main p { line-height: 2em; padding-bottom: 1.5em; letter-spacing: .1em;}
.works .bannerArea { margin: 40px 20px;}
.works .bannerArea li { width: 100%; margin: 0 0 10%;}
.works .bannerArea .title span { font-size: 1.4rem;}
.works .bannerArea .title h2 { font-size: 2rem;}
}

.works.worksDetail .titleArea { width: 100%; height: 350px; color: #fff; position: relative; margin-bottom: 20px;}
.works.worksDetail .title { display: flex; align-items: center; justify-content: flex-end; width: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 20px; position: absolute; left: 0; bottom: 80px;}
.works.worksDetail .title span { font-size: 1.8rem; margin-right: 10px;}
.works.worksDetail .title h2 { font-size: 2.4rem; font-weight: 500;}
.works.worksDetail figure { margin-bottom: 30px;}
.works.worksDetail figure img { width: 100%;}
.works.worksDetail figure figcaption { text-align: right; font-size: 1.2rem; letter-spacing: .2em;}
.works.worksDetail figure.mainImg { display: block; width: 80%; margin: 10px auto 40px;}
.works.worksDetail .cont { display: flex; justify-content: space-between;}
.works.worksDetail .sentence { width: 65%;}
.works.worksDetail .imgArea,
.works.worksDetail .imgArea01 { width: 32%;}
.works.worksDetail .cont:nth-child(odd) .sentence { order: 2;}
.works.worksDetail .cont:nth-child(odd) .imgArea,
.works.worksDetail .cont:nth-child(odd) .imgArea01 { order: 1;}
.works.worksDetail .galleryArea { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}
.works.worksDetail .galleryArea figure { width: 47%; margin: 0 0 5%;}

@media screen and (max-width: 768px){
.works.worksDetail .titleArea {height: 250px;}
.works.worksDetail figure.mainImg {width: 100%;}
.works.worksDetail .cont { flex-direction: column;}
.works.worksDetail .sentence { width: 100%;}
.works.worksDetail .imgArea { display: flex; justify-content: space-between; width: 100%;}
.works.worksDetail .imgArea figure { display: block; width: 47%;}
.works.worksDetail .imgArea01 { display: flex; justify-content: center; width: 100%;}
.works.worksDetail .imgArea01 figure { display: block; width: 80%;}
.works.worksDetail .cont:nth-child(odd) .sentence { order: 1;}
.works.worksDetail .cont:nth-child(odd) .imgArea,
.works.worksDetail .cont:nth-child(odd) .imgArea01 { order: 2;}
}

@media screen and (max-width: 580px){
.works.worksDetail .titleArea { height: 200px; padding: 10px}
.works.worksDetail .title { justify-content: center; position: absolute; left: 0; bottom: 40px;}
.works.worksDetail .title span { font-size: 1.2rem; letter-spacing: .05em;}
.works.worksDetail .title h2 { font-size: 2rem; letter-spacing: .05em;}
.works.worksDetail figure.mainImg { margin: 10px auto 20px;}
.works.worksDetail figure figcaption { text-align: center; font-size: 1.2rem;}
.works.worksDetail .galleryArea { flex-wrap: wrap; flex-direction: column;}
.works.worksDetail .galleryArea figure { width: 100%;}

}

.works.worksDetail .works01 { background: url(../images/works/01/bg_title.jpg) no-repeat;}
.works.worksDetail .works02 { background: url(../images/works/02/bg_title.jpg) no-repeat;}
.works.worksDetail .works03 { background: url(../images/works/03/bg_title.jpg) no-repeat;}


/* __________________________________________________
   company
__________________________________________________ */
.company header { background: url(../images/company/pageImg.jpg) center center no-repeat; background-size: cover;}

.company .pageAnchor { display: flex; flex-wrap: wrap; list-style: none; margin: 0;}
.company .pageAnchor li { background: rgba(255, 255, 255, 0.7); border: 1px solid #666; margin: 0 20px 30px 0;}
.company .pageAnchor li a { display: flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1em; padding: 5px 20px 10px 20px;}
.company .pageAnchor li:hover { background: rgba(255, 255, 255, 0); transition: .2s;}

.company #greeting .titleArea { width: 100%; height: 250px; background: url(../images/company/bg_title.jpg); color: #fff; position: relative; margin-bottom: 20px;}
.company #greeting .titleArea h2 { width: 100%; font-size: 2.4rem; font-weight: 500; text-align: right; /*border-top: 1px solid #fff; border-bottom: 1px solid #fff;*/ padding: 20px; position: absolute; left: 0; bottom: 80px;}
.company #greeting p { font-size: 110%; line-height: 2em; padding-bottom: 2em; letter-spacing: .2em;}

.company #info h3 { font-size: 100%; margin-bottom: 30px; letter-spacing: .2em;}

.company main h2.title { width: 100%; font-size: 2.4rem; font-weight: 500; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 30px 20px; margin: 60px 0 20px;}
.company main p { font-size: 100%; line-height: 2em; padding-bottom: 2em; letter-spacing: .2em;}

.company .table { width: 80%; border: 1px solid #666; margin: 0 auto;}
.company .table dl { display: flex; letter-spacing: .2em;}
.company .table dl:nth-child(even) { background: rgba(255, 255, 255, 0.4);}
.company .table dt { width: 30%; border-right: 1px solid #666; padding: 20px;}
.company .table dd { width: 70%; padding: 20px; line-height: 1.8em;}
.company .table dd span { font-size: 80%; padding-right: 10px;}

.company .googlemap { width: 100%; height: 600px;}
.company .googlemap iframe { width: 100%; height: 100%;}

@media screen and (max-width: 990px){
.company .table dd span { display: block; padding-right: 0;}
}

@media screen and (max-width: 850px){
.company .table { width: 100%;}
}

@media screen and (max-width: 600px){
.company main p { letter-spacing: .1em;}
.company #greeting .titleArea { height: 200px;}
.company #greeting .titleArea h2 { position: absolute; left: 0; bottom: 40px;}
.company .table { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; border-bottom: none;}
.company .table dl { display: flex; flex-direction: column; border-bottom: 1px solid #666;}
.company .table dl:nth-child(even) { background: rgba(255, 255, 255, 0.4);}
.company .table dt { width: 100%; border-right: none; border-bottom: 1px solid #bbb;}
.company .table dd { width: 100%;}
.company .googlemap { height: 400px;}
}

@media screen and (max-width: 580px){
.company .pageAnchor { width: 80%; margin: 0 auto;}
.company .pageAnchor li { width: 100%; margin: 0 0 30px 0;}
.company .pageAnchor li a { padding: 15px 20px 20px 20px;}
}

/* __________________________________________________
   contact
__________________________________________________ */
.contact header { background: url(../images/contact/pageImg.jpg) center center no-repeat; background-size: cover;}
.contact main .contents { margin: 0;}
.contact .tel,
.contact .fax,
.contact .mail
{ margin: 0 0 60px;}
.contact h2 { display: flex; align-items: center; justify-content: center; width: 100%; font-size: 2.4rem; font-weight: 500; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 20px 15px 0; margin: 0 0 20px;}
.contact h2:before { content: ""; width: 40px; height: 40px; margin-right: 5px;}
.contact h2 br { display: none;}
.contact .tel h2:before { background: url(../images/contact/icon_tel.svg); background-size: cover;}
.contact .fax h2:before { background: url(../images/contact/icon_fax.svg); background-size: cover;}
.contact .mail h2:before { background: url(../images/contact/icon_mail.svg); background-size: cover;}

@media screen and (max-width: 700px){
.contact h2 { font-size: 2rem;}
}

@media screen and (max-width: 580px){
.contact h2 { font-size: 1.8rem; letter-spacing: .2em;}
.contact h2:before { width: 30px; height: 30px;}
.contact h2 br { display: block;}
}

.contact p { padding-bottom: 1em;}

.contact .number { display: flex; justify-content: center; align-items: baseline; font-size: 3.6rem; font-weight: 700; text-decoration: none;}
.contact .number a { text-decoration: none; pointer-events: none;}
.contact .number span { font-size: 1.8rem; font-weight: 500; letter-spacing: .1em;}

.contact .tel .number { margin: 40px 0 80px;}
.contact .fax .number { margin: 20px 0 40px;}

.contact .fax .btArea { display: flex; align-items: center; justify-content: space-around;}
.contact .fax a.bt { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 20px; position: relative;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
}
.contact .fax a.bt:after { content: ""; display: block; width: 35px; height: 35px; background: url(../images/share/icon_pdf.svg) 0 100% no-repeat; position: absolute; right: 10px; top: 5px; z-index: 1;}
.contact .fax a.bt:hover { background-position: 0 0;}

.contact .mail ul { display: block; width: 80%; list-style: none; margin: 30px auto;}
.contact .mail li { margin-bottom: 30px;}
.contact .mail dl { display: flex; align-items: center; justify-content: space-between;}
.contact .mail dt { display: flex; width: 40%; font-weight: 500; letter-spacing: .2em;}
.contact .mail dt span { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-size: 70%; padding: 5px; letter-spacing: .2em; margin-left: 5px;}
.contact .mail dd { width: 55%;}

.contact .mail .selectbox { display: inline-flex; align-items: center; position: relative;}
.contact .mail .selectbox:after { content: ""; width: 10px; height: 7px; background-color: #202020; position: absolute; right: 15px; clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none;}
.contact .mail .selectbox select,
.contact .mail input,
.contact .mail textarea { width: 100%; height: 2.8em; color: #000; background-color: #fff; border: 1px solid #666; padding: .4em calc(.8em + 30px) .4em .8em; appearance: none; cursor: pointer;}
.contact .mail textarea { height: 6em;}
.contact .mail .selectbox select:focus,
.contact .mail input:focus,
.contact .mail textarea:focus { outline: none;}
.contact .mail .btArea { display: flex; align-items: center; justify-content: space-around;}
.contact .mail .btArea input { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 20px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  transition: background-position ease 0.4s;
}
.contact .mail .btArea .checkBt {
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
}
.contact .mail .btArea .resetBt {
background-image: linear-gradient(
  to right,
  #877358 0%,
  #877358 50%,
  #000 50%,
  #000 100%
);
}
.contact .mail .btArea input:hover { background-position: 0 0;}

@media screen and (max-width: 580px){
.contact .mail dl { flex-direction: column;}
.contact .mail dt { width: 100%; letter-spacing: .1em; margin-bottom: 10px;}
.contact .mail dd { width: 100%;}
.contact .fax .btArea,
.contact .mail .btArea { flex-direction: column;}
.contact .fax .btArea input,
.contact .mail .btArea input { margin: 10px auto 10px;}
}

/* __________________________________________________
   catalog
__________________________________________________ */
.catalog header { background: url(../images/catalog/pageImg.jpg) center center no-repeat; background-size: cover;}
.catalog h2 {width: 100%; font-size: 2.4rem; font-weight: 500; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 20px; margin: 0 0 20px;}

@media screen and (max-width: 580px){
.catalog h2 { font-size: 2rem;}
}

.catalog .searchArea { width: 100%; background: rgba(255, 255, 255, 0.7); padding: 50px 40px; margin-bottom: 60px;}
.catalog .searchArea h2 { text-align: center; margin: 0 0 20px;}
.catalog .searchArea ul { display: block; width: 70%; list-style: none; margin: 30px auto;}
.catalog .searchArea li { margin-bottom: 30px;}
.catalog .searchArea dl { display: flex; align-items: center; justify-content: space-between;}
.catalog .searchArea dt { width: 30%; font-weight: 500;}
.catalog .searchArea dd { width: 65%;}

.catalog .searchArea .selectbox { display: inline-flex; align-items: center; position: relative;}
.catalog .searchArea .selectbox:after { content: ""; width: 10px; height: 7px; background-color: #202020; position: absolute; right: 15px; clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none;}
.catalog .searchArea .selectbox select { width: 100%; height: 2.8em; color: #000; background-color: #fff; border: 1px solid #666; padding: .4em calc(.8em + 30px) .4em .8em; appearance: none; cursor: pointer;}
.catalog .searchArea .selectbox select:focus { outline: none;}
.catalog .searchArea .freeWord { display: block; border: 1px solid #666; overflow: hidden;}
.catalog .searchArea .freeWord input { width: 100%; height: 2.8em; border: none; padding: 5px 15px; outline: none;}
.catalog .searchArea .radio { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 2em; border: none;}
.catalog .searchArea .radio label { display: flex; line-height: .9em; gap: 0 .5em; margin-bottom: 10px; position: relative; cursor: pointer;}
.catalog .searchArea .radio label:before,
.catalog .searchArea .radio label:after { content: ""; border-radius: 50%;}
.catalog .searchArea .radio label:before { width: 20px; height: 20px; border: 1px solid #666;}
.catalog .searchArea .radio label:after { width: 10px; height: 10px; background-color: #dee5eb; position: absolute; top: 50%; left: 10px; transform: translate(-50%, -50%);}
.catalog .searchArea .radio label:has(:checked)::after { background-color: #877358; animation: anim-radio .3s linear;}
@keyframes anim-radio {
   0% {
       box-shadow: 0 0 0 1px transparent;
   }
   50% {
       box-shadow: 0 0 0 10px rgba(135, 115, 88, 0.2);
   }
   100% {
       box-shadow: 0 0 0 10px transparent;
   }
}
.catalog .searchArea .radio input { display: none; line-height: 1em;}
.catalog .searchArea input.feas-submit-button { display: block; width: 250px; background: #000; text-align: center; color: #fff; margin: 0 auto; padding: 5px 10px 10px; transition: .2s;}
.catalog .searchArea input.feas-submit-button:hover {  background: #877358;}

@media screen and (max-width: 800px){
.catalog .searchArea ul { width: 100%;}
}

@media screen and (max-width: 580px){
.catalog .searchArea { padding: 30px;}
.catalog .searchArea dl { flex-direction: column;}
.catalog .searchArea dt { width: 100%; margin-bottom: 10px;}
.catalog .searchArea dd { width: 100%;}
.catalog .searchArea .radio label { letter-spacing: .2em;}
}

.catalog .categoryList ul { display: flex; flex-wrap: wrap; list-style: none;}
.catalog .categoryList li { width: 30%; margin: 0 1.666% 3%;}
.catalog .categoryList li a { display: flex; align-items: center; width: 100%; background: rgba(0, 0, 0, .7); color: #fff; text-decoration: none; transition: .2s;}
.catalog .categoryList li a:hover { background: rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);}
.catalog .categoryList li a div:first-of-type { width: 80%; padding: 0px 10px 0px; letter-spacing: .1em;}
.catalog .categoryList li a div:last-of-type { display: flex; flex-direction: column; align-items: center; width: 20%; background: rgba(255, 255, 255, 0.2); letter-spacing: 0; padding: 5px;}
.catalog .categoryList li a div:last-of-type span { font-family: "kozuka-gothic-pro", sans-serif; font-weight: 500; font-style: normal; padding: 3px 0 0;}
.catalog .categoryList li a div:last-of-type span:first-of-type { padding-bottom: 3px; font-size: 1.2rem;}
.catalog .categoryList li a div:last-of-type span:last-of-type { font-size: 1.4rem; letter-spacing: .1em;}

@media screen and (max-width: 1020px){
.catalog .categoryList li a div:first-of-type { width: 75%;}
.catalog .categoryList li a div:last-of-type { width: 25%;}
}

@media screen and (max-width: 900px){
.catalog .categoryList li { margin: 0 1.5% 5%;}
.catalog .categoryList li a { flex-direction: column;}
.catalog .categoryList li a div:first-of-type { width: 100%;}
.catalog .categoryList li a div:last-of-type { width: 100%;}
.catalog .categoryList li a div:last-of-type { flex-direction: row; justify-content: flex-end;}
.catalog .categoryList li a div:last-of-type span:first-of-type { padding-right: 10px;}
}

@media screen and (max-width: 650px){
.catalog .categoryList li { width: 45%; margin: 0 2.5% 5%;}
}

.catalog .productList ul { display: flex; flex-wrap: wrap; list-style: none;}
.catalog .productList li { width: 30%; margin: 0 1.666% 3%;}
.catalog .productList li a { display: block; width: 100%; color: #fff; text-decoration: none; transition: .2s;}
.catalog .productList li a:hover { box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); opacity: .8;;}
.catalog .productList li div { background: #666; text-align: center; padding: 5px 10px 10px;}

@media screen and (max-width: 800px){
.catalog .productList li div { font-size: 1.3rem; letter-spacing: .1em;}
}

@media screen and (max-width: 580px){
.catalog .productList li div { font-size: 1.1rem; letter-spacing: .1em;}
}


.catalog .detail .title { display: flex; align-items: center; width: 100%; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 20px; margin: 0 0 20px;}
.catalog .detail .title span { font-size: 1.4rem; white-space: nowrap; letter-spacing: .2em;}
.catalog .detail .title span:after { content: "/"; font-size: 1.4rem; padding: 0 10px;}
.catalog .detail .title h2 { border: none; font-size: 2.4rem; font-weight: 500; margin: 0; padding: 0 0 8px;}
.catalog .detail figure.mainImg { display: block; width: 100%; margin: 10px auto 40px;}
.catalog .detail figure.mainImg img {max-width: 905px; margin: 0 auto;}
.catalog .detail figure figcaption { text-align: right; font-size: 1rem; letter-spacing: .2em;}
.catalog .detail a.bt { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 60px; position: relative;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
}
.catalog .detail a.bt:before,
.catalog .detail a.bt:after { content: ""; height: 1px; background: #fff; position: absolute; top: 50%; right: 22px;}
.catalog .detail a.bt:before { width: 15px; transform: translateY(-50%);}
.catalog .detail a.bt:after { width: 8px; transform: translateY(-50%) rotate(45deg); transform-origin: right center;}
.catalog .detail a.bt:hover { background-position: 0 0;}

.catalog .detail .table { border-top: 1px solid #666; margin: 0 auto 40px;}
.catalog .detail .table dl { display: flex; letter-spacing: .2em;}
.catalog .detail .table dl:nth-child(even) { background: rgba(255, 255, 255, 0.5);}
.catalog .detail .table dl:last-of-type { border-bottom: 1px solid #666;}
.catalog .detail .table dt,
.catalog .detail .table dd { display: flex; align-items: center; border-right: 1px solid #666; padding: 10px; letter-spacing: .1em;}
.catalog .detail .table dt { border-left: 1px solid #666;}
.catalog .detail .table p { display: block; font-size: .6em; text-align: right; letter-spacing: .2em;}

/* 3列　商品ID　商品名　価格 */
.catalog .detail .column_3 dt { width: 25%;}
.catalog .detail .column_3 dd.productName { width: 50%;}
.catalog .detail .column_3 dd.price { width: 25%; text-align: right;}

/* 4列　商品ID　商品名 商品サイズ等　価格 */
.catalog .detail .column_4 dt { width: 25%;}
.catalog .detail .column_4 dd.productName { width: 25%;}
.catalog .detail .column_4 dd.productDetail{ width: 25%; font-size: 80%;}
.catalog .detail .column_4 dd.price { width: 25%; text-align: right;}

@media screen and (max-width: 680px){
.catalog .detail .table dl { display: flex; flex-direction: column; border-bottom: none; border-left: 1px solid #666; border-right: 1px solid #666;}
.catalog .detail .table dl:nth-child(even) { background: rgba(255, 255, 255, 0.6);}
.catalog .detail .table dt { width: 100%; border-left: none; border-right: none; border-bottom: 1px solid #bbb;}
.catalog .detail .table dd.productName,
.catalog .detail .table dd.productDetail { width: 100%; border-right: none; border-bottom: 1px solid #bbb;}
.catalog .detail .table dd.price { width: 100%; border-right: none; border-bottom:  1px solid #666;}
.catalog .detail .table dl:last-of-type { border-bottom: none;}
}

.catalog .detail .comment { width: 100%; background: #fff; border: 1px solid #666; border-radius: 10px; padding: 15px; margin-bottom: 50px;}
.catalog .detail .comment dt { font-size: 70%; margin-bottom: 15px;}
.catalog .detail .comment dd p {letter-spacing:.2em;line-height:1.8em;padding-bottom:.8em;}
.catalog .detail .comment pre { overflow-x: scroll; font-size: 80%; }
.catalog .detail .comment pre br { display: none; }

.catalog .detail .gallery { display: flex; flex-wrap: wrap; margin-bottom: 40px;}
.catalog .detail .gallery a { width: 30%; margin: 0 1.5% 3%;}
.catalog .detail p.note { display: block; letter-spacing: .2em; font-size: 90%; margin-bottom: 15px;}

@media screen and (max-width: 580px){
.catalog .detail .gallery a { width: 45%; margin: 0 2.5% 5%;}
.catalog .detail .comment pre { overflow-x: scroll;}
}

.catalog .detail .btArea { display: flex; justify-content: space-around;}

@media screen and (max-width: 870px){
.catalog .detail .btArea { flex-direction: column;}
.catalog .detail .btArea a.bt { margin: 0 auto 40px;}
}

.catalog .detailContact p { padding-bottom: 1em;}
.catalog .detailContact ul { display: block; width: 80%; list-style: none; margin: 30px auto;}
.catalog .detailContact li { margin-bottom: 30px;}
.catalog .detailContact dl { display: flex; align-items: center; justify-content: space-between;}
.catalog .detailContact dt { display: flex; width: 40%; font-weight: 500; letter-spacing: .2em;}
.catalog .detailContact dt span { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-size: 70%; padding: 5px; margin-left: 5px; letter-spacing: .2em;}
.catalog .detailContact dd { width: 55%;}

.catalog .detailContact input,
.catalog .detailContact textarea { width: 100%; height: 2.8em; color: #000; background-color: #fff; border: 1px solid #666; padding: .4em calc(.8em + 30px) .4em .8em; appearance: none; cursor: pointer;margin-bottom:10px;}
.catalog .detailContact textarea { height: 6em;}
.catalog .detailContact input:focus,
.catalog .detailContact textarea:focus { outline: none;}

.catalog .detailContact .btArea { display: flex; align-items: center; justify-content: space-around;}
.catalog .detailContact .btArea input { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 20px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  transition: background-position ease 0.4s;
}
.catalog .detailContact .checkBt {
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
}
.catalog .detailContact .resetBt {
background-image: linear-gradient(
  to right,
  #877358 0%,
  #877358 50%,
  #000 50%,
  #000 100%
);
}
.catalog .detailContact .btArea input:hover { background-position: 0 0;}

@media screen and (max-width: 880px){
.catalog .detailContact ul { width: 100%;}
.catalog .detailContact .btArea { flex-direction: column;}
}

@media screen and (max-width: 540px){
.catalog .detailContact dl { flex-direction: column;}
.catalog .detailContact dt { width: 100%; margin-bottom: 10px;}
.catalog .detailContact dd { width: 100%;}
}


/* __________________________________________________
   introduction
__________________________________________________ */
.introduction header { background: url(../images/catalog/pageImg.jpg) center center no-repeat; background-size: cover;}
.introduction h2 {width: 100%; font-size: 2.4rem; font-weight: 500; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 20px; margin: 0 0 20px;}

@media screen and (max-width: 580px){
.introduction h2 { font-size: 2rem;}
}

.introduction .productList ul { display: flex; flex-wrap: wrap; list-style: none;}
.introduction .productList li { width: 30%; margin: 0 1.5% 3%;}
.introduction .productList li a { display: block; width: 100%; color: #fff; text-decoration: none; transition: .2s;}
.introduction .productList li a:hover { box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); opacity: .8;;}
.introduction .productList li span { display: block; background: #fff; color: #202020; font-size: 80%; text-align: center; letter-spacing: 0; padding: 5px 10px 10px;}

.introduction .detail .title { display: flex; align-items: center; width: 100%; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 20px; margin: 0 0 20px;}
.introduction .detail .title h2 { border: none; font-size: 2.4rem; font-weight: 500; margin: 0; padding: 0 0 8px;}
.introduction .detail figure.mainImg { display: block; width: 100%; margin: 10px auto 40px;}
.introduction .detail figure figcaption { text-align: right; font-size: 1rem; letter-spacing: .2em;}
.introduction .detail a.bt { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 60px; position: relative;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
}
.introduction .detail a.bt:before,
.introduction .detail a.bt:after { content: ""; height: 1px; background: #fff; position: absolute; top: 50%; right: 22px;}
.introduction .detail a.bt:before { width: 15px; transform: translateY(-50%);}
.introduction .detail a.bt:after { width: 8px; transform: translateY(-50%) rotate(45deg); transform-origin: right center;}
.introduction .detail a.bt:hover { background-position: 0 0;}


.introduction .detail .comment { width: 100%; background: #fff; border: 1px solid #666; border-radius: 10px; padding: 15px; margin-bottom: 50px;}
.introduction .detail .comment dt { font-size: 70%; margin-bottom: 15px;}
.introduction .detail .comment dd p {letter-spacing:.2em;line-height:1.8em;padding-bottom:.8em;}

.introduction .detail .gallery { display: flex; flex-wrap: wrap; margin-bottom: 40px;}
.introduction .detail .gallery a { width: 30%; margin: 0 1.5% 3%;}
.introduction .detail p.note { display: block; letter-spacing: .2em; font-size: 90%; margin-bottom: 15px;}

@media screen and (max-width: 580px){
.introduction .detail .gallery a { width: 45%; margin: 0 2.5% 5%;}
}

.introduction .detail .btArea { display: flex; justify-content: space-around;}

@media screen and (max-width: 870px){
.introduction .detail .btArea { flex-direction: column;}
.introduction .detail .btArea a.bt { margin: 0 auto 40px;}
}

.introduction .detailContact p { padding-bottom: 1em;}
.introduction .detailContact ul { display: block; width: 80%; list-style: none; margin: 30px auto;}
.introduction .detailContact li { margin-bottom: 30px;}
.introduction .detailContact dl { display: flex; align-items: center; justify-content: space-between;}
.introduction .detailContact dt { display: flex; width: 40%; font-weight: 500; letter-spacing: .2em;}
.introduction .detailContact dt span { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-size: 70%; padding: 5px; margin-left: 5px; letter-spacing: .2em;}
.introduction .detailContact dd { width: 55%;}

.introduction .detailContact input,
.introduction .detailContact textarea { width: 100%; height: 2.8em; color: #000; background-color: #fff; border: 1px solid #666; padding: .4em calc(.8em + 30px) .4em .8em; appearance: none; cursor: pointer;margin-bottom:10px;}
.introduction .detailContact textarea { height: 6em;}
.introduction .detailContact input:focus,
.introduction .detailContact textarea:focus { outline: none;}

.introduction .detailContact .btArea { display: flex; align-items: center; justify-content: space-around;}
.introduction .detailContact .btArea input { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 20px;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  transition: background-position ease 0.4s;
}
.introduction .detailContact .checkBt {
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
}
.introduction .detailContact .resetBt {
background-image: linear-gradient(
  to right,
  #877358 0%,
  #877358 50%,
  #000 50%,
  #000 100%
);
}
.introduction .detailContact .btArea input:hover { background-position: 0 0;}

@media screen and (max-width: 880px){
.introduction .detailContact ul { width: 100%;}
.introduction .detailContact .btArea { flex-direction: column;}
}

@media screen and (max-width: 540px){
.introduction .detailContact dl { flex-direction: column;}
.introduction .detailContact dt { width: 100%; margin-bottom: 10px;}
.introduction .detailContact dd { width: 100%;}
}


/* __________________________________________________
   top
__________________________________________________ */
.top header { min-height: 400px; height: auto; aspect-ratio: 683 / 384;}
.top header .inner { position: absolute; left: 0; right: 0; top: 0;}
.top header .topImg { aspect-ratio: 683 / 384; position: relative; overflow: hidden;}

@media screen and (max-width: 768px){
.top header { min-height: 250px; height: 250px; aspect-ratio: unset;}
.top header .topImg { height: 250px; aspect-ratio:  unset;}
}

@keyframes slide_animation {
0% {
   opacity: 0;
   transform: scale(1);
 }
 4.16% {
   opacity: 1;
 }
 33.33% {
   opacity: 1;
 }
 41.66% {
   opacity: 0;
   transform: scale(1.1);
 }
 100% {
   opacity: 0;
 }
}

.top header .topImg .topImg_01,
.top header .topImg .topImg_02,
.top header .topImg .topImg_03 {
width: 100%; height: 100%;
background-size: cover;
background-repeat: no-repeat;
position: absolute; top:0; left:0;
animation: slide_animation 24s infinite;
opacity: 0;
z-index: 0;
}

.top header .topImg .topImg_01 {
background-image: url(../images/top/topImg_01.jpg);
animation-delay: -2s;
}
.top header .topImg .topImg_02 {
background-image: url(../images/top/topImg_02.jpg);
animation-delay: 6s;
}
.top header .topImg .topImg_03{
background-image: url(../images/top/topImg_03.jpg);
animation-delay: 14s;
}

.top main section { width: 100%; padding: 10px 0;}
.top main .inner { display: block; max-width: 1080px; padding: 40px 30px; margin: 0 auto;}
.top h1 { display: block; width: auto;}

@media screen and (max-width: 1081px){
.top main .inner { max-width: 100%; padding: 40px 30px}
.top h1 { display: block; width: auto;}
}

@media screen and (max-width: 580px){
.top main .inner { padding: 20px 20px 40px 20px;}
}

.top main .inner p {text-shadow: 0 0 3px rgba(255, 255, 255, 1);}
.top main .inner p span { display: inline-block; background: rgba(255, 255, 255, 0.5); padding: 20px 30px; line-height: 4rem;}

.top main .verRlArea { display: flex; flex-direction: column;}
.top main .verRl { display: flex; flex-direction: column; justify-content: flex-start;}
.top main .verRl h1 { display: inline-block; font-size: 3rem; font-weight: 500; margin:0;}
.top main .verRl > p { display: inline-block; font-size: 1.8rem; line-height: 3em; padding: 30px 0;}
.top main .verRlBt { margin: 0}
.top main .verRlBt a { display: flex; align-items: center; text-decoration: none;}
.top main a.horizBt { display: flex; align-items: center; justify-content: center; text-decoration: none;}
.top main .verRlBt a:before,
.top main a.horizBt:before { content: ""; width: 40px; height: 40px; background: url(../images/top/icon_arrow.svg) 0 0 no-repeat; background-size: 100%; transition: .2s;}
.top main .verRlBt a:before,
.top main a.horizBt:before { margin: 0 10px 0 0;}
.top main .verRlBt a:hover:before,
.top main a.horizBt:hover:before { opacity: .6;}

.top main .company { background: url(../images/top/bg_greeting.jpg) 100% 50% no-repeat; background-size: 700px; margin-bottom: 60px;}
.top main .company .verRlArea {}
.top main .company .verRlBt { margin: 20px 0 0 0;}
.top main .company .spImg { display: none;}


.top main .works .inner { padding: 0 30px 40px;}
.top main .works { text-align: right; background: url(../images/top/workImg.jpg) 0 0 no-repeat; background-size: 500px; padding: 0 0 0 0; position: relative;}
.top main .works .verRlArea {}
.top main .works .verRl h1 { margin: 0 0 10px;}
.top main .works .verRlBt { display: flex; justify-content: flex-end;}
.top main .works .spImg { display: none;}

.top main .catalog { margin: 0 0 30px 0;}
.top main .catalog h1 { margin-bottom: 20px; text-align: center;}
.top main .catalog a.horizBt { justify-content: center;}

.top main .news .inner { display: flex; flex-direction: column; max-width: 1080px; padding: 40px 0; margin: 0 auto;}
.top main .news .contents { padding: 0; margin: 0;}
.top main .news .contents ul.headarea { width: 100%;}
.top main .news h1 { font-size: 3rem; font-weight: 500; text-align: center; margin: 0 0 30px;}
.top main .news a.horizBt { justify-content: flex-end; margin: 30px 0 0;}

@media screen and (max-width: 1081px){
.top main .news .inner { display: flex; max-width: 100%; padding: 40px 30px}
}


@media screen and (max-width: 840px){
.top main .company { background: url(../images/top/bg_greeting.jpg) center 100% no-repeat; background-size: 100%;}
.top main .verRl h1 { font-size: 3rem; font-weight: 500; writing-mode: vertical-rl; font-feature-settings: 'pkna'; margin: 0 50px;}
.top main .verRl > p { line-height: 2.5em;}
.top main .company .verRlBt { margin: 30% 0 0 30px;}
}

@media screen and (max-width: 600px){
.top main .inner p span { background: none;}
.top main .catalog { margin: 0 0 0 0;}
.top main .works { text-align: left;}
.top main .company .verRlArea,
.top main .works .verRlArea
{ flex-direction: column; justify-content: center; height: auto; margin: 0 auto 30px; order: 1;}
.top main .verRl { writing-mode: horizontal-tb; order: 1;}
.top main .verRl h1 { font-size: 3rem; writing-mode: horizontal-tb; margin: 0 0 15px 0;}
.top main .company .verRlBt,
.top main .works .verRlBt { margin: 0 auto 30px; order: 2;}
.top main .verRlBt a { justify-content: center; writing-mode: horizontal-tb; line-height: 2rem;}
.top main .verRlBt a:before { margin: 0 10px 0 0;}
.top main .verRl > p { font-size: 1.6rem; padding: 0; line-height: 1.8em;}
.top main .verRl > p br { display: none;}
.top main .company,
.top main .works { background: none; margin-bottom: 30px;}
.top main .company .spImg,
.top main .works .spImg  { display: block;}
.top main .news a.horizBt { justify-content:center;}
}

@media screen and (max-width: 580px){
.top main .news .inner { flex-direction: column; padding: 10px 20px 40px 20px;}
.top main .verRl h1,
.top main .catalog h1,
.top main .news h1,
.top main h1 { font-size: 2.4rem;}
.top main .catalog h1 { margin-bottom: 20px;}
.top main .catalog figure { margin-bottom: 40px;}
.top main .news .news { flex-direction: column; padding: 10px 20px 40px 20px;}
.top main .news .contents { width: 100%;}
.top main .news h1 { width: 100%; font-size: 2.4rem; writing-mode: horizontal-tb; margin-bottom: 30px;}
}


/* __________________________________________________
   error
__________________________________________________ */
.error header { background: url(../images/error/pageImg.jpg) center center no-repeat; background-size: cover;}
.error main .inner { display: block; max-width: 1080px; padding: 40px; margin: 0 auto;}
.error h1 { display: block; width: auto; text-align: center; writing-mode: horizontal-tb; margin-bottom: 50px;}
.error main .inner p { line-height: 1.8em; padding-bottom: 1em;}

.error a.bt { display: block; width: 330px; color: #fff; font-weight: 500; text-align: center; letter-spacing: .2em; text-decoration: none; padding: 10px 40px 15px 20px; margin: 20px auto 20px; position: relative;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #877358 50%,
  #877358 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
}
.error a.bt:hover { background-position: 0 0;}


.catalog .productList li a {
	height: 300px;
	overflow: hidden;
	position: relative;
	background: #fff;
}

.catalog .productList li a .mainImg {
//width: 100%;
width: auto;
height: auto;
//  min-width: 100%;
//  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.catalog .productList li div {
  position: absolute;
  bottom: 0;
  width: 100%;
}