@charset "UTF-8";

body{
  font-family: "uddigikyokasho-pro", sans-serif;
font-weight: 400;
font-style: normal;
color: #535353;
}



.main_view{
    width: 100%;
    height: 400px;
    font-size: 18px;
    overflow: hidden;
    position: relative;
}
.title{
    width: 250px;
    margin: 200px auto 0;
}
.title h4{
  color: #27acd9;
  font-size: 1.8em;
}
.title h1{
  color: #474747;
  font-size: 2.5em;
  margin-top: -30px;
}


.scatter_circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  animation: floatMove 4s ease-in-out infinite alternate;
  transform: translate(var(--x), var(--y));
  pointer-events: none; /* 円がクリックなどに干渉しないようにする */
  z-index: 0;
}

@keyframes floatMove {
  0% {
    transform: translate(calc(var(--x)), calc(var(--y)));
  }
  100% {
    transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)));
  }
}

@media (max-width: 800px) {
  .title{
    width: 150px;
    margin: 200px auto 0;
}
.title h4{
  color: #27acd9;
  font-size: 1.8em;
}
.title h1{
  color: #474747;
  font-size: 2em;
  margin-top: -30px;
}

}


/* ここまで */

.service {
    font-size: 18px;
}

.article-box {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

/* フィルターを右上に配置 */
.filter {
  position: absolute;
  top: -80px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter label {
  font-size: 1em;
  color: #333;
}

.filter select {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid #ccc;
  background-color: #eeeeee;
  font-size: 1em;
}

.article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.explain{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px;
  padding-bottom: 100px;
  font-size: 18px;
}

.taking_note{
  width: 200px;
}
.taking_note img{
  width: 100%;
}
.explain p{
  font-size: 1em;
  color: #333;
}

@media (max-width: 600px) {
  .article-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 350px;
    margin: 0 auto;
  }
  .explain{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 30px;
  padding: 20px;
  padding-bottom: 100px;
}
.taking_note{
  width: 140px;
}
.explain p{
  font-size: .8em;
  color: #333;
}
}
@media (min-width: 600px) {
  .article-list {
      grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .article-list {
      grid-template-columns: 1fr 1fr 1fr;
  }
}

.article-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.article-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.article-card img {
  width: 100%;
  height: auto;
  display: block;
}

.article-content {
  padding: 15px;
}

.article-card h2 {
  margin-top: 0;
  font-size: 1em;
  color: #0073e6;
}

.article-card .date {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 10px;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination button {
  padding: 10px 20px;
  margin: 0 5px;
  border: none;
  border-radius: 5px;
  background: #0073e6;
  color: #fff;
  cursor: pointer;
  font-size: 1em;
}

.pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}


.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  gap: 5px;
  padding-bottom: 5em;
}

.pagination button, .pagination span {
  padding: 10px 15px;
  margin: 0;
  border: none;
  border-radius: 5px;
  background: #0073e6;
  color: #fff;
  cursor: pointer;
  font-size: 1em;
}

.pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.pagination .current-page {
  background: #004a99;
  font-weight: bold;
  pointer-events: none;
}


@media (max-width: 800px) {

    .service {
        background-position: center;
        background-size: cover;
        font-size: 18px;
    }
  }


/* ここまで */


  
.fade-in {
    opacity: 0; /* 初期状態は非表示 */
    transition: opacity 3s ease-out, transform 3s ease-out; /* スムーズなアニメーション */
    will-change: opacity, transform; /* レンダリング最適化 */
  }
  
  .fade-in.visible {
    opacity: 1; /* 表示 */
    transform: translateY(0); /* 元の位置に */
  }

    /* 再度のご相談ボタン */


    .floating_consultation {
        position: fixed;
        right: -150px; /* 初期位置は画面外 */
        top: 50%;
        transform: translateY(-50%);
        transition: right 1s ease; /* スライドインアニメーション */
        z-index: 1000;
      }
    
      .floating_consultation.active {
        right: -5px; /* スクロール時に画面内に表示 */
      }
    
      .consultation_link {
        text-decoration: none;
        color: #fff; /* テキストの色 */
        writing-mode: vertical-rl; /* 縦書き */
        text-orientation: upright; /* 縦方向文字の回転なし */
        line-height: 1.8;
        letter-spacing: 2px; /* 文字間隔を広げる */
        padding: 1.5em .5em;
        background: #005183; /* 初期背景色（単色） */
        border-radius: 8px;
        position: relative; /* 擬似要素基準 */
        overflow: hidden; /* 擬似要素がはみ出さないように */
      }
    
      .consultation_link::before {
        content: ""; /* 擬似要素 */
        position: absolute;
        top: -150%; /* 初期位置 */
        left: 0;
        width: 100%;
        height: 300%; /* 高さ広く */
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.5) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: translateY(0); /* 初期位置 */
        transition: transform 1s ease; /* スムーズな動き */
        opacity: 0; /* 非ホバー時は透明 */
      }
    
      .consultation_link:hover::before {
        transform: translateY(100%); /* 下に移動 */
        opacity: 1; /* ホバー時に表示 */
      }
    
    /* 1200px以上で縦にジグザグに配置 */
    @media (max-width: 500px) {
      .floating_consultation.active {
        right: 20px; /* スクロール時に画面内に表示 */
      }
    }
    


    

/* ここまで */



.wrapper_outside {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: burlywood;
  z-index: 9999; /* 最前面に表示 */
  transition: opacity 2s ease, transform 5s ease, visibility 1s ease; /* フェードと移動用 */
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 初期位置 */
}

.wrapper_outside.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px); /* 上に移動 */
}

.wrapper{
  width:200px;
  height:60px;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
.circle{
  width:20px;
  height:20px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left:15%;
  transform-origin: 50%;
  animation: circle .5s alternate infinite ease;
}

@keyframes circle{
  0%{
      top:60px;
      height:5px;
      border-radius: 50px 50px 25px 25px;
      transform: scaleX(1.7);
  }
  40%{
      height:20px;
      border-radius: 50%;
      transform: scaleX(1);
  }
  100%{
      top:0%;
  }
}
.circle:nth-child(2){
  left:45%;
  animation-delay: .2s;
}
.circle:nth-child(3){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.shadow{
  width:20px;
  height:4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top:62px;
  transform-origin: 50%;
  z-index: -1;
  left:15%;
  filter: blur(1px);
  animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
  0%{
      transform: scaleX(1.5);
  }
  40%{
      transform: scaleX(1);
      opacity: .7;
  }
  100%{
      transform: scaleX(.2);
      opacity: .4;
  }
}
.shadow:nth-child(4){
  left: 45%;
  animation-delay: .2s
}
.shadow:nth-child(5){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.wrapper span{
  position: absolute;
  top:75px;
  font-size: 20px;
  letter-spacing: 12px;
  color: #fff;
  left:15%;
}


.character_loading img{
  width: 100%;
}




.character_loading {
  position: absolute;
  bottom: -4em;
  right: -7em; /* 初期位置を画面外に設定 */
  width: 100px; /* キャラクターの幅 */
  animation: move-horizontal 20s linear infinite, zigzag-rotate 1s ease-in-out infinite;
}



@media (max-width: 500px) {
  .character_loading {
    position: absolute;
    bottom: -4em;
    right: -4.5em; /* 初期位置を画面外に設定 */
    width: 80px; /* キャラクターの幅 */
    animation: move-horizontal 20s linear infinite, zigzag-rotate 1s ease-in-out infinite;
  }
  
}