/* index */
 /* html {
   scroll-behavior: smooth;
 } */

 nav ul a::after {
   position: absolute;
   left: 0;
   content: '';
   width: 100%;
   height: 3px;
   background: #068ADB;
   bottom: -1px;
   transform: scale(0, 1);
   transform-origin: right top;
   transition: transform 0.3s;
 }

 nav ul a:hover::after {
   transform: scale(1, 1);
   transform-origin: left top;
 }

 .section .row .col {
   padding: 0 20px;
 }

 .resp-img {
   max-width: 100%;
   height: auto;
 }

 .sp-br {
   display: none;
 }

 .pc-br {
   display: block;
 }

 .section picture {
   display: block;
   text-align: center;
 }

 .section {
   padding: 80px 0px 56px;
 }

 .section.kv {
   background-color: #fff;
   position: relative;
   padding: 120px 0px 80px;
 }

 .section.kv::after {
   content: "";
   width: 100%;
   height: 120px;
   background-color: #c4eefe;
   position: absolute;
   bottom: -1px;
   right: 0;
   clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 99%);
 }

 .section.kv::before {
   content: "";
   width: 100%;
   height: 120px;
   background-color: #c4eefe;
   position: absolute;
   bottom: -1px;
   left: 0;
   clip-path: polygon(50% 99%, 50% 100%, 0 100%, 0 0);
 }

 .section.problem {
   background-color: #C4EEFE;
   position: relative;
 }

 .section.problem::after {
   content: "";
   width: 100%;
   height: 120px;
   background-color: #F8F8F8;
   position: absolute;
   bottom: -1px;
   right: 0;
   clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 99%);
 }

 .section.problem::before {
   content: "";
   width: 100%;
   height: 120px;
   background-color: #F8F8F8;
   position: absolute;
   bottom: -1px;
   left: 0;
   clip-path: polygon(50% 99%, 50% 100%, 0 100%, 0 0);
 }

 .section.point {
   background-color: #F8F8F8;
 }

 .section.message {
   background-color: #F8F8F8;
 }

 .section.capital {
   background-color: #F8F8F8;
   position: relative;
   padding-bottom: 120px;
 }

 .section.cta {
   background-color: #068ADB;
   position: relative;
   color: #fff;
   padding: 64px 0px 16px;
 }

 .section.capital::after {
   content: "";
   width: 100%;
   height: 120px;
   background-color: #fff;
   position: absolute;
   bottom: -1px;
   right: 0;
   clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 99%);
 }

 .section.capital::before {
   content: "";
   width: 100%;
   height: 120px;
   background-color: #fff;
   position: absolute;
   bottom: -1px;
   left: 0;
   clip-path: polygon(50% 99%, 50% 100%, 0 100%, 0 0);
 }

 .section h2 {
   font-size: 32px;
   text-align: center;
   margin-bottom: 64px;
 }

 .section h2::before {
   content: '';
   display: block;
   background: #068ADB;
   width: 56px;
   height: 4px;
   position: absolute;
   left: 50%;
   bottom: -24px;
   translate: -50% 0;
 }

 .section h2::after {
   position: absolute;
   top: -25px;
   left: 33%;
   color: #f8f8f8;
   font-size: 16px;
   text-transform: uppercase;
   content: 'キーワード';
   transform: rotate(-25deg);
   background: #068adb;
   padding: 2px 8px;
 }

 .section.message h2::after {
   left: 33%;
 }

 .section.process h2::after {
   left: 32%;
 }

 .section.capital h2::after {
   left: 35%;
 }

 .kv h1 {
   letter-spacing: 1px;
 }

 .kv h1 b {
   font-size: 64px;
   color: #068ADB;
 }

 .kv img {
   margin-top: 64px;
 }

 .problem .sub_Catch {
   text-align: center;
   font-size: 24px;
   margin-bottom: 8px;
   position: relative;
 }

 .mt24 {
   margin-top: 24px;
 }

 .sub_Body {
   font-size: 20px;
 }

 .problem_Images {
   margin: 48px 0 48px;
 }

 .problem .sub_Catch b {
   font-size: 38px;
   font-weight: 600;
 }

 .point p {
   font-size: 48px;
   font-weight: 600;
   text-align: center;
   margin-bottom: 0px;
   position: relative;
 }

 .point p span.strong {
   color: #068adb;
 }

 .point p::after {
   content: '';
   width: 300px;
   height: 4px;
   display: inline-block;
   background-color: #012554;
   position: absolute;
   top: calc(50% - 2px);
   left: calc(50% + 260px);
 }

 .point p::before {
   content: '';
   width: 300px;
   height: 4px;
   display: inline-block;
   background-color: #012554;
   position: absolute;
   top: calc(50% - 2px);
   right: calc(50% + 260px);
 }

 .message_list {
   position: relative;
   width: 920px;
   margin: 64px auto 0;
   padding-left: 0px;
 }

 .message_item {
   display: flex;
   gap: 48px;
   align-items: flex-start;
   list-style: none;
 }

 .message_itemNumber {
   flex-grow: 0;
   flex-shrink: 0;
   width: 96px;
   height: auto;
 }

 .message_list h3 {
   font-size: 24px;
   line-height: 1.5;
   color: #068ADB;
   letter-spacing: 0.04em;
 }

 .message_item:not(:first-child) {
   padding-top: 40px;
   margin-top: 16px;
   border-top: 1px solid #012554;
 }

 .message_item:nth-child(2)::before {
   content: "";
   background: url(../img/index/message01.png) no-repeat center;
   background-size: 100% auto;
   transform: translate(-100%, -50%);
   position: absolute;
   top: 80px;
   right: -242px;
   width: 240px;
   height: 174px;
 }

 .message_list::after {
   content: "";
   background: url(../img/index/message02.png) no-repeat center;
   background-size: 100% auto;
   transform: translate(100%, 50%);
   position: absolute;
   right: 198px;
   bottom: 150px;
   width: 213px;
   height: 233px;
 }


 .caseStudy {
   width: 920px;
   padding: 0px 0px 0px;
   margin: 80px auto 0;
 }

 .tips_Box {
   position: relative;
   width: 920px;
   padding: 48px 48px 16px;
   margin: 120px auto 0;
   background-color: #FFFFFF;
   text-align: center;
   border-radius: 16px;
   border: 4px solid #068adb;
 }

 .tips_Box p {
   line-height: 1.75;
 }

 .tips_Catch {
   position: absolute;
   top: -32px;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 120px;
   height: 120px;
   font-weight: 600;
   line-height: 1.5;
   color: #fff;
   text-align: center;
   background-color: #068ADB;
   border-radius: 50%;
   box-shadow: 8px 7px #fff;
 }

 .tips_Catch::before {
   position: absolute;
   top: 119px;
   width: 0;
   height: 0;
   content: "";
   border-right: 7px solid;
   border-left: 7px solid;
   border-top: 11px solid #068ADB;
 }

 .tips_Box span.strong {
   font-weight: 600;
   padding-bottom: 4px;
   font-size: 18px;
   background: linear-gradient(transparent 10px, #FFDE81 0);
 }

 .process .process_list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   gap: 40px;
   width: 920px;
   margin: 64px auto 0;
 }

 .process_list li {
   display: grid;
   grid-template-rows: subgrid;
   grid-row: span 2;
   gap: 0px;
   box-shadow: 0 3px 6px #e0e0e0;
   border-radius: 16px;
 }

 .process_list picture {
   margin-bottom: 24px;
 }

 .process_list p {
   margin-bottom: 0px;
 }

 .process_list .process_Heading {
   text-align: center;
   color: #fff;
   background-color: #068ADB;
   margin-bottom: 0px;
   padding: 16px 0;
   border-radius: 16px 16px 0 0;
 }

 .process_Inner {
   padding: 24px 32px;
 }

 .process h3 {
   text-align: center;
   position: relative;
   z-index: 1;
   margin-bottom: 16px;
 }

 .capital .capital_list {
   max-width: 920px;
   margin: 64px auto 0;
 }

 .capital_list li {
   width: 100%;
   display: flex;
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
   filter: drop-shadow(0px 0px 36px rgba(0, 0, 0, 0.04));
   margin-bottom: 64px;
 }

 .capital_Text {
   width: 66%;
   padding: 48px;
 }

 .capital_img {
   width: 34%;
   background: #EFFAFF;
   display: grid;
   place-content: center;
   padding: 60px 0;
 }

 .capital .capital_Listbox {
   border: 1px solid #068ADB;
   padding: 32px 24px;
   border-radius: 8px;
   margin-bottom: 24px;
   line-height: 3.0rem;
   text-align: left;
 }

 .capital .capital_Listbox li {
   margin-bottom: 8px;
   background: none;
   padding-left: 1em;
   text-indent: -1em;
   line-height: 1.5;
 }

 .check h2 {
   font-weight: normal;
   font-size: 28px;
   margin-bottom: 24px;
 }

 .check h2 span.strong {
   font-weight: 600;
   padding-bottom: 4px;
   font-size: 32px;
   background: linear-gradient(transparent 20px, #FFDE81 0);
 }

 .check h2 b {
   font-weight: 600;
   font-size: 32px;
 }

 .check h2::before {
   content: none;
 }

 .check p.sub_Catch {
   text-align: center;
   font-weight: normal;
   font-size: 20px;
   margin: 64px 0 0;
   position: relative;
   display: inline-block;
 }

 .check p.sub_Catch::before {
   content: "";
   position: absolute;
   background: url(../img/index/check_copy_left.svg) no-repeat left center;
   right: 105%;
   top: 0px;
   width: 45px;
   height: 60px;
 }

 .check p.sub_Catch::after {
   content: "";
   position: absolute;
   background: url(../img/index/check_copy_right.svg) no-repeat right center;
   left: 105%;
   top: 0px;
   width: 45px;
   height: 60px;
 }

 .check p.sub_Catch b {
   font-weight: 600;
   font-size: 24px;
 }

 .check p.sub_Catch span.blue {
   color: #068ADB;
 }

 .check .check_list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
   gap: 40px;
   width: 920px;
   margin: 32px auto 0;
 }

 .check .check_list>li {
   padding: 32px 32px 32px;
   background-color: #F8F8F8;
   border-radius: 16px;
   border: 3px solid #068adb;
   display: grid;
   grid-template-rows: subgrid;
   grid-row: span 2;
   gap: 0px;
   position: relative;
 }

 .check .check_list>li picture {
   position: absolute;
   top: -28px;
   left: -28px;
 }

 .check_list h4 {
   font-size: 16px;
   color: #068ADB;
   margin: 0 0 16px 0;
 }

 .check_list ul {
   font-size: 18px;
 }

 .check_list ul li {
   position: relative;
   padding-left: 24px;
   margin-bottom: 8px;
 }

 .check_list ul li::before {
   content: '';
   display: block;
   background: url(../img/index/icon-check.svg) no-repeat left top;
   background-size: 100% 100%;
   width: 19px;
   height: 16px;
   position: absolute;
   left: 0;
   top: 4px;
 }

 .cta .col {
   margin-bottom: 32px;
   text-align: center;
 }

 .floating-banner {
   position: fixed;
   z-index: 99999;
   bottom: 0px;
   right: 40px;
 }

 .floating-banner-inner {
   width: 300px;
   padding: 24px 8px;
   background: #002654;
   color: #fff;
   font-weight: bold;
   text-align: center;
   border-radius: 16px 16px 0 0;
 }

 .floating-banner a {
   text-decoration: none;
 }

 .floating-ttl {
   position: relative;
   margin-bottom: 0px;
   color: #ffde81;
 }

 .floating-ttl:before,
 .floating-ttl:after {
   position: relative;
   display: inline-block;
   content: "";
   background: #FFDE81;
   width: 2px;
   height: 2em;
   margin: 0 1em;
   margin-top: -.2em;
   vertical-align: middle;
 }

 .floating-ttl:before {
   transform: rotate(-35deg);
 }

 .floating-ttl:after {
   transform: rotate(35deg);
 }

 .floating-copy {
   font-size: 18px;
   margin: 0 auto 8px;
   color: #fff;
 }

 .floating-btn {
   display: inline-block;
   width: 200px;
   height: 28px;
   line-height: 28px;
   font-size: 15px;
   background: #FFDE81;
   border-radius: 14px;
   margin-bottom: 0px;
   color: #002654;
 }

 .is-hidden {
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease 0s;
 }


 @media screen and (max-width: 990px) {
   /* .floating-banner {
     display: none;
   } */
 }

 /* スマートフォン：max-width : 599px */
 @media screen and (max-width: 599px) {
   .brand-logo img {
     max-width: 100px;
     height: auto;
   }

   .sp-br {
     display: block;
   }

   .pc-br {
     display: none;
   }

   p {
     margin: 0 0 2em;
   }

   .section.kv {
     padding: 80px 0px 8px;
   }

   .section.kv::before,
   .section.kv::after {
     height: 30px;
   }

   .section.problem {
     padding: 24px 0px 8px;
   }

   .section.problem::before,
   .section.problem::after {
     height: 30px;
   }

   .section.capital {
     padding-bottom: 64px;
   }

   .section.capital::before,
   .section.capital::after {
     height: 30px;
   }

   .kv h1 {
     font-size: 24px;
     padding: 40px 0;

   }

   .kv h1 b {
     font-size: 40px;
   }

   .kv img {
     margin-top: 0px;
   }

   .kv .col {
     margin-bottom: 48px;
     text-align: center;
   }

   .problem h5 {
     font-size: 16px;
   }

   .problem .sub_Catch {
     font-size: 20px;
   }

   .problem .sub_Catch b {
     font-size: 24px;
   }

   .problem_Images {
     margin: 24px 0 24px;
   }

   .problem .sub_Body {
     font-size: 16px;
   }

   .section.point {
     padding: 40px 0px 56px;
   }

   .point p {
     font-size: 32px;
   }

   .point p::before {
     content: none;
   }

   .point p::after {
     content: none;
   }

   .section h2::after {
     top: -35px;
     left: 50% !important;
     font-size: 16px;
     transform: rotate(0deg);
     padding: 2px 8px;
     transform: translate(-50%, -20%);
   }

   .section.message {
     padding: 0px 0px 56px;
   }

   .message_list {
     width: 100%;
     margin-top: 40px;
   }

   .message_item {
     display: block;
   }

   .message_list h3 {
     margin: 0 0 16px 0;
   }

   .message_item:not(:first-child) {
     padding-top: 32px;
   }

   .message_item:nth-child(2)::before {
     top: -290px;
     right: 0px;
     width: 140px;
     height: 228px;
     transform: translateY(100%);
   }

   .message_list::after {
     right: 0;
     bottom: 310px;
     width: 140px;
     height: 220px;
     transform: translateY(100%);
   }

   .caseStudyImges {
     margin-bottom: 24px;
   }

   .caseStudyImges img {
     max-width: 320px;
   }

   .caseStudy {
     width: 100%;
     padding: 0px 0px 0px;
     margin: 80px auto 0;
   }

   .tips_Box {
     display: block;
     /* width: min(100%, 326px); */
     width: 100%;
     padding: 40px 24px 0px;
     margin-top: 120px;
   }

   .tips_Box p {
     text-align: left;
   }

   .process .process_list {
     width: 100%;
     grid-template-columns: repeat(1, 1fr);
     margin: 48px auto 0;
   }

   .process_list .process_Heading {
     padding: 16px 0;
   }

   .process_Inner {
     padding: 24px 24px 8px;
   }

   .process_list picture {
     margin-bottom: 16px;
   }

   .process h3 {
     margin-bottom: 16px;
   }

   .process .tips_Box {
     margin-top: 120px;
   }

   .capital_list li {
     flex-direction: column;
   }

   .capital_Text {
     width: 100%;
     padding: 24px 24px 8px;
   }

   .capital_img {
     width: 100%;
     padding: 30px 0;
   }

   .capital_list li:nth-child(2) {
     flex-direction: column-reverse;
   }

   .capital h3,
   .capital p {
     margin-bottom: 16px;
   }

   .capital .tips_Box {
     margin-top: 120px;
   }

   .capital .capital_Listbox {
     padding: 24px 16px 8px;
   }

   .check h2 {
     font-size: 20px;
     margin-bottom: 16px;
   }

   .check h2 b {
     font-size: 20px;
   }

   .check h2 span.strong {
     font-size: 24px;
     background: linear-gradient(transparent 16px, #FFDE81 0);
     letter-spacing: -0.1px;
   }

   .check p.sub_Catch {
     font-size: 16px;
     margin: 0 0 24px;
   }

   .check p.sub_Catch b {
     font-size: 20px;
   }

   .check p.sub_Catch::after,
   .check p.sub_Catch::before {
     top: 5px;
   }

   .check .check_list {
     width: 100%;
     grid-template-columns: repeat(1, 1fr);
     margin: 48px auto 0;
   }

   .check_list h4 {
     margin: 0 0 8px 0;
   }

   .check_list ul li {
     font-size: 16px;
   }

   .check .check_list>li picture {
     top: -28px;
     left: -14px;
   }

   .check .check_list>li {
     padding: 24px 24px 24px;
   }

   .floating-banner {
     display: inline-block;
     right: 0;
   }

   .floating-banner-inner {
     width: 100vw;
     padding: 8px;
   }

   .floating-ttl {
     font-size: 12px;
   }

   .floating-copy {
     font-size: 14px;
     margin: 0 auto 6px;
   }

   .floating-btn {
     height: 28px;
     line-height: 28px;
     font-size: 15px;
   }
 }

 /* common */
 /* 擬似要素でテキストを表示 */
 nav ul a {
   position: relative;
   min-height: 76px;
 }

 #nav-mobile {
   padding-top: 40px
 }

 i.small {
   vertical-align: bottom;
 }

 .end {
   margin-bottom: 0px !important;
   padding-bottom: 0px !important;
 }

 /*==================================================
アニメーション
===================================*/
 .marker {
   background: linear-gradient(transparent 60%, #FFDE81 0%);
   background-size: 0;
   background-repeat: no-repeat;
   transition: background 3s;
   padding-bottom: 0px;
 }

 .marker.active {
   background-size: 100%;
 }

 /* その場で */
 .fadeIn {
   animation-name: fadeInAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeInAnime {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* 下から */
 .fadeUp {
   animation-name: fadeUpAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeUpAnime {
   from {
     opacity: 0;
     transform: translateY(50px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* 上から */
 .fadeDown {
   animation-name: fadeDownAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeDownAnime {
   from {
     opacity: 0;
     transform: translateY(-50px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* 左から */
 .fadeLeft {
   animation-name: fadeLeftAnime;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeLeftAnime {
   from {
     opacity: 0;
     transform: translateX(-50px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* 右から */
 .fadeRight {
   animation-name: fadeRightAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeRightAnime {
   from {
     opacity: 0;
     transform: translateX(50px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeInTrigger,
 .fadeUpTrigger,
 .fadeDownTrigger,
 .fadeLeftTrigger,
 .fadeRightTrigger {
   opacity: 0;
 }

 @media screen and (max-width: 992px) {
   nav ul a {
     min-height: auto;
   }

   h1 {
     padding: 80px 0;
   }

   h1 span.maim {
     font-size: 56px;
     margin-bottom: 16px
   }

   h1 span.sub {
     font-size: 16px;
   }

   h2 {
     margin: 0 0 40px;
   }

   nav {
     padding: 0 8px;
   }

   .kv .col {
     margin-bottom: 48px;
     text-align: center;
   }
 }

 /* スマートフォン：max-width : 599px */
 @media screen and (max-width: 599px) {}

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

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