@charset "utf-8";
/* ========================================================================================

   Name: common.css
   Description: Common Style Sheet for Asahi house REASON PAGE

======================================================================================== */

main a {
   transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
main a:hover {
   color: #F39800;
}

.u-button-arrow a::after {
  display: inline-block;
  content: "→";
  color: #ffffff;
  background-color: #F39800;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 8px;
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  flex-shrink: 0;
}

.u-button-arrow a:hover::after {
   transform: scale(1.1);
}

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

   .u-button-arrow a::after {
      display: inline-block;
      content: "→";
      color: #ffffff;
      background-color: #F39800;
      border-radius: 50%;
      width: 46px;
      height: 46px;
      text-align: center;
      box-sizing: border-box;
      padding-top: 8px;
      font-size: 20px;
      font-weight: 600;
      margin-left: 20px;
      transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      line-height: 1.5em;
   }

   .u-button-arrow a:hover::after {
      transform: scale(1.0);
   }

}


#reason article.inner {
   padding: 0;
}

#reason main header {
   box-sizing: border-box;
   /*
   max-width: 1080px;
   max-width: 1162px;
   */
   margin: 0 auto;
   margin: 0 auto;
   overflow: hidden;
}

body#reason main > article > header .triangle {
   top: inherit;
   bottom: -10px;
}
body#reason main > article > header .triangle img:nth-child(2) {
   z-index: 1;
}

body#reason main > article > header .inner {
   height: auto;
   padding-top: 50px;
   padding-left: 66px;
   padding-right: 66px;
   padding-bottom: 190px;
   max-width: 1162px;
   margin: auto;
}

body#reason main > article > header .inner .l-page-title {
   position: relative;
   top: inherit;
   height: 300px;
   border-radius: 10px;
   background: url(../img/pct_main.jpg) no-repeat center center;
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
body#reason main > article > header .inner .l-page-title.image2 {
   background: url(../img/pct_main2.jpg) no-repeat center center;
   background-size: cover;
}

body#reason main > article > header .inner h1 {
   position: relative;
   top: inherit;
   left: inherit;
   right: inherit;
   bottom: inherit;
   background-color: rgba(45,196,189,0.8);
   background-color: rgba(243,152,0,0.8);
   padding: 23px 30px 17px;
}
body#reason main > article > header .inner h1 span {
   display: block;
}
body#reason main > article > header .inner h1 span.main {
   font-size: 35px;
}
body#reason main > article > header .inner h1 span.sub {
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 24px;
   font-style: italic;
   margin-top: 13px;
}
body#reason main > article > header .inner .illust {
   position: absolute;
   left: 50%;
   top: 269px;
   z-index: 2;
   /*transform: translate(-50%, -50%);*/
   transform: translateX(-50%);
}

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

   body#reason main > article > header .inner {
      padding: 20px 20px 200px;
   }

   body#reason main > article > header .inner .l-page-title {
      position: relative;
      top: inherit;
      height: 97px;
      border-radius: 10px;
      background: url(../img/pct_main.jpg) no-repeat center center;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   body#reason main > article > header .inner .l-page-title.image2 {
      background: url(../img/pct_main2.jpg) no-repeat center center;
      background-size: cover;
   }

   body#reason main > article > header .inner h1 {
      position: relative;
      top: inherit;
      left: inherit;
      right: inherit;
      bottom: inherit;
      background-color: rgba(45,196,189,0.8);
      background-color: rgba(243,152,0,0.8);
      padding: 12px 15px 10px;
   }
   body#reason main > article > header .inner h1 span {
      display: block;
   }
   body#reason main > article > header .inner h1 span.main {
      font-size: 18px;
   }
   body#reason main > article > header .inner h1 span.sub {
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 13px;
      font-style: italic;
      margin-top: 1px;
   }
   body#reason main > article > header .inner .illust {
      position: absolute;
      left: 50%;
      top: 85px;
      z-index: 2;
      /*transform: translate(-50%, -50%);*/
      transform: translateX(-50%);
      width: 100%;
   }
   body#reason main > article > header .inner .illust img {
      width: 370px;
   }

}




