@charset "utf-8";

/* common */
main .sub-title        { display: inline-block; position: relative; padding: 0 20px; color: #78af03; font-weight: 700; }
main .sub-title:before,
main .sub-title:after  { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #78af03; transform: translateY(-50%); }
main .sub-title:before { left: 0; }
main .sub-title:after  { right: 0; }

@media (max-width: 767px) {
  main .sub-title { font-size: 1.8rem; }
}

/* index */
main.idx { padding-bottom: 40px; background: url(../../images/service/bg.png) no-repeat center 100px; }

.link-btn a       { display: inline-block; position: relative; padding: 15px 50px 15px 20px; border: 2px solid #333; border-radius: 10px; background: #fff; font-weight: 700; line-height: 1.5; }
.link-btn a:after { content: '\f061'; position: absolute; top: 50%; right: 20px; font-family: 'Font Awesome 6 Pro'; font-size: 2rem; font-weight: 400; transform: translateY(-48%); }

.idx #intro             { position: relative; font-size: 1.8rem; text-align: center; }
.idx #intro p + p       { margin-top: 1em; }
.idx #intro h1 i        { display: inline-block; position: relative; padding: 0 20px; font-style: normal; font-size: 2rem; }
.idx #intro h1 i:before,
.idx #intro h1 i:after  { content: ''; position: absolute; top: 50%; width: 2px; height: 20px; background: #333; }
.idx #intro h1 i:before { left: 0; transform: rotate(-30deg) translateY(-50%); }
.idx #intro h1 i:after  { right: 0; transform: rotate(30deg) translateY(-50%); }

.idx #service               { min-height: 950px; margin-top: 60px; background: url(../../images/service/bg_service.png) no-repeat center 29px; text-align: center; line-height: 2.4; }
.idx #service > .inner > h2,
.idx #service > .inner > p  { display: none; }
.idx #service .scroll-inner { height: 850px; }
.idx #service .pin-list                 { position: relative; margin-top: 25px; }
.idx #service .pin-list li              { position: absolute; left: 50%; cursor: pointer; transition: .5s all; }
.idx #service .pin-list li:nth-child(1) { top: 193px; margin-left: 274px; }
.idx #service .pin-list li:nth-child(2) { top: 0; margin-left: -113px; }
.idx #service .pin-list li:nth-child(3) { top: 128px; margin-left: -113px; }
.idx #service .pin-list li:nth-child(4) { top: 388px; margin-left: -79px; }
.idx #service .pin-list li:nth-child(5) { top: 506px; margin-left: 92px; }
.idx #service .pin-list li:nth-child(6) { top: 322px; margin-left: -429px; }
.idx #service .pin-list li:nth-child(7) { top: 587px; margin-left: 32px; }
.idx #service .pin-list li:hover        { opacity: .7; transform: translateY(-10px); }

.iziModal-wrap     { padding: 30px 55px !important; }
.modal             { font-size: 1.6rem; line-height: 2; }
.modal .close-icon { cursor: pointer; }
.modal .fa-xmark   { position: absolute; top: -75px; right: 0; color: #fff; font-size: 6rem; }
.modal .sub-title  { color: #78af03; font-size: 2rem; font-weight: 400; }
.modal .sub-title:before { content: '\f0eb'; width: auto; height: auto; margin-right: 5px; background: none; font-family: 'Font Awesome 6 Pro'; }
.modal .sub-title:after  { content: none; }
.modal .title      { margin: 10px 0; font-size: 3rem; line-height: 1.5; }
.modal figure      { margin-top: 25px; }
.modal figure img  { width: 100%; height: auto; }
.modal .link-btn   { margin-top: 30px; padding-bottom: 60px; text-align: center; }

.idx .motto                  { font-size: 2rem; font-weight: 700; text-align: center; }
.idx .motto ul               { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 60px; font-size: 3rem; }
.idx .motto li               { position: relative; width: 500px; height: 170px; margin-right: 30px; }
.idx .motto li:last-child    { margin-right: 0; }
.idx .motto li:before,
.idx .motto li:after         { content: ''; position: absolute; top: 0; z-index: 2; width: 34px; height: 100%; border: 2px solid #333; pointer-events: none; }
.idx .motto li:before        { left: 0; border-right: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.idx .motto li:after         { right: 0; border-left: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.idx .motto li a             { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; border-radius: 20px; background: #fff; }
.idx .motto li a:after       { content: '\f061'; position: absolute; top: 50%; right: 60px; color: #333; font-family: 'Font Awesome 6 Pro'; font-weight: 400; transform: translateY(-50%); transition: .3s; }
.idx .motto li a:hover:after { right: 50px; color: #78af03; }
.idx .motto li a i           { position: absolute; bottom: 0; left: 38px; }
.btn-list                    { display: flex; justify-content: space-between; padding: 15px; }
.btn-list li                 { width: 223px; }
.btn-list .home-battery a    { padding: 27px 50px 27px 20px; }

@media (max-width: 767px) {
  main.idx    { padding-bottom: 0; background: none; }
  main.idx h1 { font-size: 2.7rem; }
  
  .link-btn a        { width: 100%; padding: 12px 40px 12px 20px; }
  .link-btn a:after  { right: 10px; }
  
  .idx #intro   { font-size: 1.6rem; }
  .idx #intro p { text-align: left; }
  
  .idx #service                  { min-height: initial; margin-top: 30px; background: none; }
  .idx #service .scroll          { margin-top: 30px; }
  .idx #service .scroll-inner    { width: 756px; height: 500px; }
  
  .idx #service #service-map     { position: relative; width: 100%; margin-top: 15px; overflow: hidden; }
  .idx #service .pin-map         { padding-top: 10px; }
  .idx #service .pin-map img     { width: 440px; margin-left: -20px; }
  .win_landscape .idx #service .pin-map img { margin-left: 20px; }
  .idx #service .pin-list        { position: absolute; top: 0; left: 0; width: 100%; margin-top: 0; }
  .idx #service .pin-list li img { width: 25px; height: auto; }
  .idx #service .pin-list li:nth-child(1)  { top: 60px; margin-left: 100px; }
  .idx #service .pin-list li:nth-child(2)  { top: 0; margin-left: -26px; }
  .idx #service .pin-list li:nth-child(3)  { top: 41px; margin-left: -26px; }
  .idx #service .pin-list li:nth-child(4)  { top: 127px; margin-left: -17px; }
  .idx #service .pin-list li:nth-child(5)  { top: 166px; margin-left: 40px; }
  .idx #service .pin-list li:nth-child(6)  { top: 107px; margin-left: -130px; }
  .idx #service .pin-list li:nth-child(7)  { top: 193px; margin-left: 22px; }
  .iziModal-wrap    { padding: 20px !important; }
  .modal            { height: 99.9% !important; font-size: 1.4rem; }
  .modal .fa-xmark  { top: 17px; right: 20px; color: #333; font-size: 4rem; }
  .modal .title     { font-size: 2.4rem; }
  
  .idx .motto                { margin-top: 50px; font-size: 1.6rem; text-align: left; }
  .idx .motto ul             { display: block; margin-top: 30px; font-size: 1.8rem; }
  .idx .motto li             { width: 100%; height: 100px; margin-right: 0; }
  .idx .motto li:last-child  { margin-top: 20px; }
  .idx .motto li a i img     { width: 60px; height: auto; }  
  .btn-list                  { display: block; padding: 0; }
  .btn-list li               { width: auto; }
  .btn-list .home-battery a  { padding: 20px 50px 20px 20px; }
  .modal .btn-list .link-btn { margin-top: 20px; padding-bottom: 0 !important; }
  .modal .btn-list li:first-child .link-btn { margin-top: 30px; }
}


/* second */
main.second { padding-bottom: 40px; background: url(../../images/service/bg_second.png) no-repeat center 400px; }

.second #intro            { display: flex; justify-content: space-between; padding-left: 100px; }
.second #intro .exp       { width: 470px; }
.second #intro h1         { margin: 20px 0 40px; font-size: 4rem; font-weight: 700; text-align: left; line-height: 1.65; }
.second #intro h1 span    { font-size: 5.5rem; letter-spacing: 5px; }
.second #intro h1 em      { display: inline-block; padding: 10px 20px 18px; background: #333; color: #fff; line-height: 1.25; }
.second #intro figure     { width: 563px; }
.second #intro figure img { width: 100%; height: auto; }

.second #summary             { margin-top: 60px; text-align: center; }
.second #summary h2          { margin-bottom: 20px; font-size: 4rem; font-weight: 700; line-height: 1.75; }
.second #summary h2 i        { display: inline-block; position: relative; padding: 0 20px; font-style: normal; font-size: 2rem; }
.second #summary h2 i:before,
.second #summary h2 i:after  { content: ''; position: absolute; top: 50%; width: 2px; height: 20px; background: #333; }
.second #summary h2 i:before { left: 0; transform: rotate(-30deg) translateY(-50%); }
.second #summary h2 i:after  { right: 0; transform: rotate(30deg) translateY(-50%); }

.second #summary .anc-list    { justify-content: flex-start; margin-top: 60px; font-size: 1.4rem; }
.second #summary .anc-list li { width: calc((100% - 60px) / 3); height: auto; min-height: 70px; margin: 30px 30px 0 0; }
.second #summary .anc-list li:nth-child(-n+3) { margin-top: 0; }
.second #summary .anc-list li:nth-child(3n)   { margin-right: 0; }
.second #summary .anc-list li a       { padding: 10px 46px 10px 20px; }
.second #summary .anc-list li a:after { right: 20px; font-size: 1.6rem; }

.second #summary .more   { margin-top: 30px; }
.second #summary .more a { display: inline-block; position: relative; margin-left: 20px; padding: 8px 60px 10px 30px; border: 2px solid #333; border-radius: 10px; background: #fff; font-weight: 700; }
.second #summary .more a:after { content: '\f061'; position: absolute; top: 50%; right: 20px; font-family: 'Font Awesome 6 Pro'; font-size: 2rem; font-weight: 400; transform: translateY(-50%); }

.second .detail            { margin-top: 100px; }
.second .detail section    { padding: 100px 0; border-top: 1px solid #333; }
.second .detail section h3 { margin-bottom: 20px; font-size: 3rem; font-weight: 700; line-height: 1.5; }
.second .detail section dt { margin: 20px 0 5px; font-size: 1.8rem; font-weight: 700; line-height: 1.75; }
.second .detail figure img { width: 100%; height: auto; border-radius: 20px; }

.second#estate .detail section h4 { margin-bottom: 35px; font-size: 1.8rem; font-weight: 700; line-height: 2; }

.second .detail .type01        { display: flex; justify-content: space-between; align-items: center; }
.second .detail .type01 .exp   { width: 670px; }
.second .detail .type01 figure { width: 470px; }

.second .detail .type02        { display: flex; justify-content: space-between; align-items: center; }
.second .detail .type02 .exp   { order: 1; width: 670px; }
.second .detail .type02 figure { order: 0; width: 470px; }

.second .detail .type03 .list    { display: flex; flex-wrap: wrap; }
.second .detail .type03 .list li { width: calc((100% - 60px) / 3); margin: 30px 30px 0 0; }
.second .detail .type03 .list li:nth-child(3n) { margin-right: 0; }
.second .detail .type03 .list h4 { margin: 15px 0 5px; font-size: 2rem; font-weight: 700; }

.second .detail table     { width: 100%; font-size: 1.6rem; text-align: center; }
.second .detail table th  { font-weight: 700; }
.second .detail table th,
.second .detail table td  { padding: 30px; border-top: 1px solid #333; vertical-align: middle; }

.second .detail .more   { margin-top: 40px; text-align: right; }
.second .detail .more a { display: inline-block; position: relative; margin-left: 20px; padding: 8px 60px 10px 30px; border: 2px solid #333; border-radius: 10px; background: #fff; font-weight: 700; }
.second .detail .more a:after { content: '\f061'; position: absolute; top: 50%; right: 20px; font-family: 'Font Awesome 6 Pro'; font-size: 2rem; font-weight: 400; transform: translateY(-50%); }

.second #qa             { padding: 0 100px; }
.second #qa h3          { margin-bottom: 50px; text-align: center; }
.second #qa h3 i        { display: inline-block; position: relative; padding: 0 20px; font-style: normal; font-size: 3rem; font-weight: 700; line-height: 1; }
.second #qa h3 i:before,
.second #qa h3 i:after  { content: ''; position: absolute; bottom: 0; width: 2px; height: 20px; background: #333; }
.second #qa h3 i:before { left: 0; transform: rotate(-30deg); }
.second #qa h3 i:after  { right: 0; transform: rotate(30deg); }

.second .parallel3       { display: flex; margin-top: 30px; }
.second .parallel3 li    { display: flex; flex-direction: column; justify-content: center; position: relative; width: calc((100% - 120px) / 3); height: 346px; margin-right: 60px; padding: 50px; border: 2px solid #333; border-radius: 50%; background: #fff; text-align: center; }
.second .parallel3 li:last-child       { margin-right: 0; }
.second .parallel3 li:after            { content: '\2b'; position: absolute; top: 50%; right: -50px; font-family: 'Font Awesome 6 Pro'; font-size: 4rem; font-weight: 700; transform: translateY(-50%); }
.second .parallel3 li:last-child:after { content: none; }
.second .parallel3 li h4 { display: flex; flex-direction: column; justify-content: center; margin-bottom: 20px; font-size: 2rem; font-weight: 700; line-height: 1.5; }

.second .acd-menu              { counter-reset: item item2; }
.second .acd-menu li:not(:last-of-type) { margin-bottom: 40px; }
.second .acd-check             { display: none; }
.second .acd-label             { display: block; position: relative; padding: 20px; border-radius: 20px; background: #8ec31f; color: #fff; font-size: 1.8rem; cursor: pointer; }
.second .acd-label:before,
.second .acd-label:after       { content: ''; position: absolute; top: 50%; right: 30px; width: 24px; height: 2px; background: #fff; transition: .3s; }
.second .acd-label:after       { transform: translateY(-50%) rotate(-90deg); }
.second .acd-label span        { display: block; position: relative; padding: 0 50px 0 70px; }
.second .acd-label span:before { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 0; counter-increment: item; content: 'Q'counter(item); width: 47px; height: 47px; border-radius: 50%; background: #fff; color: #8ec31f; transform: translateY(-50%); }
.second .acd-content           { position: relative; height: 0; opacity: 0; padding: 0 20px 0 90px; transition: .3s; visibility: hidden; overflow: hidden; }
.second .acd-content:before    { display: flex; justify-content: center; align-items: center; position: absolute; top: 40px; left: 20px; counter-increment: item2; content: 'A'counter(item2); width: 47px; height: 47px; border-radius: 50%; background: #8ec31f; color: #fff; }
.second .acd-check:checked + .acd-label:after          { transform: translateY(-50%); }
.second .acd-check:checked + .acd-label + .acd-content { height: auto; padding: 40px 20px 40px 90px; opacity: 1; visibility: visible; }

.second #storeinfo            { position: relative; margin-top: 160px; padding-bottom: 109px; }
.second #storeinfo-inner      { padding: 100px 0; border-radius: 228px; background: #fff; }
.second #storeinfo:after      { content: ''; position: absolute; bottom: 0; left: 50%; width: 204px; height: 109px; margin-left: -140px; background: url(../../images/service/bakery/blowtail.png) no-repeat; }
.second #storeinfo h3         { display: flex; justify-content: center; align-items: center; position: absolute; top: -28px; left: 200px; width: 150px; height: 55px; border-radius: 28px; background: #8ec31f; color: #fff; font-size: 2rem; font-weight: 700; }
.second #storeinfo .info      { display: flex; justify-content: space-between; width: 770px; margin: 0 auto; }
.second #storeinfo table      { width: 370px; }
.second #storeinfo table th,
.second #storeinfo table td   { border-top: 1px solid #333; }
.second #storeinfo caption    { caption-side: top; padding-bottom: 10px; font-size: 2rem; font-weight: 700; }
.second #storeinfo a[href^="tel:"] { pointer-events: none; }
.second #storeinfo figure     { width: 370px; }
.second #storeinfo figure img { width: 100%; height: auto; border-radius: 20px; }

main .bnr         { max-width: 1170px; margin: 30px auto 0; text-align: center; }
main .bnr a:hover { opacity: .7; }
main .bnr img     { width: 100%; height: auto; }

@media (max-width: 767px) {
  .second #intro            { display: block; padding-left: 20px; }
  .second #intro .exp       { width: 100%; }
  .second #intro h1         { margin: 10px 0 20px; font-size: 3.6rem; }
  .second #intro h1 span    { font-size: 4.2rem; letter-spacing: 0; }
  .second #intro figure     { width: 100%; margin-top: 30px; text-align: center; }
  .second #intro figure img { max-width: 360px; }
  
  .second #summary        { margin-top: 40px; }
  .second #summary h2     { /*margin-bottom: 20px;*/ font-size: 3rem; line-height: 1.5; }
  .second #summary h2 + p { text-align: left; }
  .second #summary h2 + p + p{ text-align: left; }

  
  .second #summary .anc-list    { display: flex; margin-top: 30px; line-height: 1.5; }
  .second #summary .anc-list li { width: calc((100% - 20px) / 2); height: auto; margin: 20px 20px 0 0; }
  .second #summary .anc-list li:nth-child(-n+3) { margin-top: 20px; }
  .second #summary .anc-list li:nth-child(3n)   { margin-right: 20px; }
  .second #summary .anc-list li:nth-child(-n+2) { margin-top: 0; }
  .second #summary .anc-list li:nth-child(2n)   { margin-right: 0; }
  .second #summary .anc-list li a       { padding: 10px 35px 10px 10px; }
  .second #summary .anc-list li a:after { right: 15px; font-size: 1.6rem; }
  
  .second #summary .more   { margin-top: 20px; }
  .second #summary .more a { display: block; max-width: 335px; margin: 20px 0 0; padding: 8px 55px 10px 20px; }
  
  .second .detail            { margin-top: 50px; }
  .second .detail section    { padding: 40px 0; }
  .second .detail section h3 { margin-bottom: 10px; font-size: 2.4rem; }
  .second .detail section dt { font-size: 1.6rem; }
  
  .second .detail .type01,
  .second .detail .type02          { flex-direction: column; }
  .second .detail .type01 .exp,
  .second .detail .type02 .exp     { order: 0; width: 100%; }
  .second .detail .type01 figure,
  .second .detail .type02 figure   { order: 1; width: 100%; margin-top: 20px; }
  .second .detail .type03 .list    { display: block; }
  .second .detail .type03 .list li { width: 100%; max-width: 335px; margin: 30px auto 0; }
  .second .detail .type03 .list li:first-child { margin-top: 30px; }
  .second .detail .type03 .list li:nth-child(3n) { margin-right: auto; }
  .second .detail .type03 .list h4 { margin: 10px 0 2px; font-size: 1.8rem; }
  
  .second .detail .more   { margin-top: 30px; text-align: left; }
  .second .detail .more a { display: block; max-width: 335px; margin: 20px 0 0; padding: 8px 55px 10px 20px; }
  
  .second #qa             { padding: 0 20px; }
  .second #qa h3          { margin-bottom: 30px; }
  .second #qa h3 i        { font-size: 2.4rem; line-height: 1.5; }
  
  .second .parallel3       { display: block; }
  .second .parallel3 li    { width: 320px; height: 320px; margin: 0 auto 60px; padding: 20px; }
  .second .parallel3 li:last-child { margin: 0 auto; }
  .second .parallel3 li:after      { top: auto; bottom: -70px; right: 50%; font-size: 4rem; transform: translate(50%, 0); }
  .second .parallel3 li h4 { display: block; }
  
  .second .acd-menu li:not(:last-of-type) { margin-bottom: 20px; }
  .second .acd-label             { padding: 10px 15px; font-size: 1.4rem; line-height: 1.75; }
  .second .acd-label:before,
  .second .acd-label:after       { right: 15px; width: 15px; }
  .second .acd-label span        { padding: 0 25px 0 50px; }
  .second .acd-label span:before { width: 35px; height: 35px; }
  .second .acd-content           { padding: 0 20px 0 65px; }
  .second .acd-content:before    { top: 25px; left: 15px; width: 35px; height: 35px; }
  .second .acd-check:checked + .acd-label + .acd-content { padding: 20px 20px 20px 65px; }
  
  .second #storeinfo            { margin-top: 80px; }
  .second #storeinfo-inner      { padding: 40px 20px 30px; border-radius: 20px; }
  .second #storeinfo h3         { left: 50%; transform: translateX(-50%); }
  .second #storeinfo .info      { display: block; width: auto; }
  .second #storeinfo table      { width: 100%; }
  .second #storeinfo table th,
  .second #storeinfo table td   { padding: 10px 0; }
  .second #storeinfo table th   { width: 5.5em; }
  .second #storeinfo a[href^="tel:"] { pointer-events: auto; }
  .second #storeinfo figure     { width: 100%; margin-top: 10px; }
  .second #storeinfo figure img { border-radius: 20px; }
  
  main .bnr { margin-top: 10px; padding: 0 20px; }
}