@charset "utf-8";

/* *****共通設定***** */

html {
  scroll-behavior: smooth; /* スムーズスクロール */
}

main{
    display: block;
    background-color: #fbfbf2;
}
main .btn {
  color: white;
  text-decoration: none;
  background-color: transparent;
  
}

main .btn:hover {
  color: #f0f0f0; /* ホバー時の文字色 */
  text-decoration: underline; /* 下線を追加 */
  transform: scale(1.1); /* ボタン全体を拡大 */
}
h1 { font-size: 4.5rem; }
h2, h3{
   color: #ffffff;
}
.gray {
    color: #6c757d;
}
.card{
  background-color: rgb(37, 37, 171) !important; /* 背景色を青に設定 */
    border-color: #e0c7b2;
}
.img-thumbnail {
    width: 100%;
    padding: .25rem;
    background-color: transparent;
    border: none;
}

/* ヘッダー(navbar) */
.navbar{
    border-bottom: 1px solid #a29080;
    background: linear-gradient(to bottom, #0000FF, #000000); /* 上から下へのグラデーション */
    position: sticky; /* 固定位置にする */
    top: 0; /* 上部に固定 */
    left: 0; /* 左端に固定 */
    right: 0; /* 右端に固定 */
    z-index: 1000; /* 他のコンテンツより前面に表示 */
}

.navbar .navbar-collapse{
    flex-grow: 0;
}
.navbar .navbar-brand{
    height: 50px;
}
.navbar .navbar-brand img{
    height: 100%;
}
.navbar .navbar-nav .active > .nav-link{
    color: #ffce11;
}
.navbar .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(251,251,241,1);
}

/* フッター */
#footer{
  position: relative; /* 擬似要素を使わない場合でも必須 */
  overflow: hidden;
  background: linear-gradient(
          rgba(0, 0, 0, 0.6), /* 透明度60%の黒 */
          rgba(0, 0, 0, 0.6)
      ),
      url('../img/TECHig.jpg'); /* 背景画像のパス */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* 画像を全体に拡大 */
}

#footer .container{
  position: relative; /* 擬似要素を使用するために必要 */
  overflow: hidden; /* 擬似要素がはみ出さないようにする */
}
#footer p {
  color: white !important;
}
#footer ul {
  color: white;
}
#footer .footer-ttl{
    font-size: 1rem;
    font-weight: bold;
    margin: 1.5rem 0;
    color: #ffffff;
}
#footer address p,
#footer #footer-news li{
    margin-bottom: 0.5rem;
}
#footer #footer-news ul{
    margin: 0;
    padding: 0
}
#footer #footer-news ul{
    list-style: none;
}
#footer #footer-news li span{
    display: inline-block;
    margin-right: 0.5rem;
}
#footer #copyright{
  border-top: 1px solid #1b2c69;
  background: linear-gradient(to top, #0000FF, #000000); /* 下から上へのグラデーション */
  color: #e0c7b2;
}
#footer img {
	width: 360px;
}

/* *****トップページ***** */
/* メイン画像 */
h1{
    font-weight: bold !important;
    color: #ffce11;
}
#page-top h1 + span {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}
#page-top .jumbotron-fluid{
    height: 640px;
    background-color: #f1efff;
    border-bottom: #dddddd;
    background: url("../img/top-main.jpg") no-repeat center center;
    background-size:cover;
}
#page-top .jumbotron-fluid .container{
    height: 100%;
}
#page-top .jumbotron-fluid .btn{
    padding-left: 3rem;
    padding-right: 3rem;
    margin-top: 1.5rem;
    font-weight: bold;
	border-width: 3px;
    border-color: #fff;
}

/* 各セクション */
#page-top section{
    border-bottom: 1px solid #e0c7b2;
    background-color: hwb(277 5% 71%);
	padding: 5rem 0;
}
#page-top section:nth-child(odd){
    background-color: rgb(28, 7, 73);
}
#page-top section .container > h2{
    margin-bottom: 30px;
    font-size: 2.5rem;
}
#page-top section .container > h2 + p{
    max-width: 900px;
	margin: 0 auto 50px;
}