#reason footer aside {
   display: none;
}

#reason .main_inner {
   box-sizing: border-box;
   width: auto;
   overflow: hidden;
}
#reason .main_inner section {
   box-sizing: border-box;
   position: relative;
}

#reason .main_inner section .sec-inner {
   width: auto;
   max-width: 1080px;
   margin: 0 auto;
   padding-left: 30px;
   padding-right: 30px;
}

#reason .main_inner section .sec-inner img {
   width: 100%;
   height: auto;
}


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

   #reason footer aside {
      display: none;
   }

   #reason .main_inner {
      box-sizing: border-box;
      width: auto;
      margin: 0;
      z-index: 10;
      overflow: visible;
   }
   #reason .main_inner section {
      box-sizing: border-box;
      position: relative;
   }

   #reason .main_inner section .sec-inner {
      width: auto;
      padding-left: 20px;
      padding-right: 20px;
   }
   #reason .main_inner section.sec-reason2 .sec-inner {
      margin-top: -50px;
   }

   #reason .main_inner section .sec-inner img {
      width: 100%;
      height: auto;
   }

}


.sec-reason2,
.sec-reason3 {
	background-color: #FAF8F0;
}

#reason .sec-inner h2 strong {
   color: #F39802;
}

.sec-heading {
   position: relative;
}
.sec-heading h2 span {
   display: block;
}
.sec-heading h2 .sub {
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 27px;
   font-weight: 600;
   color: #2DC4BD;
}
.sec-heading h2 .main {
   font-size: 60px;
   font-weight: 500;
   line-height: 1.67em;
   letter-spacing: 0.05em;
   position: relative;
   z-index: 5;
}

.sec-reason1 {
   padding-top: 100px;
   padding-bottom: 240px;
   z-index: 11;
}

.sec-reason1 .sec-heading h2 {
   position: relative;
   padding-left: 135px;
}
.sec-reason1 .sec-heading h2 .sub {
   position: absolute;
   left: 0;
   top: 20px;
   z-index: 6;
   writing-mode: vertical-rl;
}

.sec-reason1 .sec-body-text {
   padding-top: 20px;
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

   .sec-heading h2 .main {
      font-size: clamp(1.25rem, -4.876rem + 12.78vw, 3.75rem);
   }
   
}

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

   .sec-reason2,
   .sec-reason3 {
      background-color: #FAF8F0;
   }

   #reason .sec-inner h2 strong {
      color: #F39802;
   }

   .sec-heading {
      position: relative;
   }
   .sec-heading h2 span {
      display: block;
   }
   .sec-heading h2 .sub {
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 26px;
      font-weight: 600;
      color: #2DC4BD;
   }
   .sec-heading h2 .main {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.5em;
      letter-spacing: 0.05em;
      position: relative;
      z-index: 5;
      margin-top: 20px;
   }

   .sec-reason1 {
      padding-top: 50px;
      padding-bottom: 100px;
      z-index: 11;
   }

   .sec-reason1 .sec-heading h2 {
      position: relative;
      padding-left: 0;
   }
   .sec-reason1 .sec-heading h2 .sub {
      position: inherit;
      left: auto;
      top: auto;
      z-index: 6;
      writing-mode:inherit;
   }
   .sec-reason1 .sec-body {
      flex-direction: column;
   }
   .sec-reason1 .sec-body-text {
      padding-top: 10px;
   }

}



.sec-reason2 {
   /*padding-top: 400px;*/
   padding-top: 30px;
   padding-bottom: 200px;
   z-index: 10;
}
#reason .main_inner .sec-reason2 .sec-inner {
   /*margin-top: -630px;*/
}
.sec-reason2 .sec-heading {
   position: relative;
}
.sec-reason2 .sec-heading::before {
   position: absolute;
   content: "";
   width: 52.21px;
   height: 71.72px;
   background: url(../img/pct_reason2_worker.svg) no-repeat;
   left: -25px;
   bottom: -57px;
}
.sec-reason2 .sec-heading::after {
   position: absolute;
   content: "";
   width: 124px;
   height: 122.92px;
   background: url(../img/pct_reason2_excavator.svg) no-repeat;
   right: 53%;
   top: 0;
}
.sec-reason2 .sec-heading h2 {
   position: relative;
   padding-left: 30px;
}
.sec-reason2 .sec-heading h2 .sub {
}
.sec-reason2 .sec-heading h2 .main {
   margin-top: 40px;
}

