/*-------------------------------
    共通
--------------------------------*/
html { scroll-behavior: smooth; }
body {
    letter-spacing: .1em;
    color: #333;
}

p { line-height: 1.875;}

h1 { font-size: 26px; }
h2 { font-size: 24px; }

a {
    display: block;
    text-decoration: none;
    color: #fff;cursor: pointer;
}

.c-sp-1024 { display: none; }
.c-sp-768 { display: none; }
.c-sp-478 { display: none; }
.c-sp-378 { display: none; }

.c-inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
}

/*------ 共通レスポンシブ ------*/
@media(max-width: 1024px) {
   h1 { font-size: 26px; }

   .c-pc-1024 { display: none; }
   .c-sp-1024 { display: block;} 
}

@media(max-width: 768px) {
   h1 { font-size: 24px; }

   .c-sp-768 { display: block; }
   .c-pc-768 { display: none; }
}

@media(max-width: 478px) {
   h1 { font-size: 19px; }

   .c-pc-478 { display: none; }
   .c-sp-478 { display: block; }
}

@media(max-width: 378px) {
   h1 , h2 { font-size: 18px; }

   .c-pc-378 { display: none; }
   .c-sp-378 { display: block; }
}



/*-------------------------------
   ヘッダー
--------------------------------*/
header { 
   position: relative;
   z-index: 1000;
} 
.l-header {
   position: fixed;
   width: 100%;
   height: 80px;
   z-index: 700;
   transition: transform 0.6s ease-out;
}

.l-header__logo {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
}
.l-header__logo a { display: inline-block; }
.l-header__logo img {height: 80px;}
.l-header__logo a:hover {
   opacity: .7;
   transition: .5s;
}

.l-header__nav--pc {
   position: relative;
   display: flex;
   justify-content: flex-end;
   z-index: 900;
}
.l-header__nav--sp {
   display: none;
}

.l-header__item a {
   width: 100%;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 40px;
   transition: color .5s;
}
.l-header__item a:hover {
   opacity: .8;
   transition: .5s;
}

.l-header__bg-pc {
   position: absolute;
   top: 0;
   left: 0;
   transform: translateY(-100px);
   width: 100%;
   height: 80px;
   transition: transform 0.5s ease-out;
   background: #fff;
}
.l-header__hm {
   display: none;
}


/*------ ヘッダーレスポンシブ ------*/
@media(min-width: 1401px) {
   .l-header__item a { padding: 0 20px; }
}
@media(max-width: 1400px) {
   .l-header__nav--pc { display: none; }
   .l-header__nav--sp {
       display: block;
       position: fixed;  
       top: 0;
       right: 0;
       width: 100%;
       flex-direction: column;
       opacity: 0;
       visibility: hidden;
   }
   
   .l-header__nav--sp .l-header__item {
       width: 100%;
       min-width: 220px;
       max-width: 400px;
       height: 10%;
       margin: 0 auto;
       text-align: center;
       flex-grow: 0;
   }

   .l-header__item a {
       background-position: 0 0;
       background-size: 200% auto;
       align-items: center;
       text-shadow: 0 0 0;
       color:#333;
       font-size: 15px;
       padding: 0 10px;
   }
   .l-header__nav .l-header__item:nth-child(6)  a{ color: #fff; }
   .l-header__item a:hover {
       background-position: -100%, 0;
       transform:calc(1, 1);
   }

   .l-header__bg-hm {
       position: fixed;
       width: 100%;
       height: 0;
       top: 0;
       right: 0;
       z-index: 900;
       opacity: 0;
       transition: .8s;
        visibility: hidden;
   }
   .l-header__hm {
       display: block;
       position: absolute;
       top: 0;
       right: 0;
       z-index: 1100;
       background: #ee7a00;
       height: 80px;
       width: 80px;
       transition: top .5s;
       cursor: pointer;
   } 
   .l-header__hm div { margin-top: 10px; }

   .l-header__hm-line {
       display: block;
       position: relative;	
       height: 2.5px;
       background: #fff;
       transition: .5s;
       width: 30px;
       margin: 10px auto 0;
   }
   .l-header__hm-line::before,
   .l-header__hm-line::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: #fff;
      transition: .5s;
      width: 30px;
   }

   .l-header__hm-line::before {
      transform: translateY(-9px);	
      -webkit-transform: translateY(-9px);
   }
   .l-header__hm-line::after {
      transform: translateY(9px);
      -webkit-transform: translateY(9px);
   } 

   .l-header__hm-txt {
       display: block;
       text-align: center;
       margin-top: 15px;
       font-size: 14px;
       color: #fff;
   }
}