/* FAQセクション全体 */
#faq {
  position: relative; /* セクションを相対的に配置 */
  background-image: url('../img/Sec1Bk.jpg'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を全体にフィットさせる */
  background-position: center center; /* 画像を中央に配置 */
  padding: 60px 0; /* セクションの上下に余白を追加 */
}
#faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 透過のオーバーレイ（80％透過） */
  z-index: 1; /* 画像より上に表示されるように */
}
#faq h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
  color: #ffffff;
}
/* 表題のスタイル */
.faq-title {
  margin: 0 0 0px 0;
  padding-left: 15px; /* 左側に15pxのスペースを追加 */
  font-size: 1.1em;
  font-weight: bold;
  color: #f8f9fa; /* 白文字に設定 */
  background-color: #241b66;
}
/* FAQアイテムのスタイル */
.faq-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

/* Q部分のスタイル */
.faq-item h3 {
  margin: 0;
  padding: 15px 20px;
  background-color: #5b4caf;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item h3:hover {
  background-color: #456ea0;
}

/* アイコンのスタイル */
.faq-item h3::after {
  content: "\25B6"; /* 三角形アイコン */
  font-size: 1em;
  transform: rotate(0);
  transition: transform 0.3s ease;
}

/* A部分のスタイル */
.faq-item p {
  margin: 0;
  padding: 15px 20px;
  background-color: #fff;
  color: #333;
  display: none; /* 初期は非表示 */
}

/* 展開時のスタイル */
.faq-item.open h3::after {
  transform: rotate(90deg); /* アイコンを回転 */
}

.faq-item.open p {
  display: block; /* 展開されたAを表示 */
}

  /* 無料の2文字をピンクで強調 */
  .highlight-free {
    color: #ff69b4; /* ピンク色 */
    font-weight: bold; /* 太字 */
    font-size: 1.6em;
  }

  /* 強調リンクスタイル */
  .text-highlight-custom {
    color: yellow; /* テキストを黄色に */
    font-weight: bold; /* 太字 */
    text-decoration: underline; /* 下線を追加 */
    text-decoration-color: white; /* 下線の色を白に */
    text-decoration-thickness: 2px; /* 下線の太さ */
    transition: all 0.3s ease; /* ホバー時の効果を滑らかに */
  }

  /* ホバー時のスタイル */
  .text-highlight-custom:hover {
    text-decoration-thickness: 3px; /* ホバー時は下線をさらに太く */
    color: #ffd700; /* ホバー時のテキスト色をゴールド系に */
  }
@media (max-width: 480px) {
  #faq h2 {
      font-size: 1.2em;
      margin-bottom: 15px;
  }

  .faq-item h3 {
      font-size: 0.9em;
      padding: 10px;
  }

  .faq-item p {
      font-size: 0.8em;
      padding: 10px;
  }
}

#sec0 {
  position: relative; /* セクションを相対的に配置 */
  background-image: url('../img/dxbk.jpg'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を全体にフィットさせる */
  background-position: center center; /* 画像を中央に配置 */
  padding: 60px 0; /* セクションの上下に余白を追加 */
}

#sec0::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 透過のオーバーレイ（80％透過） */
  z-index: 1; /* 画像より上に表示されるように */
}



#sec1 h3{
    font-size: 1.4rem;
}
#sec1 {
  position: relative; /* セクションを相対的に配置 */
  background-image: url('../img/Sec1Bk.jpg'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を全体にフィットさせる */
  background-position: center center; /* 画像を中央に配置 */
  padding: 60px 0; /* セクションの上下に余白を追加 */
}

#sec1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 透過のオーバーレイ（80％透過） */
  z-index: 1; /* 画像より上に表示されるように */
}

.container {
  position: relative;
  z-index: 2; /* コンテンツが透過された背景の上に表示されるように */
}


#sec2 {
  position: relative; /* セクションを相対的に配置 */
  background-image: url('../img/sec2BK.jpg'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を全体にフィットさせる */
  background-position: center center; /* 画像を中央に配置 */
  padding: 60px 0; /* セクションの上下に余白を追加 */
  
}
#sec2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 透過のオーバーレイ（80％透過） */
  z-index: 1; /* 画像より上に表示されるように */
}