.sec-reason2 .sec-heading .photo {
   position: absolute;
   width: 50%;
   right: 0;
   top: 0;
   border-radius: 10px;
   overflow: hidden;
}


@media screen and (min-width: 768px) and (max-width: 1079px) {

   .sec-reason2 .sec-heading h2 .main {
      font-size: clamp(1.25rem, -4.876rem + 12.78vw, 3.75rem);
   }
   
}

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

   .sec-reason2 {
      padding-top: 0;
      padding-bottom: 80px;
      z-index: 10;
   }
   #reason .main_inner .sec-reason2 .sec-inner {
      /*margin-top: -630px;*/
   }
   .sec-reason2 .sec-heading {
      position: relative;
   }
   .sec-reason2 .sec-heading::before {
      position: absolute;
      content: "";
      width: 45.78px;
      height: 62.88px;
      background: url(../img/pct_reason2_worker.svg) no-repeat;
      background-size: contain;
      left: auto;
      right: 37px;
      bottom: auto;
      top: 86px;
   }
   .sec-reason2 .sec-heading::after {
      position: absolute;
      content: "";
      width: 67.65px;
      height: 67.06px;
      background: url(../img/pct_reason2_excavator.svg) no-repeat;
      background-size: contain;
      right: 0;
      top: 0;
   }
   .sec-reason2 .sec-heading h2 {
      position: relative;
      padding-left: 0;
   }
   .sec-reason2 .sec-heading h2 .sub {
   }
   .sec-reason2 .sec-heading h2 .main {
      margin-top: 20px;
   }

   .sec-reason2 .sec-heading .photo {
      position: inherit;
      width: auto;
      right: inherit;
      top: inherit;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 25px;
   }

   .sec-reason2 .u-button-arrow.sp_only {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 0.1em;
      padding: 10px 0;
      margin-top: 30px;
   }

}



.sec-reason3 {
   padding-top: 70px;
   padding-bottom: 200px;
}
.sec-reason3 .gallery {
   position: relative;
   z-index: 10;
   display: flex;
   gap: 10px;
   align-items: flex-end;
   margin-top: -130px;
}
.sec-reason3 .gallery li {
   border-radius: 10px;
   overflow: hidden;
}
.sec-reason3 .sec-heading {
   text-align: center;
   margin-top: 80px;
}
.sec-reason3 .sec-heading h2 .main {
   margin-top: 30px;
}
.sec-reason3 .sec-heading h3 {
   font-size: 30px;
   font-weight: 400;
   line-height: 1.67em;
   margin-top: 30px;
}
.sec-reason3 .sec-body-text {
   margin-top: 15px;
}
.sec-reason3 .note {
   text-align: center;
   font-size: 12px;
   line-height: 1.33em;
   padding-left: 5em;
}


@media screen and (min-width: 768px) and (max-width: 1079px) {

   .sec-reason3 .sec-heading h3 {
      font-size: clamp(1.5rem, 0.581rem + 1.92vw, 1.875rem)
   }
   
}

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

   .sec-reason3 {
      padding-top: 70px;
      padding-bottom: 80px;
   }
   .sec-reason3 .sec-inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
   }
   .sec-reason3 .gallery {
      position: relative;
      z-index: 10;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: flex-start;
      margin-top: 0;
      order: 2;
   }
   .sec-reason3 .gallery li {
      border-radius: 10px;
      overflow: hidden;
      width: calc(50% - 5px);
   }
   .sec-reason3 .gallery li:nth-child(1) {
      width: 100%;
   }
   .sec-reason3 .gallery li:nth-child(2) {
      width: calc(55% - 5px);
   }
   .sec-reason3 .gallery li:nth-child(3) {
      width: calc(45% - 5px);
   }
   .sec-reason3 .sec-heading {
      text-align: center;
      margin-top: 0;
      order: 1;
   }
   .sec-reason3 .sec-heading h2 .main {
      margin-top: 30px;
   }
   .sec-reason3 .sec-heading h3 {
      display: none;
   }
   .sec-reason3 .sec-body {
      order: 3;
   }
   .sec-reason3 .sec-body-text {
      margin-top: 0;
   }
   .sec-reason3 .note {
      text-align: center;
      font-size: 12px;
      line-height: 1.33em;
      padding-left: 0;
      margin-top: 10px;
   }

}