@media(max-width: 600px) {
   .l-header__logo img { 
       height: auto;
       max-width: 483px;
       width: 100%;
   }
}

@media(max-width: 478px) {
   .l-header {
       background: #fff;
       height: 60px;
   }
   .l-header__logo {
       width: 100%;
       text-align: center;
   }
   .l-header__logo img {max-width: 362px;}
   .l-header__nav--sp {
       width: 90%;
       right: 5%;
   }
   .l-header__nav--sp .l-header__item { min-width: 190px; }
   .l-header__hm {
       top: 60px;
       height: 60px;
       width: 60px;
   }
   .l-header__hm-txt { font-size: 12px; }

   .l-header__hm-line,
   .l-header__hm-line::before,
   .l-header__hm-line::after {
       height: 2px;
       width: 25px;
       width: 25px;
   }
}

/*------ ヘッダーjs css ------*/
.l-header.js-header-open {transform: translateY(-80px);}

.l-header__bg-pc.js-header-open {transform: translateY(0);}
.l-header__nav.js-header-open .l-header__item a {color: #333;}
.l-header__nav.js-header-open .l-header__item:nth-child(6) a{color: #fff;}

.js-hm-top0 {top: 0!important;}
.js-hm-top80 {top: 80px!important;}

@media(max-width: 1400px) {
   /*----- ハンバーガークリック時 -----*/
   .l-header__nav--sp.js-nav-open {
       top: 50%;
       transform: translateY(-50%);
       opacity: 1;
       transition: .8s;
       z-index: 1000;
       min-width: auto;
       visibility: visible;
       transition-delay: .3s;
   }
   .l-header__hm-line.js-nav-open {
       background: transparent;
   }
   .l-header__hm-line.js-nav-open::before {
       transform: rotate(45deg);
       -webkit-transform: rotate(45deg);
       background: #fff;
   }
   .l-header__hm-line.js-nav-open::after {
       transform: rotate(-45deg);
       -webkit-transform: rotate(-45deg);
       background: #fff;
   }

   .l-header__bg-hm.js-nav-open {
       background: #fff;
       opacity: .7;
       visibility: visible;
       height: 100vh;
   }

   .js-header-open .l-header__bg-hm {top: 80px;}
}
@media(max-width: 478px) {
   .l-header.js-header-open {transform: translateY(-60px);}
   .l-header__hm.js-hm-top80 {top: 0!important;}
   .js-header-open .l-header__bg-hm {top: 60px;}
}

/*--------------------------------
   p-fv
--------------------------------*/
#p-fv {
   width: 100%;
   overflow: hidden;
   position: relative;
   height: 100svh;
}
#p-fv .p-fv__swiper {
   z-index: 0;
}
#p-fv .p-fv__slide {
   height: 100vh;
}
#p-fv .p-fv__slide-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   animation: fv-swiper 16s linear infinite alternate;
}
@keyframes fv-swiper {
   0% { transform: scale(1); }
   100% { transform: scale(1.2); }
}

.p-fv__txt {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   text-align: center;
   width: 100%;
   color: #fff;
}

.p-fv__txt h1 {
   line-height: 1.5;
   font-size: 48px;
}
.p-fv__txt p {
   font-size:28px;
   font-weight: bold;
}
.p-fv__txt img {
   margin-top: 45px;
   width: 380px;
}

