@charset 'UTF-8';
@import url("reset.css");
@import url("base.css");

/*====================================================
------------------------------------------------------
    main.css
------------------------------------------------------
====================================================*/
@font-face {
  font-family: "flopdesign-kana";
  src: url("/common/font/flopdesign-kana.eot?") format('eot'),
       url("/common/font/flopdesign-kana.woff") format('woff'),
       url("/common/font/flopdesign-kana.otf")  format('opentype');
}
body { font-size: 1.4rem; line-height: 2.4; font-family: "flopdesign-kana","ヒラギノ角ゴ Pro W3","Hiragino Kaku Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P",sans-serif; font-weight: normal!important;
font-style: normal!important;}

.row { max-width: 1080px; margin: 0 auto; position: relative;}
img { width: 100%;}

@media screen and (max-width: 767px)  {
.row { width: 90%; margin-left: auto; margin-right: auto;}
}

section { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 20px;}

@media screen and (max-width: 800px) {
section { padding: 0 30px;}
}

@media screen and (max-width: 767px) {
section, .innerFrame { padding: 0 15px;}
body { font-size: 1.5rem; line-height: 2;}
}

/* --------------------------------------------------
    header
-------------------------------------------------- */
/*
** header
*/
header { background: url(../images/share/bg_header_footer.jpg) 0 0 no-repeat; background-size: cover;}
.headerInner { padding: 10px 15px; text-align: left;}
.headerInner:after { content: "";	display: table;	clear: both;}
.headerLogo_logo { float: left; width: 200px; color: #fff; font-size: 1.2rem; text-align: center;}
.headerLogo_logo img { display: block; width: 200px; height: 45px;}

@media screen and (max-width: 800px) {
header { position: fixed; z-index: 60; width: 100%; border-top-width: 3px; background: #768f72; padding-left: 15px;}
.headerInner { padding-top: 15px; padding-bottom: 15px;}
.headerLogo { padding-bottom: 0;}
.headerLogo_logo img {}
}

@media screen and (max-width: 767px) {
.headerInner { padding: 5px;background: #768f72;}
.headerLogo { margin-left: 0; padding-bottom: 0;}
.headerLogo a { width: 200px; height: 47px;}
}

/*
** glovalNavi
*/
@media screen and (min-width: 801px) {
.gNav_sp { display: none!important;}
}

.gNav_pc { width: 68%; float: right; margin: 20px 0 10px 0; text-align: right;}
.gNav_pc li { display: inline; margin-left: 15px; text-align: center; line-height: 1em;}
.gNav_pc li a { font-size: 1.4rem; text-decoration: none; color: #fff; padding-bottom: 5px;}
.gNav_pc li a:hover,
.top .gNav_pc li.gNavTop a, .top .gNav_pc li.gNavTop a:hover,
.about .gNav_pc li.gNavAbout a, .about .gNav_pc li.gNavAbout a:hover,
.base_options .gNav_pc li.gNavBase_options a, .base_options .gNav_pc li.gNavBase_options a:hover,
.workProcess .gNav_pc li.gNavWorkProcess a, .workProcess .gNav_pc li.gNavWorkProcess a:hover,
.orderFlow .gNav_pc li.gNavOrderFlow a, .orderFlow .gNav_pc li.gNavOrderFlow a:hover,
.aboutShop .gNav_pc li.gNavAboutShop a, .aboutShop .gNav_pc li.gNavAboutShop a:hover,
.contact .gNav_pc li.gNavContact a, .contact .gNav_pc li.gNavContact a:hover
{ color: #f6dd0a; border-bottom: 3px solid #f6dd0a;}

.gNav_pc a[target=_blank] { display: inline-block; padding-right: 18px; background: url(../images/share/icon_exLink.png) no-repeat right center;}

@media screen and (max-width: 800px) {
.gNav_pc { display: none;}
.gNav_sp { position: fixed; top: 80px; padding-bottom: 80px; z-index: 999; display: none; overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; -webkit-overflow-scrolling: touch;}
.gNav_sp ul { background: #fff;}
.gNav_sp li { width: 100%; margin-left: 0; border-bottom: 1px solid #ececec;}
.gNav_sp li a { display: block; padding: 13px 6.25%; text-align: center; text-decoration: none; letter-spacing: .1em;}
.gNav_sp li a span { display: none;}
.gNav_sp .gNavContact a { color: #fff; background: #222;}
.gNav_sp .gNavContact a span { color: #fff;}
}

@media screen and (max-width: 767px) {
.gNav_sp { top: 80px; padding-bottom: 80px;}
}


/*
** menuTrigger
*/
.menuTrigger { display: none;}

@media screen and (max-width: 800px) {
.menuTrigger { position: absolute; z-index: 50; top: 20px; right: 30px; display: block; width: 30px; height: 18px; margin: auto; cursor: pointer;}
.menuIcon { position: relative;}

.menuIcon_line { position: absolute; left: 0; width: 100%; height: 2px; background: #f6dd0a;}
.menuIcon_line:nth-of-type(1) { top: 0;}
.menuIcon_line:nth-of-type(2) { top: 8px;}
.menuIcon_line:nth-of-type(3) { top: 16px;}
.sp_menu { position: absolute; top: 18px; font-size: 1.1rem; color: #fff;}
.menuIcon_line.open:nth-of-type(1) { top: 8px;
 -webkit-transform: rotate(35deg);
 -moz-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
 transform: rotate(35deg);}
.menuIcon_line.open:nth-of-type(2) { opacity: 0;}
.menuIcon_line.open:nth-of-type(3) { top: 8px;
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
 transform: rotate(-35deg);}
}

@media screen and (max-width: 767px) {
.menuTrigger { right: 18px;}
}


/* --------------------------------------------------
    footer
-------------------------------------------------- */
footer { font-size: 1.2rem; padding: 20px 0 12px; color: #fff; background: #768f72;}
.footer_copy { display: block; margin-top: 10px; color: #fff; text-align: center;}

@media screen and (max-width: 800px) {
footer { padding: 13px 0;}
.footer_copy { margin-top: 7px;}
}

@media screen and (max-width: 767px) {
.footer_copy { text-align: center; font-size: 1.2rem; margin-top: 5px; }
}

/*
** fNav
*/
footer {background: url(../images/share/bg_header_footer.jpg) 0 0 no-repeat; background-size: cover;}
footer ul { list-style: none; margin: 0 0 30px 0; text-align: center;}
footer li { display: inline-block; padding-right: 1em;}
footer li a { text-decoration: none; color: #fff;}
footer li a:hover { text-decoration: underline; color: #fff;}
footer li:before, footer li + footer li:before { margin-right: 1em; content: '|';}
footer li:last-child:after { margin-left: 1em; content: '|';}

footer .snsArea, footer .bnArea { text-align: center; margin: 0 0 20px 0;}
.snsArea a { display: inline-block; width: 40px; height: 40px; margin-right: 20px;}
.snsArea a:hover { opacity: .7;}
.bnArea a { display: inline-block; width: 250px; height: 86px; margin-right: 20px;}

@media screen and (max-width: 800px) {
footer ul.onlyPc { display: none;}
footer li { float: none;}
}

@media screen and (max-width: 767px) {
footer { padding-bottom: 70px;}
footer li { margin: 3px 0; padding-right: 2em;}
footer li:before, footer li + footer li:before { margin-right: 0; content: '- ';}
footer li:last-child:after { margin-left: 1em; content: '';}
}

/*
**Go to top
*/
#pageTop a.btPageTop { display: block; width: 40px; height: 40px; display: block; position: fixed; bottom: 10px; right: 10px; z-index: 10; padding: 10px 15px; background: rgba(246, 221, 10, 0.85); border-radius: 30px; color: #fff; text-align: center; text-decoration: none; text-indent: -999em; overflow: hidden;}
#pageTop a.btPageTop:hover { opacity: .8;}
#pageTop a.btPageTop:before { content: ''; width: 10px; height: 10px; border-top: solid 1px #fff; border-right: solid 1px #fff; position: absolute; top: 55%; left: 15px; margin-top: -4px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.call { display: none;}

@media screen and (max-width: 767px){
#pageTop a.btPageTop { border: 1px solid #fff;}
#pageTop a.call { display: block; width: 70%; height: 45px; display: block; position: fixed; bottom: 10px; left: 30px; z-index: 10; padding: 5px 15px; background: rgba(246, 221, 10, 0.85); border: 1px solid #fff; border-radius: 10px; color: #666; text-align: center; text-decoration: none; overflow: hidden; font-size: 1rem; line-height: 1.2em;}
#pageTop a.call span { font-size: 2rem;}
}


/* --------------------------------------------------
    main
-------------------------------------------------- */
main { min-height: calc(100vh - 300px;); padding: 30px 0 50px 0; margin: 0; background: #ccc url(../images/share/bg_main.jpg) 0 0 no-repeat; background-size: cover;}

main img { border-radius: 6px;}

h1 { font-size: 3.5rem; font-weight: normal; text-align: center; line-height: 1.4; color: #361818; margin-bottom: 50px;}
h1 p { display: block; font-size: 1.4rem; font-weight: normal; color: #121212;}
h1 span{ position: relative; display: inline-block; padding-bottom: 0.3em; border-bottom: 1px solid #000;}
h1 span::before, h1 span::after
{ position: absolute; top: 100%; left:50%; transform:translateX(-50%); content: ''; border: 10px solid transparent;}
h1 span::before { border-top: 10px solid #000;}
h1 span::after { margin-top: -1px; border-top: 10px solid #f6dd0a;}

h2 { font-size: 2.4rem; font-weight: normal; position: relative; padding: 0 .5em 0 2em; margin-bottom: 15px;
background-color: rgba(255, 255, 255, 0.5); border-radius: 1.5em;}
h2:after { position: absolute; top: 50%; left: 1em; transform:translateY(-50%); content: ''; width: 13px; height:13px; background-color: #fff; border-radius: 100%;}
h3 { font-size: 2rem; font-weight: normal; position: relative; padding-left: 1em;}
h3:after { position: absolute; top: 50%; left:0; transform:translateY(-50%); content: ''; width: 15px; height: 4px; background-color: #121212;}

.eyeCatch{ display: inline-block; position: relative; background: #8c9d7d; box-shadow: 0px 0px 0px 5px #8c9d7d; border: dashed 2px white; padding: 0.1em 0.5em; color: #fff; margin: 10px 0; font-size: 1.2rem;}
.eyeCatch:after{ position: absolute; content: ''; left: -7px; top: -7px; border-width: 0 0 15px 15px;
border-style: solid; border-color: #F4EFDB #F4EFDB #707c65; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);}

.pointMemo { border: 1px solid #8C9D7D; padding: 10px; background-color: #fffaeb; box-shadow: 2px 2px 2px #999; margin-bottom: 40px;}
.pointMemo dt { border-bottom: 6px double #8C9D7D; font-size: 130%; font-weight: bold; padding: 0px 10px;}
.pointMemo span {border-bottom: 2px dotted #8C9D7D; color: #444; padding: 0px 10px;}


@media screen and (max-width: 800px) {
main { padding-top: 80px; background: url(../images/share/bg_main.jpg) 0 0 no-repeat; background-size: cover;}
h1 { font-size: 2.4rem; margin-top: 30px;}
h1 span { display: block;}
h2 { font-size: 1.8rem; line-height: 1.2; padding-top: 5px; padding-bottom: 5px;}
h3 { font-size: 1.6rem; padding-left: 6px; border-left: 3px solid #121212;}
h3:after { display: none;}
}

@media screen and (max-width: 767px) {
main { padding-top: 80px;}
}


/* --------------------------------------------------
    top
-------------------------------------------------- */
figure.mainImg { max-width: 1080px; height: 450px; margin: 0 auto 30px auto;}
.swiper-slide img { width: 100%;}
.top h1.pcH1 { font-size:3rem; text-align: center; line-height: 2; font-weight: normal; color: #300909; margin-bottom: 20px;}

.youtubeInfo { padding: 15px; background: rgba(255, 255, 255, 0.6); font-size: 2rem; margin-bottom: 30px;}
.youtubeInfo .col_4 { padding-top: 50px;}

.pageInfo { margin: 0 auto 30px auto;}
.pageInfo a { line-height: 0; padding: 0;}
.pageInfo dl { border-radius: 10px; overflow: hidden; padding: 0; margin-bottom: 15px;-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
 transition: all .5s ease;}
.pageInfo a:hover img {}
.pageInfo dt { text-align: center; background: #361818; font-size: 1.6rem; line-height: 1.6; padding: 5px; color: #fff;}
.pageInfo dt span { display: block; text-align: center; font-size: 1.2rem;}
.pageInfo dd { padding: 0; margin: 0; line-height: 0; position: relative;-moz-transition: all .5s ease;}
.pageInfo img { padding: 0; margin: 0; position: relative; border-radius: 0;}
.pageInfo a:hover dl { border-radius: 30px; overflow: hidden;-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
 transition: all .5s ease;}
.pageInfo a:hover img {
-webkit-filter: grayscale(100%) blur(5px);
-moz-filter: grayscale(100%) blur(5px);
-ms-filter: grayscale(100%) blur(5px);
-o-filter: grayscale(100%) blur(5px);
filter: grayscale(100%) blur(5px);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
 transition: all .3s ease;
}
.pageInfo a:hover dd:after { width: 100%; height: 16px; display: block; background: rgba(255, 255, 255, 0.8); content: "もっと詳しく"; text-align: center; position: absolute; top: 30%; font-size: 1.6rem; color: #121212; padding: 15px 0 0 0; margin: 0 auto;}

.snsArea { }
.snsArea .col_6 {  }
.snsArea .col_6 .snsTitle { width: 100%; height: 30px; background: #361818; border-radius: 0; padding: 5px 10px ;margin-bottom: 0;}
.snsArea .col_6 .snsTitle img { display: block; width: 20px; height: 20px;}
.snsArea .col_6 .snsCont { height: 500px; background: rgba(255, 255, 255, 0.7); padding: 10px; overflow: hidden;}
.top h1.spH1 { display: none;}

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

figure.mainImg { max-width: 800px; height: 330px; margin: 0 auto 30px auto;}
.top h1 { font-size: 1.8rem;}

}

@media screen and (max-width: 767px) {
.pageInfo a:hover dl { border-radius: 0; overflow: hidden;-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
 transition: none;}
.pageInfo a:hover img {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
-webkit-transition:  none;
-moz-transition:  none;
-ms-transition:  none;
-o-transition:  none;
 transition:  none;}
.pageInfo a:hover dd:after { display: none;}
.youtubeInfo .col_4 { padding-top: 10px;}
.top h1.pcH1 { display: none;}
.top h1.spH1 { display: block; width: 100vw; padding: 0 20px; font-size: 1.5rem; color: #fff; text-align: center; position: absolute; top: 30%; left: 50%; transform: translateY(-30%) translateX(-50%); z-index: 10; font-weight: normal;}
figure.mainImg { width: auto; height: 100vh; margin: 0;}
.swiper-slide { width: 100vw; overflow: hidden; height: calc(100vh - 80px); position: relative;}
.swiper-slide img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);}
.snsCont.twitter iframe#twitter-widget-0 { width: 740px!important; }
}

/* --------------------------------------------------
    About
-------------------------------------------------- */
.about .row { margin-bottom: 30px;}
.about .row img { width: 300px; margin-top: 10px; border-radius: 6px;}

/* --------------------------------------------------
    base_options
-------------------------------------------------- */
.base_options .col_6 ul { list-style: none; margin-bottom: 20px;}
.base_options .col_6 li { font-size: 1.7rem;}
.base_options .col_6 .small { line-height: 1.4; color: #666; padding: 10px; border: 1px dotted #666;}
.base_options .col_6_sp h3 { font-size: 1.7rem;}
.base_options .col_6_sp p { line-height: 1.4; font-size: 1.3rem; padding-bottom: 1rem;}

@media screen and (max-width: 767px) {
.base_options .col_6_sp h3 { font-size: 1.7rem; line-height: 1.2; margin-bottom: 10px;}
.base_options .col_6 .small { margin-bottom: 30px;}
}

/* --------------------------------------------------
    workProcess
-------------------------------------------------- */
.workProcess .pointMemo { font-size: 1.7rem;}
.workProcess .process .row { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dotted #B69560;}
.workProcess .stepTitle { display: flex; margin-bottom: 10px; line-height: 1.2;}
.workProcess .stepTitle span { display: table-cell; background: #f6dd0a; font-size: 1.8rem; padding: 12px 10px 8px 10px; text-align: center; line-height: 1.2; border-radius: 3px; margin-right: 10px;}
.workProcess .stepTitle p { padding: 10px 0 0 0; font-size: 1.7rem;}

@media screen and (max-width: 800px) {
.workProcess .stepTitle { display: block;}
.workProcess .stepTitle span { display: block; background: #f6dd0a; font-size: 1.5rem; padding: 5px; border-radius: 0; margin-right: 0; margin-bottom: 15px;}
.workProcess .stepTitle p { padding: 0;}
}

/* --------------------------------------------------
    orderFlow
-------------------------------------------------- */
.orderFlow main nav { padding: 0 20px; margin-bottom: 40px; line-height: 1.4;}

.orderFlow main .bt_more { position: relative; border-bottom: none;}
.orderFlow main .bt_more a { display: block; text-align: center; padding: 5px; border: 3px solid #f6dd0a; background: rgba(255, 255, 255, 0.6); position: relative; border-radius: 50px;}
.orderFlow main .bt_more span:before, .orderFlow main .bt_more span:after{ content:''; height: 1px; width: 10px; display: block; background: #121212; position: absolute; top: 20px; right: 13px; transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}
.orderFlow main .bt_more span:after { position: absolute: top: 16px; right: 20px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.orderFlow main .bt_more a:hover { background: #f6dd0a;}

.step { list-style-type: none; padding: 0; margin: 0 0 40px 0; font-size: 1.7rem;}
.step li { line-height: 1.4; display: flex;}
.step li span { display: inline-block; width: 100px;  position: relative; background: #8c9d7d; padding: 1em; margin: 10px 0; text-align: center; color: #fff; font-size: 1.4rem;}
.step li span:after{ content: ""; position: absolute; width: 0; height: 0; bottom: -10px; left: 0; border-style: solid; border-color: #8c9d7d transparent transparent transparent; border-width: 10px 50px 0 50px; z-index: 1;}
.step li p { display: block; width: calc(100% - 130px); padding: 10px 0 0 10px;}

@media screen and (max-width: 800px) {
.orderFlow main section { padding-top: 90px;}
.orderFlow main h2 { font-size: 1.6rem;}
.orderFlow main nav { padding: 0;}
.orderFlow main .bt_more span:before, .orderFlow main .bt_more span:after { display: none;}
.step { font-size: 1.5rem;}
.step li { display: block; margin-bottom: 15px;}
.step li span { width: 100%; display: block; position: static; padding: 7px; font-size: 1.2rem;}
.step li span:after{ display: none;}
.step li p { width: 100%; padding: 0;}
}

/* --------------------------------------------------
    aboutShop
-------------------------------------------------- */
.aboutShop main .col_3 { background: rgba(255, 255, 255, 0.5); padding: 10px; text-align: center;}
.aboutShop main .col_9 { background: rgba(255, 255, 255, 0.3); padding: 10px;}


/* --------------------------------------------------
    contact
-------------------------------------------------- */
.contact main .col_4 { background: rgba(255, 255, 255, 0.5); padding: 10px; margin-bottom: 15px; text-align: center;}
.contact main .col_8 { background: rgba(255, 255, 255, 0.3); padding: 10px; margin-bottom: 15px;}
.contact .tellArea { width: 60%; margin: 30px auto; background: rgba(255, 255, 255, 0.7); border: 1px solid #8C9D7D; padding: 40px 0 30px 0; text-align: center;}
.contact .tellArea p { display: block; font-size: 1.8rem; line-height: 1.6;}
.contact .tellArea span { display: block; font-size: 1.2rem; color: #666;}
.contact .tellArea strong { display: block; font-size: 4rem; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P",sans-serif; font-weight: bold; line-height: 1.4;}
.contact main section:first-of-type { margin: 0 auto 50px auto;}
.contact main section:first-of-type p { display: block; width: 80%; line-height: 1.8em; margin: 0 auto;}
.contact main section:first-of-type .btArea { padding: 20px 0 30px; text-align: center;}
.contact main section:first-of-type .btArea a { display: inline-flex; align-items: center; color: #fff; background: #8C9D7D; border-radius: 10px; font-size: 150%; padding: 10px 30px;}
.contact main section:first-of-type .btArea a:after { content: ""; width: 30px; height: 30px; background: url(../images/contact/icon_pdf.svg) 0 0 no-repeat; background-size: cover; margin-left: 15px;}
.contact main section:first-of-type .btArea a:hover { opacity: .7; transition: .3s;}
.contact main section:first-of-type ul { display: block; width: 80%; list-style: none; line-height: 1.8em; margin: 0 auto;}
.contact main section:first-of-type ul li:before { content: "※";}

@media screen and (max-width: 767px) {
.contact main section:first-of-type p,
.contact main section:first-of-type ul { width: 100%;}
.contact .tellArea { display: none;}
}

/* --------------------------------------------------
    other / Sitepolicy・Privacypolicy
-------------------------------------------------- */
.other .tableTitle { text-align: center; background: #999; color: #fff; padding: 3px 0;}
/* ------ 2column(title＋contents)-------- */
.other .table_2col { display: grid; width: 100%; grid-auto-rows: auto; grid-template-columns: 30% 70%; border-top: 1px solid #ccc; color: #333;}
.other .table_2col > .title { padding: 1rem; background-color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
.other .table_2col > .items { padding: 1rem; border-bottom: 1px solid #ccc; background-color: #fff;}
.other .table_2col > .items ul { list-style: none; margin: 10px 0 0 0; padding: 0;}
.other .table_2col > .items li { padding: 0 0 1rem 1.5rem;}
.other .table_2col > .items li:before { font-family: "Font Awesome 5 Free"; font-size: 1.5rem; content: "\f0da"; color: #606060; font-weight: bold; margin-left: -10px; margin-right: 5px;}


@media screen and (max-width: 767px) {
.other .table_2col { grid-auto-columns: auto; }
.other .table_2col > .items, .other .table_2col > .title { grid-column: 1 / 3;}
.other .table_2col > .title { border-right: none;}
}

.youtubeArea, .googlemapArea { position: relative; padding-bottom: 56.25%; padding-top: 30px;	height: 0;
overflow: hidden;}
.youtubeArea iframe, .googlemapArea iframe { position: absolute; top: 0; left: 0;	width: 100%; height: 100%;}