.sec-body {
   display: flex;
   gap: 7.4%;
   margin-top: 80px;
   position: relative;
   z-index: 10;
}
.sec-body > div {
   flex: 1;
}
.sec-body-image ul {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.sec-body-image ul li {
   width: calc(50% - 5px);
   border-radius: 10px;
   overflow: hidden;
}
.sec-body-image ul li:nth-child(1) {
   width: 100%;
}

.sec-body-text h3 {
   font-size: 30px;
   font-weight: 400;
   line-height: 1.67em;
}
.sec-body-text p {
   font-size: 18px;
   line-height: 2.11em;
   letter-spacing: 0.1em;
   margin-top: 30px;
}
.sec-body .u-button-arrow {
   margin-top: 30px;
   text-align: right;
   margin-right: 80px;
}
.sec-body .u-button-arrow a {
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
   letter-spacing: 0.1em;
   padding: 10px 0;
}
.sec-body .u-button-arrow a:hover {
   color: #000000;
}

.sec-reason3 .sec-body {
   margin-top: 10px;
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

   .sec-body-text h3 {
      font-size: clamp(1.5rem, 0.581rem + 1.92vw, 1.875rem);
   }
   .sec-body-text p {
      font-size: clamp(0.938rem, 0.478rem + 0.96vw, 1.125rem)
   }
   
}


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

   .sec-body {
      display: flex;
      flex-direction: column-reverse;
      gap: 20px;
      margin-top: 30px;
      position: relative;
      z-index: 10;
   }
   .sec-body > div {
      flex: 1;
   }
   .sec-body-image ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }
   .sec-body-image ul li {
      width: calc(50% - 5px);
      border-radius: 10px;
      overflow: hidden;
   }
   .sec-body-image ul li:nth-child(1) {
      width: 100%;
   }

   .sec-body-text h3 {
      font-size: 24px;
      font-weight: 400;
      line-height: 1.58em;
   }
   .sec-body-text p {
      font-size: 15px;
      line-height: 2.27em;
      letter-spacing: 0.05em;
      margin-top: 20px;
      padding: 0 10px;
   }
   .sec-body .u-button-arrow {
      margin-top: 25px;
      text-align: center;
      margin-right: 0;
   }
   .sec-body .u-button-arrow a {
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 0.1em;
      padding: 10px 0;
   }
   .sec-body .u-button-arrow a:hover {
      color: #000000;
   }

   .sec-reason2 .sec-body-text .u-button-arrow {
      display: none;
   }

   .sec-reason2 .sec-body-image {
      margin-top: 10px;
   }

   .sec-reason3 .sec-body {
      margin-top: 0;
   }

}



.sec-onlineshop {
   background-color: #2DC4BD;
   padding-top: 50px;
   padding-bottom: 120px;
}

.sec-onlineshop h3 {
   width: 531px;
   position: relative;
   z-index: 3;
}

.triangle {
   width: 100%;
   height: 400px;
   position: absolute;
   top: -200px;
   pointer-events: none;
}
.triangle img {
   position: absolute;
   left: 50%;
   top: 200px;
   transform: translate(-50%, -50%);
   width: 4000px;
   height: 1150px;
   width: 4000px;
   height: 1150px;
}
.triangle img.lr-trancelate {
   transform: translate(-50%, -50%) scaleX(-1);
}

.sec-reason3 .triangle img:nth-child(2) {
   transform: translate(-55%, -50%);
}