.p-fv__arrows {
   width: 60px;
   height: 72px;
   position: absolute;
   left: 50%;
   margin-left: -30px;
   bottom: 20px;
 }
 .p-fv__arrows path {
   stroke: #fff;
   fill: transparent;
   stroke-width: 2.5px;  
   animation: arrow 2.5s infinite;
   -webkit-animation: arrow 2.5s infinite; 
 }
 
 @keyframes arrow {
   0% {opacity:0}
   40% {opacity:1}
   80% {opacity:0}
   100% {opacity:0}
 }
 
 @-webkit-keyframes arrow  {
   0% {opacity:0}
   40% {opacity:1}
   80% {opacity:0}
   100% {opacity:0}
 }
 
 .p-fv__arrows path.p-fv__arrows-a1 {
   animation-delay:-1s;
   -webkit-animation-delay:-1s;
 }
 
 .p-fv__arrows path.p-fv__arrows-a2 {
   animation-delay:-0.5s;
   -webkit-animation-delay:-0.5s;
 }
 
 .p-fv__arrows path.p-fv__arrows-a3 { 
   animation-delay:0s;
   -webkit-animation-delay:0s;
 }
@media(max-width: 1024px) {
   .p-fv__txt h1 {font-size: 36px;
   }
   .p-fv__txt img {
       width: 340px;
   }
}
 
@media(max-width: 768px) {
   .p-fv__txt p {
       font-size: 22px;
   }
   .p-fv__txt h1 {
       line-height: 2.2;
       font-size: 28px;
   }
   .p-fv__txt img {
       margin-top: 30px;
       width: 300px;
   }
}

@media(max-width: 478px) {
   .p-fv__txt p {
       font-size: 18px;
   }
   .p-fv__txt h1 { font-size: 24px; }
   .p-fv__txt img { width: 265px; }
}

/*--------------------------------
   地域のみなさまへ
--------------------------------*/
.p-area {
   width: 100%;
   background: url(../images/img-region-bg.jpg);
   background-size: cover;
   background-position: center;
   padding:90px 0;
}
.p-area__wrap {
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.p-area__wrap div { width: 52%; }
.p-area__ttl{ 
   font-size: 28px; 
   text-align: center;
}
.p-area__txt { margin-top: 30px; }
.p-area__img { width: 350px; }

@media(max-width: 768px) {
   .p-area__wrap {
       flex-direction: column;
       justify-content: center;
       gap: 20px;
   }
   .p-area__wrap div { width: 100%; }
}

@media(max-width: 768px) {
   .p-area h2 {
       font-size: 26px;
   }
}
/*--------------------------------
   コンセプト
--------------------------------*/
.p-concept__img{
   position: relative;
   margin: 50px auto 0;
   z-index: 800;
}
.p-concept__img--first {
   border-radius: 20px;
}
.p-concept__img--second {
   position: absolute;
   bottom: -38px;
   left: 50%;
   transform: translateX(-50%);
   width: 25px;
}

.p-concept__txt {
   margin: 30px auto 0;
   max-width: 830px;
   text-align: center;
}

@media(max-width: 768px) {
   .p-concept__img--first { border-radius: 12px; }
}

@media(max-width: 475px) {
   .p-concept__img { margin: 35px auto 0; }
   .p-concept__img--second {
       bottom: -30px;
       width: 20px;
   }
}

/*--------------------------------
   コンセプト 理由1
--------------------------------*/
#p-reason1 {
   padding: 40px 0 140px;
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px) , 50% 100% , 0 calc(100% - 80px) );
}

.c-reason-ttl {
   margin: 40px auto 25px;
   text-align: center;
}

#p-reason1 .c-ttl h2 {
   letter-spacing: 0.27em;
   color: #ee7a00;
}
.c-reason-ttl p {
   display: inline-block;
   border-bottom: 1px solid #ee7a00;
   font-size: 20px;
   line-height: 1.6;
   color: #ee7a00;
}
.c-reason-ttl h3 {
   font-size: 28px;
   margin-top: 10px;
   line-height: 1.5;
   letter-spacing: 0.2em;
}

.p-reason1__list {
   display: flex;
   justify-content: space-between;
   margin-top: 55px;
   flex-wrap : wrap;
   gap: 20px;
}
.p-reason1__list::after{
   content:"";
   display: block;
   width: 30%;
   max-width: 280px;
}
.p-reason1__item {
   width: 30%;
   max-width: 290px;
}
.p-reason1__item img {
   border-radius: 15px;
}
.p-reason1__item p:nth-of-type(1) {
   font-size: 18px;
   margin: 10px auto;
   letter-spacing: .15em;
}
.p-reason1__item p:nth-of-type(2) {
   letter-spacing: -0.01em;
}
.p-reason1__catch {
   font-size: 18px;
   margin: 10px auto;
   letter-spacing: .15em;
   text-align: center;
   color: #ee7a00;
   font-weight: bold;
}

