/* =================================================================
  文字・カラー
================================================================= */

/* For main banner titles */
.txt-h1-l {
  font-size: clamp(32px, 3.5vw, 46px);
}
.txt-h1 {
  font-size: clamp(24px, 3vw, 42px);
}
.txt-h2 {
  font-size: clamp(22px, 2.5vw, 32px);
}
.txt-h3 {
  font-size: clamp(20px, 3vw, 26px);
}
.txt-h4 {
  font-size: clamp(18px, 3vw, 24px);
}

.txt-size-2l {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
}
.txt-size-l {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: clamp(22px, 2vw, 28px);
}
.txt-size-m {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
}
.txt-size-s {
  font-size: clamp(12px, 1vw, 14px);
}

.font-bold {
  font-weight: bold;
}
#SOLUTION .sol-ttl03{
  font-size: clamp(22px, 2vw, 26px);
  color: #000;
  font-weight: bold;
}

.txt-center{
  text-align: center;
}
.txt-left{
  text-align: left;
}
.txt-black{
  color: #000;
}
.txt-white{
  color: white;
}
.txt-orange{
  color: #F28200;
}

.txt-point{
  background: linear-gradient( rgba(255,200, 84, 0)20%, rgb(255, 223, 164)60%, rgb(255, 228, 154));
}
.txt-underline{
  text-decoration: underline 1px black;
}

/* =================================================================
  改行
================================================================= */
.br-sp,
.br-tab,
.br-pc {
  display: none;
}

/* スマホ以下改行 */
@media screen and (max-width: 639px) {
  .br-sp {
    display: inline-block;
  }
}

/* タブレット改行 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .br-tab {
    display: inline-block;
  }
}

/* PC以上改行 */
@media screen and (min-width: 1024px) {
  .br-pc {
    display: inline-block;
  }
}

/* =================================================================
  ボタン・カラー
================================================================= */
.btn-cta-green {
    background-color: #9AAF3C;
    color: white;
}
.btn-cta-orange {
    background-color: #F28200;
    color: white;
}
.btn-cta-darkcyan {
    background-color: #F28200;
    color: white;
}
.btn-cta-blue {
    background-color: #3E888E;
    color: white;
}

/* =================================================================
  Solution Banner
================================================================= */
/* バナー画像あり */
.banner-img-wrapper{
  margin-bottom: 0px;
  margin-top: -20px;
}
/* バナー画像上に文字 */
.banne-img-txt{
  position: relative;
}
.banne-img-txt .top-img{
  width: 100%;
  z-index: -2;
}
.banne-img-txt .text .title{
  position: absolute;
  top:35%;
  font-weight: bold;
  line-height: 120%;
  color: rgb(255, 255, 255);
}

/* バナー画像なし */
#SOLUTION  #TOP{
  padding-bottom: 80px;
  margin-bottom: 0px !important;
}
#SOLUTION #TOP .banner-wrap{
  display: flex; 
  justify-content: space-between;
}
#SOLUTION #TOP .banner-wrap .text{
  flex: 1; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  position: absolute; 
  top: 150px;
  z-index: 10; 
  color: #000000;
}
#SOLUTION #TOP .banner-wrap .text h1{
  font-size: clamp(22px, 3vw, 42px);
  line-height: 160%;
  white-space: nowrap;
}
#SOLUTION #TOP .banner-wrap .text p{
  font-size: clamp(12px, 2vw, 20px);
}
#SOLUTION #TOP .banner-wrap .img{
  flex: 1;
  margin-top: 90px;
  text-align: right;
}
#SOLUTION #TOP .banner-wrap .img img{
  max-width: 100%;
  /* width: 34%; */
  height: auto;
  margin-top: 110px;
  padding-right: 20px;
}

@media screen and (min-width: 460px) {
  #SOLUTION #TOP .banner-wrap h1 .sp{
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .banne-img-txt .text .title{
    top:12%;
    line-height: 110%;
  }
  #SOLUTION  #TOP{
    padding: 20px 0px 40px;
  }
  #SOLUTION #TOP .banner-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #SOLUTION #TOP .banner-wrap .text{
    top: 100px;
  }
  #SOLUTION #TOP .banner-wrap .text h1{
    line-height: 160%;
  }
  #SOLUTION #TOP .banner-wrap .img{
    flex: 1;
    margin-top: 180px;
  }
  /* #SOLUTION #TOP .banner-wrap .img img{
    width: 60%;
  } */
}


/* =================================================================
  スクロールアニメーション
================================================================= */

.scroll-up {
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	transition: all 1s;
}

.scroll-up.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}
.lb-outerContainer{
  	max-width: 50% !important;
  	max-height: 50% !important;
  	width: 100% !important;
  	height: 100% !important;

}
.lightbox img {
  	max-width: 100% !important;
  	max-height: 100% !important;
  	width: 100% !important;
  	height: 100% !important;
}


/* =================================================================
  背景・カラー
================================================================= */