#sec2 .row{
    min-height: 160px;
    color: #2f2f2f;
    
}
.row .col-md-8 p {
  color: white; /* テキストを白に */
  text-shadow: 2px 2px 5px rgba(0, 0, 255, 0.7); /* 青い影を追加 */
  line-height: 1.8; /* 行間を広げて読みやすく */
  font-size: 1rem; /* フォントサイズを調整（必要なら変更可能） */
  font-weight: 400; /* 適度な太さを設定 */
}
#sec3 {
  position: relative;
  padding: 50px 0;
  color: #7156fc; /* テキストが見やすくなるように白色を指定 */
  background: url('../img/sec3BK.jpg') center/cover no-repeat, rgba(0, 0, 0, 0.8); /* 背景画像＋50%透過の黒 */
  background-blend-mode: overlay; /* 背景画像と色のブレンド */
  height: auto; /* コンテンツに応じた高さに調整 */
}

.lead {
  color: white; /* テキストを白に */
  font-size: 1.5rem; /* テキストサイズを少し大きく */
  font-weight: bold; /* 太字で目立たせる */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 影をつけて視認性を向上 */
  line-height: 1.6; /* 行間を調整して読みやすく */
  margin-top: 20px; /* 上部の余白を調整 */
}

#sec4 {
  position: relative; /* セクションを相対的に配置 */
  background-image: url('../img/HPCBK.jpg'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像を全体にフィットさせる */
  background-position: center center; /* 画像を中央に配置 */
  padding: 60px 0; /* セクションの上下に余白を追加 */
  
}
#sec4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 透過のオーバーレイ（80％透過） */
  z-index: 1; /* 画像より上に表示されるように */
}

#sec4 .card {
  position: relative; /* 子要素である擬似要素の位置を基準にするため */
  color: white; /* テキストを見やすくするために白色に設定 */
  border: none; /* 枠線を削除してよりスッキリしたデザインに */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* カードに影を追加 */
  overflow: hidden; /* 背景画像がはみ出ないようにする */
}
#sec4 .card::before {
  content: ""; /* 擬似要素に内容を設定 */
  position: absolute; /* カード内の背景に絶対配置 */
  top: 0;
  left: 0;
  width: 100%; /* カードの幅に合わせる */
  height: 100%; /* カードの高さに合わせる */
  background-image: url('../img/HPCBK.jpg'); /* 背景画像を設定 */
  background-size: cover; /* 背景画像をカード全体に拡大 */
  background-position: center; /* 背景画像の位置を中央に */
  background-repeat: no-repeat; /* 背景画像の繰り返しを防ぐ */
  opacity: 0.3; /* 透過度を設定 */
  z-index: 0; /* 背景をテキストの背面に配置 */
}

#sec4 .card > * {
  position: relative; /* テキストや他の内容を背景画像の上に配置 */
  z-index: 1; /* 背景より前面に配置 */
}
#sec4 .card-body .clearfix p,
#sec4 .card-body .clearfix h3{
    margin-left: 115px;
    line-height: 130%;
}
#sec4 .card-body .card-title{
    margin-bottom: 5px;
    color: #ffffff;
}
#sec4 .card-body .card-subtitle{
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #ade5f4;
}
#sec4 img {
    width: 100%;
}
#sec5 {
  position: relative;
  background: url('../img/ASKbk.jpg') no-repeat center center; /* 背景画像の指定 */
  background-size: cover; /* 画像を全体にフィット */
}

#sec5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 黒透過60％ */
  z-index: 1;
}

#sec5 .container {
  position: relative;
  z-index: 2; /* コンテンツを背景の上に表示 */
}

#sec5 article > .row {
    border: 1px solid #dddddd;
}
#sec5 > div:nth-child(1) img {
    width: 100%;
}
/*#sec4 > div:nth-child(2){
    margin-left: 220px;
}*/
#sec5 h3{
    margin-bottom: 0.1rem;
}
#sec5 article > div div header {
	padding: 10px;
}

/* *****下層ページ***** */

#breadcrumb-wrapper{
    border-bottom: 1px solid #a29080;
}
#breadcrumb-wrapper,
.breadcrumb{
    font-size: 0.9rem;
    background-color: #563322;
}
.breadcrumb a{
    color: rgba(255,255,255,.5);
}
.breadcrumb a:hover,
.breadcrumb a:focus{
    color: rgba(255,255,255,1);
}
.breadcrumb-item+.breadcrumb-item::before{
    content: ">";
    padding-right: 1rem;
    color: rgba(255,255,255,.5);
}
.breadcrumb-item.active{
    color: #ffffff;
}
h1.page-ttl {
    font-size:2rem; 
}
#page h1 + span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}

#page article {
    padding: 5rem 0;
}