@media(max-width: 1024px) {
   #p-reason1 .c-ttl { padding-top: 20px; }
}

@media(max-width: 768px) {
   #p-reason1 .c-ttl h2 { font-size: 24px; }
}
@media(max-width: 600px) {
   .p-reason1__list::after,
   .p-reason1__item { width: 45%; }

   .p-reason1__item p:nth-of-type(2) {font-size: 14px;}
   .p-reason1__catch {font-size: 16px;}
}
@media(max-width: 478px) {
   #p-reason1 .c-ttl { padding-top: 0 }
   #p-reason1 .c-ttl h2 { 
       font-size: 20px; 
       letter-spacing: .2em;
   }
   .c-reason-ttl h3 {
       font-size: 22px;
       letter-spacing: 0.1em;
   }
}


/*--------------------------------
   コンセプト 理由2
--------------------------------*/
.p-reason2 {
   position: relative;
   padding: 30px 0 100px;
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 85px) , 50% 100% , 0 calc(100% - 85px) );
   z-index: 800;
}
.p-reason2__inner {
   position: relative;
   margin-bottom: 30px;
}
.p-reason2 .p-reason2__pagination {
   bottom: -35px;
}
.p-reason2 .swiper-pagination-bullet {
   width: 11px;
   height: 11px;
}


/*== swiper ===========*/
.swiper-pagination-bullet-active {
   background: #ee7a00;
}

.swiper-button-prev,
.swiper-button-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   margin-top: 0;
   cursor: pointer;
   outline: none;
   height: 20px;
   width: 20px;
   z-index: 800;
}
.swiper-button-prev {
   left: -1.5%;
   content: url(../images/img-slide-left.svg);
   vertical-align: middle;
}

.swiper-button-next {
   right: -1.5%;
   content: url(../images/img-slide-right.svg);
   vertical-align: middle;
}

/*--------------------------------
   コンセプト 理由3
--------------------------------*/
.p-reason3 {
   position: relative;
   z-index: 600;
   margin-top: -90px;
   padding: 100px 0 0;
}

.p-reason3__img img{
   margin: 50px auto 20px;
}

.p-reason3__list { margin-top: 40px; }
.p-reason3__list li {
   text-indent: -1em;
   padding-left: 1em;
   margin-bottom: 10px;
   line-height: 1.875;
}
.p-reason3__list li:last-of-type { margin-bottom: 0; }


@media(max-width: 478px) {
   .p-reason3__img img{
       margin: 35px auto;
   }
   .p-reason3__list { margin-top: 20px; }
}

/*--------------------------------
   サービス
--------------------------------*/
#p-service {
   padding: 130px 0 100px;
   margin-top: -105px;
}

.p-service__list {
   display: flex;
   justify-content: space-between;
   margin-top: 40px;
   flex-wrap : wrap;
   gap: 20px;
}
.p-service__list::after {
   content:"";
   display: block;
   width:30%;
}

.p-service__item {
   width: 30%;
   max-width: 340px;
   padding: 20px 15px 15px;
   text-align: center;
   background: #fff;
}

.p-service__item h3 {
   margin-bottom: 10px;
   line-height: 1.6;
   font-size: 20px;
}
.p-service__item .p-service__ttl {
   line-height: 3.2;
}

.p-service__txt {
   margin: 30px auto 0;
   max-width: 830px;
   font-size: 22px;
   text-align: center;
   margin-top: 35px;
   font-weight: bold;
   color: #ee7a00;
}
@media(max-width: 1024px) {
   #p-service {
       padding: 120px 0 80px;
       margin-top: -80px;
   }
}