@media screen and (max-width: 767px) {
   .sec-reason3 .triangle img:nth-child(2) {
      transform: translate(-50%, -50%);
   }
}

@media screen and (max-width: 1280px){
   .sec-onlineshop::before {
      width: 1280px;
      height: 368px;
   }
   .sec-onlineshop::after {
      width: 1280px;
      height: 368px;
   }
}





.l-onlineshop {
   background-color: #F8F8F8;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   z-index: 5;
}

.l-onlineshop h2 {
   font-size: 35px;
   font-weight: 400;
   line-height: 1.67em;
}
.l-onlineshop h2 strong {
   font-weight: 400;
}
.l-onlineshop-official {
   display: flex;
   gap: 50px;
   padding: 80px 60px 40px;
}
.l-onlineshop-official > div {
   flex: 1;
}
.l-onlineshop-official .left ul {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.l-onlineshop-official .left ul li {
   box-sizing: border-box;
   width: calc((100% - 20px) / 3);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   border-radius: 10px;
   overflow: hidden;
   padding: 18px 15px;
   background-color: #ffffff;
}
.l-onlineshop-official .left ul img {
   width: 100%;
   height: auto;   
   image-rendering: pixelated; /* Chrome, Edge, Safari用 */
   image-rendering: crisp-edges; /* Firefox用 */
}

.l-onlineshop-mall {
   padding: 0 100px 40px;
}
.l-onlineshop-mall ul {
   display: flex;
   padding: 15px 0;
}
.l-onlineshop-mall ul li {
   position: relative;
}
.l-onlineshop-mall ul li::before {
   content: "";
   position: absolute;
   width: 1px;
   height: 50px;
   background-color: #D1D1D1;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
}
.l-onlineshop-mall ul li:nth-child(1)::before {
   display: none;
}

main .button-official {
   margin-top: 32px;
}

main .button-official a {
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-decoration: none;
   border: 2px #F39802 solid;
   border-radius: 10px;
   width: 100%;
   background-color: #ffffff;
   box-sizing: border-box;
   padding: 20px;
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

   .l-onlineshop h2 {
      font-size: clamp(1.5rem, 0.275rem + 2.56vw, 2rem);
   }
   
}

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

   .sec-onlineshop {
      background-color: #2DC4BD;
      padding-top: 50px;
      padding-bottom: 60px;
   }

   .sec-onlineshop h3 {
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      position: relative;
      z-index: 3;
   }

   .l-onlineshop {
      background-color: #F8F8F8;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      z-index: 5;
   }

   .l-onlineshop h2 {
      font-size: 24px;
      font-weight: 400;
      line-height: 1.67em;
   }
   .l-onlineshop h2 strong {
      font-weight: 400;
   }
   .l-onlineshop-official {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding: 40px 20px 20px;
   }
   .l-onlineshop-official > div {
      flex: 1;
   }
   .l-onlineshop-official .left ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }
   .l-onlineshop-official .left ul li {
      box-sizing: border-box;
      width: calc((100% - 20px) / 3);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      overflow: hidden;
      padding: 8px 6px;
      background-color: #ffffff;
   }
   .l-onlineshop-official .left ul img {
      width: 100%;
      height: auto;   
      image-rendering: pixelated; /* Chrome, Edge, Safari用 */
      image-rendering: crisp-edges; /* Firefox用 */
   }

   .l-onlineshop-mall {
      padding: 0 20px 40px;
   }
   .l-onlineshop-mall ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 15px 0 0;
   }
   .l-onlineshop-mall ul li {
      position: relative;
      width: 50%;
   }
   .l-onlineshop-mall ul li::before {
      content: "";
      position: absolute;
      width: 1px;
      height: auto;
      background-color: #D1D1D1;
      margin: auto;
      top: 10px;
      bottom: 10px;
      left: 0;
   }
   .l-onlineshop-mall ul li:nth-child(1)::before ,
   .l-onlineshop-mall ul li:nth-child(3)::before {
      display: none;
   }

   main .button-official {
      margin-top: 32px;
   }

   main .button-official a {
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-decoration: none;
      border: 2px #F39802 solid;
      border-radius: 10px;
      width: 100%;
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 20px 16px 20px 20px;
   }

   main .button-official a::after {
      margin-left: 10px;
      line-height: 1.48em;
   }

}