#page section {
    padding-bottom: 5rem;
}
#page section:last-child {
    padding-bottom: 0rem;
}

#page h1 + small {
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
}
#page .jumbotron{
    background-color: #f1efff;
    border-bottom: #dddddd;
    background: url("../img/top-main.jpg") no-repeat center center;
    background-size:cover;
    border-radius: initial;
}
#page .jumbotron .container{
    padding: 0;
}
#page .jumbotron .container p{
    margin-bottom: 0;
}
#page h2 + p{
    margin: 0 0 1.2rem;
}
#page main img{
    max-width: 100%;
}
#page .sample-title{
    display: flex;
    align-items: center;
    text-align: center;	
}

#page .sample-title::after {
    border-top: 3px dotted;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
    margin-left: 0.5em;
}
#page .sample-title span{
    background-color: #fbfbf2;
}
#page .sample-subtitle{
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
}

/* *****フォーム***** */

.form1 label{
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.form1 input,
.form1 textarea,
.form1 select{
    max-width: 768px;
}
.form1 .form-group{
    margin-bottom: 2rem;
}

body {
    font: 14px/2 "Open sans", sans-serif;
    letter-spacing: 0.05em;
  }

  button {
    font-size: 1.2rem; /* ボタンのフォントを少し大きく */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンに影を追加 */
}

button:hover {
    background-color: #0056b3; /* ホバーカラーを少し濃く */
    font-weight: bold; /* 文字を太くする */
    color: #ffffff; /* 文字色を白にする（好みで） */
    background-color: #0056b3; /* ボタンの背景色を濃くする */
    transform: translateY(-3px); /* ボタンが少し浮くような効果 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* 影を強調 */
}
  
  .slideshow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 90vh;
    z-index: 1;
  }
  .slideshow .slideshow-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .slideshow .slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .slideshow .slide {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .slideshow .slide.is-active {
    display: block;
  }
  .slideshow .slide.is-loaded {
    opacity: 1;
  }
  .slideshow .slide .caption {
    padding: 0 100px;
  }
  .slideshow .slide .image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    z-index: 1;
    background-size: cover;
    image-rendering: optimizeQuality;
  }
  .slideshow .slide .image-container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .slideshow .slide .image {
    width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
  }
  .slideshow .slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slideshow .slide .title {
    margin: 0 auto 15px;
    max-width: 1000px;
    font: 300 50px/1.2 "Oswald", sans-serif;
    letter-spacing: 0.35em;
    text-transform: uppercase;
  }
  .slideshow .slide .text {
    margin: 0 auto;
    max-width: 1000px;
    font-size: 18px;
    line-height: 1.4;
  }
  .slideshow .slide .btn {
    margin: 15px 0 0;
    border-color: #fff;
  }
  .slideshow .slide .btn::before {
    background: #fff;
  }
  .slideshow .pagination {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%); /* 親要素を中央に */
    width: auto; /* 必要に応じて調整 */
    height: 12px;
    cursor: default;
    z-index: 2;
    text-align: center;
  }
  .slideshow .pagination .item {
    display: inline-block;
    padding: 15px 5px;
    position: relative;
    width: 46px;
    height: 32px;
    cursor: pointer;
    text-indent: -999em;
    z-index: 1;
  }
  .slideshow .pagination .item + .page {
    margin-left: -2px;
  }
  .slideshow .pagination .item::before {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    left: 5px;
    width: 36px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease;
  }
  .slideshow .pagination .item::after {
    width: 0;
    background: #fff;
    z-index: 2;
    transition: width 0.2s ease;
  }
  .slideshow .pagination .item:hover::before, .slideshow .pagination .item.is-active::before {
    background-color: #fff;
  }

  .slideshow .arrows .arrow {
    margin: -33px 0 0;
    padding: 20px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 3;
  }
  .slideshow .arrows .prev {
    left: 30px;
  }
  .slideshow .arrows .prev:hover .svg {
    left: -10px;
  }
  .slideshow .arrows .next {
    right: 30px;
  }
  .slideshow .arrows .next:hover .svg {
    left: 10px;
  }
  .slideshow .arrows .svg {
    position: relative;
    left: 0;
    width: 14px;
    height: 26px;
    fill: #fff;
    transition: left 0.2s ease;
  }

  @media (max-width: 1200px) {
    .slideshow .slide .title {
      font-size: 40px;
      letter-spacing: 0.3em;
    }
    .slideshow .slide .text {
      font-size: 16px;
      line-height: 1.4;
    }
    .slideshow .arrows .arrow {
      padding: 15px;
    }
  }
  
  @media (max-width: 768px) {
    .slideshow {
      height: 70vh;
    }
    .slideshow .slide .title {
      font-size: 30px;
      letter-spacing: 0.2em;
    }
    .slideshow .slide .text {
      font-size: 14px;
    }
    .slideshow .arrows .arrow {
      padding: 10px;
    }
    .slideshow .arrows .prev {
      left: 10px;
    }
    .slideshow .arrows .next {
      right: 10px;
    }
    .slideshow .pagination  {
      display: none; /* 非表示にする */
    }
    .rpa-image {
      display: none;
    }
  }
  
  @media (max-width: 576px) {
    .slideshow {
      height: 50vh;
    }
    .slideshow .slide .title {
      font-size: 24px;
      letter-spacing: 0.1em;
    }
    .slideshow .slide .text {
      font-size: 12px;
    }
    .slideshow .pagination  {
      display: none; /* 非表示にする */
    }
  }


  .image-container {
    position: relative;
}
  .overlay-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
    font-size: 2.0rem;
    font-weight: bold;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

  /* 画像ホバーエフェクト */