@media(max-width: 768px) {
   #p-service {
       padding: 80px 0;
       margin-top: -60px;
   }
   .p-service__list { gap: 10px; }
   .p-service__item,
   .p-service__list:after { width: 48%; } 
}
@media(max-width: 600px) {
}
@media(max-width: 478px) {
   #p-service {
       padding: 55px 0 60px;
       margin-top: -35px;
   }
   .p-service__item h3 {
       line-height: 1.4;
       font-size: 16px;
       letter-spacing: -0.01em;
   }
   .p-service__item { padding: 15px; }
   .p-service__txt {
       font-size: 16px;
   }
}

/*--------------------------------
   施工事例
--------------------------------*/
#p-works { 
   padding: 20px 0 50px;
}
.p-works__inner {
   position: relative;
   margin:30px auto 0;
}
.p-works__txt { 
   margin-top:10px; 
   text-align: center;
}

.p-works .p-works__slide {
   transform: translate(-50%,0);
}

.p-works__slide img {
   border-radius: 15px;
}
.p-works .p-works__pagination {
   bottom: -30px;
}
.p-works .swiper-pagination-bullet {
   width:20px;
   height:6px;
   border-radius: 0;
}

@media(max-width: 600px) {
   .p-works__txt { font-size:14px; }
   .p-works .p-works__slide {
       transform: translate(0,0);
   }
}
@media(max-width: 478px) {
   #p-works {
       padding: 0 0 30px;
   }
}

/*--------------------------------
   お問い合わせ
--------------------------------*/
#p-contact {
   padding: 40px 0 120px;
}
.p-contact__tel {
   max-width: 650px;
   margin: 50px auto 0;
   padding: 35px 0;
   border-top: double; 
   border-bottom: double; 
   text-align: center;
}

.p-contact__tel p:nth-of-type(2) {
   font-size: 36px;
   font-weight: bold;
}
.p-contact__tel-inner {
   display: flex;
   justify-content: center;
   align-items: flex-end;
}
.p-contact__tel-inner a {
   color:#333;
   text-decoration:none;
   line-height: 1.4;
}
.p-contact__tel-txt {
   font-size: 22px;
}

form {
   margin: 40px auto 0;
   max-width: 900px;
   width: 100%;
}
table {
   width: 100%;
}
tr {
   margin-top: 30px;
   display: flex;
   gap: 40px;
}

tr td {
   flex: 1;
   width: 100%;
}
tr th span:nth-of-type(1) {
   width: 140px;
   text-align: left;
   display: inline-block;
   font-size: 18px;
}
.p-contact__note {
   background: #a9000d;
   color: #fff;
   padding: 5px 15px;
   font-weight: 400;
   display: inline-block;
   margin-left: 20px;
}

.error {
   color: #a9000d;
   text-align: left;
   font-weight: 500;
}
table input[type="text"]::placeholder,
table input[type="email"]::placeholder,
table textarea::placeholder {
   color: #888;
}
table input[type="text"],
table input[type="email"],
table textarea {
   padding: 7px 20px;
   width: 100%;
   color: #111;
   line-height: 1.6;
   font-weight: bold;
   font-size: 18px;
}