.l-sns {
   background-color: #ffffff;
   border-radius: 10px;
   display: flex;
   margin-top: 70px;
   box-sizing: border-box;
   gap: 20px;
   padding: 0 60px 0 7.8%;
}
.l-sns > * {
   flex: 1;
}
.l-sns > h4 {   
   width: 40%;
}
.l-sns > h4 img {
   max-width: 312px;
}
.l-sns > ul {
   display: flex;
   align-items: center;
   gap: 60px;
}
.l-sns > ul li {
   flex: 1;
}
.l-sns > ul li:nth-child(1) img {
   max-width: 197px;
}
.l-sns > ul li:nth-child(2) img {
   max-width: 135px;
}

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

   .l-sns {
      background-color: #ffffff;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      box-sizing: border-box;
      gap: 50px;
      padding: 0 10px 50px;
   }
   .l-sns > * {
      flex: 1;
   }
   .l-sns > h4 {   
      width: auto;
   }
   .l-sns > h4 img {
      max-width: 312px;
   }
   .l-sns > ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
   }
   .l-sns > ul li {
      flex: 1;
   }
   .l-sns > ul li:nth-child(1) img {
      max-width: 197px;
   }
   .l-sns > ul li:nth-child(2) img {
      max-width: 135px;
   }

}


.sec-contact {
   background-color: #F39802;
   padding-bottom: 18.52vw;
}

@media screen and (min-width: 1140px){
   .sec-contact {
      padding-bottom: 200px;
   }
}

.sec-contact h3 {
   width: 370px;
   margin-left: auto;
}

.sec-contact h2 {
   font-size: 40px;
   font-weight: 600;
   line-height: 1.75em;
   color: #ffffff;
   margin-top: 100px;
}
.sec-contact h3 {
   text-align: right;
}

.sec-contact .l-menu {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin-top: 45px;
   justify-content: space-between;
   gap: 40px 0;
}

.sec-contact .l-menu > div {
   box-sizing: border-box;
   background-color: #ffffff;
   border-radius: 10px;
   padding: 60px 40px;
   width: 48%;
}
.sec-contact .l-menu > div.both {
   width: 100%;
   padding: 20px 40px;
}

.sec-contact .l-menu > div h4 span {
   display: block;
}
.sec-contact .l-menu > div h4 span:nth-child(1) {
   color: #F39802;
   font-size: 14px;
   font-weight: 500;
   font-family: 'Roboto', sans-serif;
   letter-spacing: 0.1em;
}
.sec-contact .l-menu > div h4 span:nth-child(2) {
   font-size: 30px;
   font-weight: 400;
   line-height: 1.67em;
}

.sec-contact .l-menu ul {
   margin-top: 30px;
}
.sec-contact .l-menu > div.both ul {
   margin-top: 0;
   display: flex;
   gap: 30px;
}
.sec-contact .l-menu ul li {
   border-bottom: 1px #E5E5E5 solid;
}
.sec-contact .l-menu .both ul li {
   flex: 1;
   border: none;
}
.sec-contact .l-menu ul li a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-decoration: none;
   color: #000000;
   font-size: 18px;   
   padding: 20px 5px 20px 0;
}
.sec-contact .l-menu .both ul li a {
   justify-content: center;
}
.sec-contact .l-menu ul li a:hover {
   color: #F39800;
}