.card-img-top {
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  /* マウスが乗ったときのズームインと色味変更 */
  .card-img-top:hover {
    transform: scale(1.1); /* ズームイン */
    filter: brightness(80%); /* 少し暗くする */
    
  }

  /* 画像にホバーしたときにcard-bodyの背景色を緑に変える */
.card:hover .card-body {
    background-color: green; /* 背景色を緑に変更 */
    color: white; /* テキスト色を白に */
    transition: background-color 0.3s ease, color 0.3s ease; /* アニメーション効果 */
  }

  /* 最初は透明で位置を下にする */
.fade-in-up {
  color: white; /* テキスト色を白に設定 */
  font-weight: bold; /* テキストを太字に設定 */
    opacity: 0;
    transform: translateY(40px); /* 20px下に移動 */
    transition: opacity 2s ease-out, transform 2s ease-out; /* アニメーションのスムーズな効果 */
  }
  
  /* 表示されるときのスタイル */
  .fade-in-up.active {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻る */
  }

  .shapedividers_com-8266 {
    overflow: hidden;
    position: relative;
    height: 100px;
  }
  .shapedividers_com-8266::before {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw;
    transform: scaleX(4);
    transform-origin: 100% 0;
    animation: 10s infinite alternate shape-anim-8266 linear;
    background-size: 100% 100px;
    background-position: 50% 0%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23ffd4df"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23ffd4df"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23ffd4df"/></svg>');
  }
  
  @media (min-width: 2100px) {
    .shapedividers_com-8266::before {
      background-size: 100% calc(2vw + 100px);
    }
  }
  
  @keyframes shape-anim-8266 {
    100% {
      transform: scaleX(4) translateX(calc(100% - (100% / 4)));
    }
  }

  



  body{
    margin:0;
  }
  /* SVG 1 */
  .shapedividers_com-2312{
  overflow:hidden;
  position:relative;
  height: 120px;
   margin-top:-120px;
  }
  .shapedividers_com-2312::before{ 
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  transform:scaleX(4);
  transform-origin: 100% 100%;
  animation: 10s infinite alternate shape-anim-2312  linear;
  background-size: 100% 90px;
  background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%230000ff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%230000ff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%230000ff"/></svg>'); 
  }
  
  @media (min-width:2100px){
  .shapedividers_com-2312::before{
  background-size: 100% calc(2vw + 90px);
  }
  }
  
  @keyframes shape-anim-2312 {
    100% {
      transform: scaleX(4) translateX(calc(100% - (100% / 4)));
    }
  }
  /* SVG 2 */
  .shapedividers_com-1585{
  overflow:hidden;
  position:relative;
    height:100px;
    margin-bottom:-100px;
  }
  .shapedividers_com-1585::before{ 
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  background-size: 100% 100px;
  background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.646 0.529" preserveAspectRatio="none"><g fill="%23ffffff"><path d="M0 0h2.646L1.323.265z" /><path d="M0 0l1.323.53L2.646 0z" opacity=".66"/></g></svg>'); 
  }
  
  @media (min-width:2100px){
  .shapedividers_com-1585::before{
  background-size: 100% calc(2vw + 100px);
  }
  }
   
  /* SVG 3 */
  
  .shapedividers_com-6548{
  overflow:hidden;
  position:relative;
    height:100px;
    margin-top:-100px;
  }
  .shapedividers_com-6548::before{ 
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  background-size: 100% 100px;
  background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 77"><g fill="%23000000"><path opacity=".5" d="M1872 3v6l-6 3-5-3V3l5-3 6 3z"/><path opacity=".3" d="M1902 7v8l7 4 7-4V7l-7-4-7 4z"/><path opacity=".75" d="M1877 8v11l10 6 9-6V8l-9-5-10 5z"/><path opacity=".5" d="M1333 3v6l-5 3-6-3V3l6-3 5 3z"/><path opacity=".3" d="M1363 7v8l8 4 7-4V7l-7-4-8 4z"/><path opacity=".75" d="M1339 8v11l9 6 10-6V8l-10-5-9 5z"/><path opacity=".5" d="M786 3v6l-5 3-5-3V3l5-3 5 3z"/><path opacity=".3" d="M817 7v8l7 4 7-4V7l-7-4-7 4z"/><path opacity=".75" d="M792 8v11l10 6 9-6V8l-9-5-10 5z"/><path opacity=".5" d="M247 3v6l-5 3-5-3V3l5-3 5 3z"/><path opacity=".3" d="M278 7v8l7 4 7-4V7l-7-4-7 4z"/><path opacity=".75" d="M253 8v11l9 6 10-6V8l-10-5-9 5z"/><path opacity=".5" d="M13 38v23l19 11 19-11V38L32 27 13 38z"/><path opacity=".3" d="M71 10v15l13 7 12-7V10L84 3l-13 7zM0 32v11l10 6 9-6V32l-9-5-10 5z"/><path opacity=".5" d="M15 14v9l8 4 7-4v-9l-7-4-8 4z"/><path opacity=".75" d="M37 22v16l14 8 14-8V22l-14-8-14 8zM208 5v9l8 5 8-5V5l-8-4-8 4z"/><path opacity=".5" d="M59 37v14l12 7 11-7V37l-11-6-12 6zM112 31v22l19 11 19-11V31l-19-11-19 11z"/><path opacity=".3" d="M170 8v11l9 6 10-6V8l-10-5-9 5zM99 25v11l10 6 9-6V25l-9-5-10 5z"/><path opacity=".5" d="M114 7v8l8 5 7-5V7l-7-4-8 4zM193 13v6l6 3 5-3v-6l-5-3-6 3z"/><path opacity=".75" d="M136 15v16l14 8 14-8V15l-14-9-14 9z"/><path opacity=".5" d="M158 30v14l12 6 11-6V30l-11-7-12 7zM516 38v22l-20 11-19-11V38l19-11 20 11z"/><path opacity=".3" d="M458 10v15l-13 7-13-7V10l13-8 13 8zM528 32v11l-9 6-10-6V32l10-5 9 5z"/><path opacity=".5" d="M511 17v7l-5 3-6-3v-7l6-3 5 3z"/><path opacity=".75" d="M491 22v16l-14 8-14-8V22l14-9 14 9zM320 5v9l-8 4-7-4V5l8-5 7 5z"/><path opacity=".5" d="M470 37v14l-12 6-12-7V37l12-7 12 7zM417 31v22l-20 11-19-11V31l19-11 20 11z"/><path opacity=".3" d="M359 8v11l-10 5-9-5V8l9-6 10 6zM429 25v11l-9 5-10-5V25l10-6 9 6z"/><path opacity=".5" d="M414 7v8l-7 4-8-4V7l8-5 7 5zM335 12v7l-5 3-5-3v-7l5-3 5 3z"/><path opacity=".75" d="M392 14v16l-14 9-14-9V14l14-8 14 8z"/><path opacity=".5" d="M371 30v13l-12 7-12-7V30l12-7 12 7zM552 38v23l19 11 19-11V38l-19-11-19 11z"/><path opacity=".3" d="M609 10v15l13 7 13-7V10l-13-7-13 7zM539 32v11l9 6 10-6V32l-10-5-9 5z"/><path opacity=".5" d="M554 14v9l8 4 7-4v-9l-7-4-8 4z"/><path opacity=".75" d="M576 22v16l14 8 14-8V22l-14-8-14 8zM747 5v9l8 5 8-5V5l-8-4-8 4z"/><path opacity=".5" d="M598 37v14l11 7 12-7V37l-12-6-11 6zM651 31v22l19 11 19-11V31l-19-11-19 11z"/><path opacity=".3" d="M708 8v11l10 6 10-6V8l-10-5-10 5zM638 25v11l9 6 10-6V25l-10-5-9 5z"/><path opacity=".5" d="M653 7v8l8 5 7-5V7l-7-4-8 4zM732 13v6l5 3 6-3v-6l-6-3-5 3z"/><path opacity=".75" d="M675 15v16l14 8 14-8V15l-14-9-14 9z"/><path opacity=".5" d="M697 30v14l11 6 12-6V30l-12-7-11 7zM1054 38v22l-19 11-19-11V38l19-11 19 11z"/><path opacity=".3" d="M997 10v15l-13 7-13-7V10l13-8 13 8zM1067 32v11l-9 6-10-6V32l10-5 9 5z"/><path opacity=".5" d="M1050 17v7l-6 3-5-3v-7l5-3 6 3z"/><path opacity=".75" d="M1030 22v16l-14 8-14-8V22l14-9 14 9zM859 5v9l-8 4-8-4V5l8-5 8 5z"/><path opacity=".5" d="M1008 37v14l-11 6-12-7V37l12-7 11 7zM955 31v22l-19 11-19-11V31l19-11 19 11z"/><path opacity=".3" d="M898 8v11l-10 5-10-5V8l10-6 10 6zM968 25v11l-9 5-10-5V25l10-6 9 6z"/><path opacity=".5" d="M953 7v8l-8 4-7-4V7l7-5 8 5zM874 12v7l-5 3-6-3v-7l6-3 5 3z"/><path opacity=".75" d="M931 14v16l-14 9-14-9V14l14-8 14 8z"/><path opacity=".5" d="M909 30v13l-11 7-12-7V30l12-7 11 7zM1090 38v23l20 11 19-11V38l-19-11-20 11z"/><path opacity=".3" d="M1148 10v15l13 7 13-7V10l-13-7-13 7zM1078 32v11l9 6 10-6V32l-10-5-9 5z"/><path opacity=".5" d="M1093 14v9l7 4 8-4v-9l-8-4-7 4z"/><path opacity=".75" d="M1115 22v16l14 8 14-8V22l-14-8-14 8zM1286 5v9l8 5 7-5V5l-7-4-8 4z"/><path opacity=".5" d="M1136 37v14l12 7 12-7V37l-12-6-12 6zM1189 31v22l20 11 19-11V31l-19-11-20 11z"/><path opacity=".3" d="M1247 8v11l10 6 9-6V8l-9-5-10 5zM1177 25v11l9 6 10-6V25l-10-5-9 5z"/><path opacity=".5" d="M1192 7v8l7 5 8-5V7l-8-4-7 4zM1271 13v6l5 3 5-3v-6l-5-3-5 3z"/><path opacity=".75" d="M1214 15v16l14 8 14-8V15l-14-9-14 9z"/><path opacity=".5" d="M1235 30v14l12 6 12-6V30l-12-7-12 7zM1593 38v22l-19 11-19-11V38l19-11 19 11z"/><path opacity=".3" d="M1535 10v15l-13 7-12-7V10l13-8 12 8zM1606 32v11l-10 6-9-6V32l9-5 10 5z"/><path opacity=".5" d="M1589 17v7l-6 3-5-3v-7l5-3 6 3z"/><path opacity=".75" d="M1569 22v16l-14 8-14-8V22l14-9 14 9zM1398 5v9l-8 4-8-4V5l8-5 8 5z"/><path opacity=".5" d="M1547 37v14l-12 6-11-7V37l11-7 12 7zM1494 31v22l-19 11-19-11V31l19-11 19 11z"/><path opacity=".3" d="M1436 8v11l-9 5-10-5V8l10-6 9 6zM1507 25v11l-10 5-9-5V25l10-6 9 6z"/><path opacity=".5" d="M1492 7v8l-8 4-7-4V7l7-5 8 5zM1413 12v7l-6 3-5-3v-7l6-3 5 3z"/><path opacity=".75" d="M1470 14v16l-14 9-14-9V14l14-8 14 8z"/><path opacity=".5" d="M1448 30v13l-12 7-11-7V30l11-7 12 7zM1629 38v23l19 11 20-11V38l-20-11-19 11z"/><path opacity=".3" d="M1687 10v15l13 7 13-7V10l-13-7-13 7zM1616 32v11l10 6 9-6V32l-9-5-10 5z"/><path opacity=".5" d="M1632 14v9l7 4 8-4v-9l-8-4-7 4z"/><path opacity=".75" d="M1653 22v16l15 8 14-8V22l-14-8-15 8zM1824 5v9l8 5 8-5V5l-8-4-8 4z"/><path opacity=".5" d="M1675 37v14l12 7 12-7V37l-12-6-12 6zM1728 31v22l19 11 20-11V31l-20-11-19 11z"/><path opacity=".3" d="M1786 8v11l9 6 10-6V8l-10-5-9 5zM1715 25v11l10 6 9-6V25l-9-5-10 5z"/><path opacity=".5" d="M1731 7v8l7 5 8-5V7l-8-4-7 4zM1809 13v6l6 3 5-3v-6l-5-3-6 3z"/><path opacity=".75" d="M1752 15v16l15 8 14-8V15l-14-9-15 9z"/><path opacity=".5" d="M1774 30v14l12 6 12-6V30l-12-7-12 7z"/><path opacity=".75" d="M1937 5v9l-8 4-8-4V5l8-5 8 5z"/><path opacity=".3" d="M1975 8v11l-9 5-10-5V8l10-6 9 6z"/><path opacity=".5" d="M1952 12v7l-6 3-5-3v-7l5-3 6 3z"/><path opacity=".75" d="M2000 35V9l-5-3-15 8v16l7 4 8 5 5-4z"/><path opacity=".5" d="M1987 30v13l-12 7-12-7V30l12-7 12 7z"/><path d="M2000 77V39l-115-22-4-1-26-5-17 3-5 1-243 47-230-44-3-1-32-6-11 2-6 1-248 48-225-43h-2l-38-8-5 1-6 1-254 49-219-42h-1l-44-9h-1l-6 1-44 9L0 62v15h2000z"/></g></svg>'); 
  }
  
  @media (min-width:2100px){
  .shapedividers_com-6548::before{
  background-size: 100% calc(2vw + 100px);
  }
  }
   
  /*================*/
  #sec5 h1 {
    color: white; /* 文字色を白に設定 */
}

  h1{
    color:#fff;
    font-size:10vw;
    letter-spacing:0.2em;
  }
  .content01{
   display:flex;
   justify-content: center;
   align-items:center;
  background:url(https://picsum.photos/id/593/1920/1080) no-repeat center/cover;
    height:700px;
  }
  
  .content02{
    background:#fff;
    padding:100px 4%;
  }
  
  .content03{
  background:url(https://picsum.photos/id/537/1920/1080) no-repeat center/cover;
    height:700px;
  }
  
  .content04{
    background:#000;
     color:#fff;
     padding:100px 4%;
   }


   @keyframes blurPulse {
    0% {
        transform: scale(1);
        filter: blur(0);
    }
    50% {
        transform: scale(1.1);
        filter: blur(1px);
    }
    100% {
        transform: scale(1);
        filter: blur(0);
    }
}

h2.text-center {
  color: white;
  font-weight: bold;
  text-align: center;

  text-shadow: 2px 2px 5px blue, -2px -2px 5px blue, 2px -2px 5px blue, -2px 2px 5px blue;
}

#copyright {
  background-color: #333;  /* 背景色を設定（任意） */
  text-align: center;  /* 中央揃え */
  color: white;  /* 文字色を白に設定 */
  padding: 10px 0;  /* 上下の余白を調整 */
}

#scrollToTop {
  color: white;  /* 文字色を白に設定 */
  text-decoration: none;  /* リンクの下線を削除 */
  font-size: 1rem;  /* フォントサイズを調整（任意） */
}

#scrollToTop:hover {
  text-decoration: underline;  /* ホバー時に下線を追加 */
}


.banner {
  width: 240px !important;
  height: 165px !important;
  max-width: none !important; /* 親要素に影響されないようにする */
  display: block; /* 不要な余白を防ぐ */
  margin: 0; /* 必要に応じて中央寄せ */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 必要なら影を付ける */
}