.p-contact__btn {
   position: relative;
   display: inline-block;
   margin-top: 55px;
   vertical-align: middle;
   width: 100%;
   max-width: 390px;
   border-radius: 30px;
   background: linear-gradient(0deg, #FF554F 0%, #FF9146 50%, #FBCF29 100%);
   box-shadow: 5px 5px #BF5700;
   cursor: pointer;
   border: none;
   transition: 0.3s ease-in-out;
}

.p-contact__btn input[type="submit"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: 0;
   border: none;
   outline: none;
   background: transparent;
   font-weight: bold;
   font-size: 16px;
   color: #fff;
   padding: 1.3rem 4rem;
   width: 100%;
   cursor: pointer;
}

.p-contact__btn:hover {
   box-shadow: none;
   transform: translate(5px, 5px);
}

.p-contact__btn:before {
   content: '';
   position: absolute;
   top: 50%;
   left: calc(100% - 75%);
   transform: translateY(-50%);
   border: 9px solid transparent;
   border-left: 12px solid #fff;
   z-index: 10;
   transition: 0.3s ease-in-out;
}

.p-contact__btn:hover:before {
   top: 50%;
   left: calc(100% - 74%);
   transition: 0.3s ease-in-out;
}

@media(max-width: 768px) {
   form {
       margin: 15px auto 0;
       max-width: 675px;
   }
   tr {
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
       margin-top: 30px;
       letter-spacing: 0;
   }
   /*td {  width: 100%; }*/

   table input[type="text"], 
   table input[type="email"], 
   table textarea {
       font-size: 16px;
   }

   tr th span:nth-of-type(1) { width: 130px; }
}
@media(max-width: 478px) {
   .p-contact__tel-txt {font-size: 18px;}
   .p-contact__tel p:nth-of-type(2) {font-size: 30px;}

   .p-contact__tel-inner a span.p-contact__tel-num {
       font-size: 24px;
   }
   .p-contact__tel-inner a { letter-spacing: -.03em; }
   
   tr th span:nth-of-type(1) {
       font-size: 16px;
       width: 115px;
   }

   .p-contact__note {
       font-size: 14px;
       padding: 5px 10px;
   }
   table input[type="text"],
   table input[type="email"],
   table textarea {
       font-size: 16px;
   }
}

/*--------------------------------
   店舗情報
--------------------------------*/
#p-shop {
   padding: 30px 0 60px;
}
.p-shop__wrap {
   max-width: 900px;
   width: 100%;
   margin: 40px auto;
}
.p-shop__name {
   font-size: 20px;
   padding: 15px 20px;
   font-weight: bold;
   margin-top: 40px;
   color: #54585a;
}

.p-shop__access {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   margin-top: 40px;
}
.p-shop__access img {
   width: 48%;
}
.p-shop__access img,
.p-shop__access iframe {
  flex: 1 1 48%;
  max-width: 48%;
}
.p-shop__item {
   margin-top: 40px;
   display: flex;
   gap: 20px;
   border-bottom: 1px solid #e4e4e4;
   padding: 10px 15px;
   color: #54585a;
   font-size: 18px;
}
.p-shop__item p:nth-of-type(1) {
   min-width: 100px;
}
.p-shop__item a {
   display: inline;
   color: #54585a;
}
.p-shop__note {
   text-indent: -1.5em;
   padding-left: 1.5em;
}
@media(max-width: 700px) {
   .p-shop__access { flex-direction: column; }
   .p-shop__access img,
    .p-shop__access iframe {
        width: 100%;
        max-width: 100%;
    }
    .p-shop__access iframe {
        aspect-ratio: 16 / 9;
    }

}
@media(max-width: 600px) {
   .p-shop__name { font-size: 18px; }
}
@media(max-width: 478px) {
   #p-shop {
       padding: 0 0 60px;
   }
   #p-contact { padding: 20px 0 80px; }
   .p-shop__item p:nth-of-type(1) { min-width: 80px; }

   .p-shop__item { 
       gap: 10px; 
       font-size: 16px;
   }

   .p-shop__name {
       line-height: 1.6;
       letter-spacing: -.01em;
       padding: 10px 20px;
   } 
}


/*--------------------------------
  店舗ページへ
--------------------------------*/
.c-store-site {
   position: relative;
   width: 100%;
   background: url(../images/img-store-bg.jpg);
   background-size: cover;
   background-position: center bottom;
}
.c-store-site__link {
   width: 50%;
   min-width: 550px;
   background:rgba(200,75,0,0.6);
   padding: 130px 10px;
   text-align: center;
}
.c-store-site__link p {
   color: #fff;
   font-size: 20px;
   font-weight: bold;
}
.c-store-site__link a {
   color: #ee7a00;
   background: #fff;
   vertical-align: middle;
   position: relative;
   width: 310px;
   margin: auto;
   padding: 1rem 3rem;
   font-weight: bold;
   box-shadow: 5px 5px #fd9646;
   margin-top: 30px;
   transition: 0.3s ease-in-out;
}
.c-store-site__link a:hover {
   box-shadow: none;
   transform: translate(5px, 5px);
}
@media(max-width: 768px) {
   .c-store-site__link {
       width: 100%;
       min-width: auto;
   }
}

@media(max-width: 478px) {
   .c-store-site__link p { font-size: 16px; }
   .c-store-site__link a { width: 90%; }   
}