@media screen and (min-width: 768px) and (max-width: 1079px) {

   .sec-contact h2 {
      font-size: clamp(1.5rem, -0.95rem + 5.11vw, 2.5rem);
   }
   .sec-contact .l-menu > div h4 span:nth-child(2) {
      font-size: clamp(1.5rem, 0.581rem + 1.92vw, 1.875rem);
   }
   
}

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

   .sec-contact {
      background-color: #F39802;
      padding-bottom: 18.52vw;
   }

   .sec-contact h3 {
      width: auto;
      max-width: 260px;
      margin: 0 auto 0 0;
   }

   .sec-contact h2 {
      font-size: 24px;
      font-weight: 400;
      line-height: 1.75em;
      color: #ffffff;
      margin-top: 22px;
   }
   .sec-contact h3 {
      text-align: right;
   }

   .sec-contact .l-menu {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 30px;
      margin-top: 30px;
   }

   .sec-contact .l-menu > div {
      background-color: #ffffff;
      flex: 1;
      border-radius: 10px;
      padding: 40px 20px;
      width: auto;
   }
   .sec-contact .l-menu > div.both {
      width: 100%;
      padding: 20px 20px;
   }

   .sec-contact .l-menu > div h4 span {
      display: block;
   }
   .sec-contact .l-menu > div h4 span:nth-child(1) {
      color: #F39802;
      font-size: 14px;
      font-weight: 500;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 0.1em;
   }
   .sec-contact .l-menu > div h4 span:nth-child(2) {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.67em;
   }

   .sec-contact .l-menu ul {
      margin-top: 20px;
   }
   .sec-contact .l-menu > div.both ul {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
   }
   .sec-contact .l-menu ul li {
      border-bottom: 1px #E5E5E5 solid;
   }
   .sec-contact .l-menu ul li:nth-child(1) {
      border-top: 1px #E5E5E5 solid;
   }
   .sec-contact .l-menu .both ul li {
      border-bottom: 1px #E5E5E5 solid;
   }
   .sec-contact .l-menu ul li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
      color: #000000;
      font-size: 16px;   
      padding: 10px 5px 10px 0;
   }
   .sec-contact .l-menu .both ul li a {
      justify-content: space-between;
   }
   .sec-contact .l-menu ul li a:hover {
      color: #F39800;
   }
   .sec-contact .u-button-arrow a::after {
      line-height: 1.5em;
   }

}



/*-----------------------------------------
　スクロールアニメーション設定
-----------------------------------------*/

[data-aos="aos-reason-basic"] {
  transform: translateY(20px);
  opacity: 0;
  transition: all;
}
[data-aos="aos-reason-basic"].aos-animate {
  transform: translateY(0);
  opacity: 1;
  transition: all;
}

[data-aos="aos-reason-fadein"] {
  opacity: 0;
  transition: all;
}
[data-aos="aos-reason-fadein"].aos-animate {
  opacity: 1;
  transition: all;
}

/*
[data-aos="aos-50th-basic"] {
  filter: blur(20px);
  transform: translateY(20px);
  opacity: 0;
  transition: all;
}
[data-aos="aos-50th-basic"].aos-animate {
  filter: blur(0);
  transform: translateY(0);
  opacity: 1;
  transition: all;
}

[data-aos="aos-50th-left"] {
  filter: blur(20px);
  transform: translateX(200px);
  opacity: 0;
  transition: all;
}
[data-aos="aos-50th-left"].aos-animate {
  filter: blur(0);
  transform: translateX(0);
  opacity: 1;
  transition: all;
}

[data-aos="aos-50th-right"] {
  filter: blur(20px);
  transform: translateX(-200px);
  opacity: 0;
  transition: all;
}
[data-aos="aos-50th-right"].aos-animate {
  filter: blur(0);
  transform: translateX(0);
  opacity: 1;
  transition: all;
}

[data-aos="aos-50th-zoom"] {
  transform: scale(0);
  opacity: 0;
  transition: all;
}
[data-aos="aos-50th-zoom"].aos-animate {
  transform: scale(1);
  opacity: 1;
  transition: all;
}

[data-aos="aos-50th-fadeout"] {
  transform: scale(1);
  opacity: 1;
  transition: all;
}
[data-aos="aos-50th-fadeout"].aos-animate {
  transform: scale(1);
  opacity: 0;
  transition: all;
}

[data-aos="aos-50th-fadein"] {
  transform: scale(1);
  opacity: 0;
  transition: all;
}
[data-aos="aos-50th-fadein"].aos-animate {
  transform: scale(1);
  opacity: 1;
  transition: all;
}
*/