.content-area{
  position: relative;
  padding: 120px 40px;
}
@media only screen and (max-width: 430px){
  .content-area{
    padding: 40px 10px;
  }
}
.bg-white{
  background-color: #fff;
}
.bg-beige{
  background-color: #EFEBE2;
}
.bg-gray{
  background-color: #ebebeb;
}
.bg-yellow{
  background-color: #ffd05b;
}
.bg-lightblue{
  background-color: #E4F0F4;
}
.bg-deepblue{
  background-color: #1A809B;
}
.bg-teal{
  background-color: #40878F;
}
.horizontal-gradient {
  background: linear-gradient(to right, #FFFADE, #f5e2bf);
}

/* =================================================================
  セクション（デザイン）
================================================================= */
.arrow-divider{
  background-color: var(--divider-color);
	position: relative;
  padding: 50px 0;
}
.arrow-divider::after{
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  margin: 0 0 0 -50px;
  border: 50px solid transparent;
  border-top-color: var(--divider-color);
  content: '';
}

.solution-section{
  padding: 100px 0;
}
@media screen and (max-width: 820px) {
  .solution-section{
    padding: 60px 0;
  }
}

/* =================================================================
  カード・ボックス　レイアウト
================================================================= */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 3rem;
  padding: 2rem 1rem;
  margin-bottom: 30px;
}

.sol-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #ffffff;
  padding: 2rem 4rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.card-text {
  flex: 1;
  padding-right: 1rem;
}

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

.feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  padding: 2rem 1rem;
  margin: 30px auto 0px;
}
.feature-card{
  position: relative;
  padding: 2rem 1.5rem;
}
.shadow-box{
  background-color: #ffffff;
  box-shadow: 6px 6px 12px #00000029;
  border-radius: 25px;
}

/* =================================================================
  装飾
================================================================= */
.circle-icon{
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-icon img {
  max-width: 50%;
  height: auto;
}

/* 下向き矢印　アニメーション */
.animate-arrow-down {
  position: relative;
  display: flex;
  height: 200px;/*画面いっぱいにする場合100vh*/
  justify-content: center;
  align-items: center;
}
.animate-arrow-down .arrow-down{/*矢印を配置するベースの設定*/
  position: absolute;
  top: 50%;/*着地点(animate-arrow-downの高さの50%)*/
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 10px;
  opacity: 0;
}
.animate-arrow-down .arrow-down:first-child {
  animation: arrow-move08 2s ease-in-out infinite;
}
.animate-arrow-down .arrow-down:nth-child(2)  {
  animation: arrow-move08 2s 1s ease-in-out infinite;
}
.animate-arrow-down .arrow-down:before,
.animate-arrow-down .arrow-down:after {/*矢印全体の設定*/
  position: absolute;
  content: '';
  top: 0;
  width: 30px;
  height: 3px;
  background: #F59718;
}
.animate-arrow-down .arrow-down:before {/*矢印左の線の位置と傾斜*/
  left: 3px;
  transform: rotate(30deg);
}
.animate-arrow-down .arrow-down:after {/*矢印左の線の位置と傾斜*/
  right: 3px;
  transform: rotate(-30deg);
}
@keyframes arrow-move08 {
    0% { opacity: 0; top: 40%;/*スタート地点(animate-arrow-downの高さの40%)*/}
   70% { opacity: 1;}
  100% { opacity: 0;}
}
@media screen and (max-width: 460px) {
  .animate-arrow-down{
    height: 150px;
  }
}

/* =================================================================
  リスト
================================================================= */

/* チェックマーク */
.list-check {
  padding: 0.5em 0.5em 0.5em 2.3em;
  position: relative;
  margin: 0 auto;
}

.list-check .check-item {
  line-height: 1.5;
  padding: 0.2em 0;
  list-style-type: none!important;
  color: #000;
}

.list-check .check-item:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  left : 1em;
  color: #F28200;
}

/* =================================================================
  画像・文字を左右横並び　※RWD上下並び
================================================================= */

.media-block-body {
  padding: 40px 20px 0px;
}
.media-block-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 40px;
  border-radius: 10px;
  margin-bottom: 40px;
}
.media-block-content {
  flex: 1 1 45%;
  padding-right: 20px;
}
.media-block-img {
  flex: 1 1 35%;
  text-align: center;
}
.media-block-img img {
  max-width: 100%;
  height: auto;
}

/* スマホ対応：縦並びに変更 */
@media screen and (max-width: 768px) {
  .media-block-box {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px 0px;
  }

  .media-block-content,
  .media-block-img {
    flex: 1 1 100%;
    padding-right: 0px;
  }

  .media-block-title {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 430px){
  .media-block-body{
    padding: 20px 10px 0px;
  }
}


/* =================================================================
  画像・文字を左右交互並び　※RWD上下並び
================================================================= */

/* .flex-container {
    display: flex;
    align-items: center;
} */