/*--------------------------------
   フッター
--------------------------------*/
#l-footer {
   padding: 40px 0;
}
.l-footer__logo { text-align: center; }
.l-footer__logo img {
   max-width: 500px;
   width: 100%;
}
.l-footer__nav {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 30px;
   margin-top: 20px;
   font-size: 14px;
}
.l-footer__nav a { color: #333; }
@media(max-width: 768px) {
   .l-footer__nav { gap: 20px; }
   .l-footer__nav a { font-size: 14px; }
}


/*--------------------------------
   完了画面
--------------------------------*/
.p-completion p {
   margin-top: 10px;
}
.p-completion__ttl {
   border-bottom: 2px solid #ee7a00;
   margin: 40px auto 30px;
   text-align: center;
}
.p-completion__ttl img {
   width: 230px;
}
.p-completion__ttl p {
   font-size: 24px;
   font-weight: bold;
   margin: 30px auto;
   color: #ee7a00;
}

.p-completion__note {
   background: #f2f2f2;
   padding: 40px 60px;
   margin-top:30px;
   line-height: 1.7;
}
.p-completion .c-form-link {
   padding-bottom: 60px;
}
@media(max-width: 478px) {
   .p-completion__ttl img { width: 170px; }
   .p-completion__ttl p {font-size: 17px; letter-spacing: -.01em;}
   .p-completion__note {padding: 30px;}

}


/*--------------------------------
   追従ボタン
--------------------------------*/
.p-fix {
   position: fixed;
   bottom: 2%;
   right: 2%;
   transform: translate(-2%,-2%);
   z-index: 900;
   display: flex;
   flex-direction: column;
   gap: 20px;
   transition: .5s;
}

.p-fix div {
   width: 90px;
   transition: .5s;
}

.p-fix div:hover {
   transform: scale(1.2);
}

.js-fix-hidden {
   visibility: hidden;
   opacity: 0;
}

@media(max-width: 768px) {
   .p-fix div {width: 80px;}
}
@media(max-width: 478px) {
   .p-fix div { width: 65px; }
}

/*--------------------------------
   共通
--------------------------------*/
/* --- 要素 --- */
.c-ttl { 
   padding-top: 50px; 
   text-align: center;
}
.c-ttl h2 {
   font-size: 32px; 
   line-height: 1.5; 
   letter-spacing: 0.2em;
   color: #ee7a00;
}

@media(max-width: 478px) { 
   .c-ttl h2 {font-size: 28px;}
}

/* --- フォームリンク --- */
.c-form-link {
   padding: 40px 0 60px;
   text-align: center;
}
.p-works .c-form-link {
   margin-top: 35px;
}

.c-form-link p {font-size: 20px;}
.c-form-link__btn {
   vertical-align: middle;
   position: relative;
   width: 390px;
   margin: auto;
   padding: 1.3rem 4rem;
   font-weight: bold;
   border-radius: 30px;
   background: linear-gradient(0deg, #FF554F 0%, #FF9146 50%, #FBCF29 100%);
   box-shadow: 5px 5px #BF5700;
   margin-top: 20px;
   transition: 0.3s ease-in-out;
}
.c-form-link__btn:hover {
   box-shadow: none;
   transform: translate(5px, 5px);
}

.c-form-link__btn:before {
   content: '';
   position: absolute;
   top: 50%;
   left: calc(100% - 75%);
   transform: translateY(-50%);
   border: 9px solid transparent;
   border-left: 12px solid #fff;
}

@media(max-width: 478px) { 
   .c-form-link p {font-size: 16px;}
   .c-form-link__btn {width: 100%;}
}

/* --- フォント --- */

.txt-bold { font-weight: bold;}

.c-txt-center {text-align: center!important;}
.c-txt-left {text-align: left!important;}
.c-txt-right {text-align: right!important;}
.c-txt-just {text-align: justify!important;}


/* --- フォントカラー --- */
.txt-white {color: #fff!important;}
.txt-pink {color: #d1268c!important;}
.txt-orange {color: #ee7a00;}


/* --- 背景色 --- */
.c-bg-black {background: #333;}
.c-bg-white {background: white;}
.c-bg-orange {background: #ee7a00;}
.c-bg-beige {background: #F9F7F1;}