@charset "utf-8";

html{
  font-family: 'poppins', sans-serif;

}

/* 'Noto Sans JP', sans-serif; */

body {
    background-color: #edf1ea}

.pop11 {font-family: 'poppins', sans-serif;}


.container {
    width: 90%;
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

/* ヘッダー */

.header_menu .menu1 {
    display: flex;
    margin-right: 45px;
}

header {
    padding: 27px 0;
}

.logo {
    font-size: 24px;
    font-weight: 700;
}

.logo span {
    color: rgba(60, 107, 16, 0.98);
}

.header_menu li {
    margin-left: 40px;
}

.header_menu li a {
    transition: .3s;
}

.header_menu li a:hover {
    color: rgba(60, 107, 16, 0.98);
    transition: .3s;
}

/* PCは既存設定そのまま */
/* レスポンシブ対応時のみ非表示 */
@media (max-width: 1024px) {
    .header_menu {
        display: none;
    }
}


/* ----------------ハンバーガーメニュー --------------------*/
 .hamburger-morph {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-morph__icon {
  width: 100%;
  height: 100%;
}

.hamburger-morph__line {
  fill: none;
  stroke: black;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-morph__line:nth-child(1) {
  stroke-dasharray: 60 207;
}

.hamburger-morph__line:nth-child(2) {
  stroke-dasharray: 60 60;
}

.hamburger-morph__line:nth-child(3) {
  stroke-dasharray: 60 207;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}

.nav-morph {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(60, 107, 16, 0.98);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 900;
}

.nav-morph.active {
  clip-path: circle(150% at calc(100% - 44px) 44px);
}

.nav-morph__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.nav-morph__list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.nav-morph__item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-morph.active .nav-morph__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
.nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
.nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
.nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }

.nav-morph__link {
  position: relative;
  display: inline-block;
  padding: 20px;
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

.nav-morph__text,
.nav-morph__hover {
  display: block;
  transition: transform 0.3s ease;
}

.nav-morph__hover {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(0%);
}

.nav-morph__link:hover .nav-morph__text {
  transform: translateY(-100%);
}

.nav-morph__link:hover .nav-morph__hover {
  transform: translateY(-100%);
}
/* ----------------ハンバーガーメニューここまで -----------------*/

/* メイン -----------------------------------------*/
.video-wrap {
  position: relative;
  background-position: center;
  background-size: cover;
  width: 1080px;       /* PCでは固定幅 */
  height: 540px;       /* PCでは固定高さ */
  margin: 30px auto 90px auto; /* 中央寄せ */
  border-radius: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #322c0a;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 枠いっぱいに表示 */
  border-radius: 30px;
}

.p12 {
  font-family: sans-serif;
  color: #ffffff;
  font-size: 400%;
  position: absolute;
  left: 297px;
  top: 231px;
  z-index: 1;
  
}

/* スマホ用レスポンシブ */
@media (max-width: 767px) {
  .video-wrap {
    width: 100%;       /* スマホでは画面幅いっぱい */
    height: auto;      /* 高さは自動 */
    aspect-ratio: 16/9; /* アスペクト比を維持して縮小 */
    border-radius: 20px;
  }

  .p12 {
    font-size: 180%;   /* 文字も小さめに調整 */
    left: 10%;
    top: 40%;
  }
}


#hero::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(60, 107, 16, 0.98);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
    z-index: 1;
}
.hero_inner {
    z-index: 2;
    color: #0c3803;
    width: 100%;
    text-align: center;
}
.hero_inner p {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
}
.hero_inner h1 {
    font-size:  40px;
    font-weight: 700;
    margin-bottom: 30px;
}


/* プロフィール -----------------------------------*/

.title .titlemei1 {
    text-align: left;
    margin-left: -60px;
}

#concept {
    margin-bottom: 20px;
}
.title {
    font-size: 40px;
    font-weight: 500;
    color: rgba(60, 107, 16, 0.98);
    margin-bottom: 40px;
    font-family: sans-serif;
    font-weight: bold;
}
#concept h3 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 200px;
    margin-left: 800px;
}
.column-2 {
    width: 48%;
}

.concept-img {
    background-image: url(../imeges/concept.png);
    background-position: center;
    background-size: cover;
    height: 100px;
    border-radius: 10px;
}

/* すけまるの部分-------------------------------- */

.heading {
    font-family: 'Dancing Script', cursive;
    font-size: 200px;
    font-weight: 700;
    color: rgba(60, 107, 16, 0.98);
    opacity: 0.1;
    position: absolute;
    left: 81%;
    top: 337vh; /* トップビュー下からスタート */
    transform: translateX(-50%);
    white-space: pre-line; /* 改行を反映 */
}

/* PC・タブレット・スマホ共通で表示 */
@media (max-width: 1024px) {
    .heading {
        font-size: 150px; /* レスポンシブ用に調整 */
    }
}

@media (max-width: 767px) {
    .heading {
        font-size: 100px; /* スマホ用にさらに縮小 */
    }
}






/* スキルとアバウト */
#skill {
    margin-bottom: 120px;
}
.skill_inner {
    margin-bottom: 40px;
    position: relative;
}
.column-40 {
    width: 20%;
}
.column-55 {
    width: 55%;
    font-size: 30px;
    font-weight: bold;
    font-family:sans-serif;
    
}
#skill img {
    border-radius: 20px;
    box-shadow: 3px 3px 6px -2px #555,
  3px 3px 8px rgba(255,255,255,0.8) inset;
}

.text {
    line-height: 2;
    font-size: 16px;
}


/* ワーク */

/* ---------------スライド--------------------- */

 .fv{
  position: relative;
}
/* 
.fv img{
  height: 75vh;
  width: 100%;
  object-fit: cover;
  vertical-align: top;
} */ 


.fv img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 歪み防止 */
}




.fv p{
  color: #fff;
  font-size: 27px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.fv a{
  position: absolute;
  position: fixed;
  top: 50%;
  right: 0;
  color: #fff;
  writing-mode: vertical-rl;
  text-decoration: none;
  transform: translate(0%, -50%);
  border: solid 1px #fff;
  font-size: 20px;
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.fv a:hover{
  background: #fff;
  color: #000;
  border: solid 1px #000;
} 

/* ------------------ Work セクションのスライダー ------------------ */

/* ---------------ボタン「もっと見る」------------------ */

/* 「もっと見る」ボタン（PC） */
.btn {
    font-size: 18px;
    border: solid 2px #072801;
    border-radius: 5px;
    display: inline-block;
    width: 120px;
    line-height: 25px;
    text-align: center;
    transition: .2s;
    background: #ffffff;
    color: #000000;
     /* PC時は右下 */
      margin-left: auto;
    margin-right: 0;
    display: block;
}


    /* ホバー時 */
.btn:hover {
    color: rgba(60, 107, 16, 0.98);
    background: rgba(60, 107, 16, 0.98);
    border: solid 1px #000000;
}

/* タブレット・スマホ対応 */
@media (max-width: 1024px) {
    .btn {
        width: 100px;
        font-size: 16px;
        /* 下中央に寄せる */
        margin: 20px auto 0;
    }
}

@media (max-width: 767px) {
    .btn {
        width: 90px;
        font-size: 14px;
        padding: 10px 5px;
        margin: 15px auto 0;
    }
}


/* ワーク 別ページ*/

.title1 {
    font-size: 40px;
    font-weight: 500;
    color: rgba(60, 107, 16, 0.98);
    margin-top: 100px;
    margin-bottom: 30px;
    margin-top: auto;
    margin-left: 6px;
    text-align: center;
}


#workbetu {
    margin-bottom: 120px;
}
.workbetu1 {
    margin-bottom: 40px;
    position: relative;
}

.workbetu3 {
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    font-family:sans-serif;
    margin-left: 113px;
    
}

/* Workセクションの画像レスポンシブ対応 */

.workbetu2 {
    width: 100%;
    max-width: 1000px; /* 任意で調整 */
    margin: 0 auto;
    text-align: center;
    /* アスペクト比を維持するためのpaddingトリック */
    position: relative;
    padding-top: 56.25%; /* 16:9比率 */
    overflow: hidden;
}

.workbetu2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 全体表示 */
}

.workbetutext {
    line-height: 2;
    font-size: 16px;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

/* レスポンシブ時にテキストを画像下に左寄せ */
@media (max-width: 1024px) {
    .workbetu1 {
        flex-direction: column; /* 縦並び */
        align-items: flex-start; /* 左寄せ */
    }

    .workbetu2 {
        width: 100%; /* 画像幅を調整 */
        margin-bottom: 10px; /* 画像とテキストの間隔 */
    }

    .workbetu3 {
        width: 100%; /* テキスト幅を画像と同じに */
        margin-left: 0;
        text-align: left; /* 左寄せ */
        padding: 0 10px; /* 少し余白 */
    }

    .workbetutext {
        font-size: 16px;
        line-height: 1.8;
    }
}




/*ーーーーーー ワーク別スクロールダウン ーーーーーーーーーーーーーーーーーーーーーーーー*/

.scroll-controls {
    position: fixed;
    top: 88%;         /* 画面中央よりやや下 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* 矢印デザイン */
.scroll-controls a {
    display: inline-block;
    width: 32px;
    height: 32px;
    position: relative;
    text-decoration: none;
    color: #000;
}

/* 下向き矢印 */
.scroll-down-btn:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #000;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    animation: bounce 2s linear infinite;
}

/* 上向き矢印 */
.scroll-up-btn:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #000;
    border-width: 0 0 2px 2px;
    transform: rotate(135deg);
    animation: bounce 2s linear infinite;
}

@keyframes bounce {
    0%,20%,50%,70%,80%,100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* スマホでは縦並び */
.scroll-controls {
    position: fixed;
    top: 88%;          /* 画面中央よりやや下 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

/* 共通スクロールボタン */
.scroll, .scroll-up {
    position: relative;
    width: 3em;
    height: 3em;
    border: 1px solid rgba(60, 107, 16, 0.98);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 下向き矢印 */
.scroll::after {
    content: '';
    width: 1em;
    height: 1em;
    border-left: 1px solid rgba(60, 107, 16, 0.98);
    border-bottom: 1px solid rgba(60, 107, 16, 0.98);
    transform: rotate(-45deg);
}

/* 上向き矢印 */
.scroll-up::after {
    content: '';
    width: 1em;
    height: 1em;
    border-left: 1px solid rgba(60, 107, 16, 0.98);
    border-bottom: 1px solid rgba(60, 107, 16, 0.98);
    transform: rotate(135deg);
}

/* リップルアニメーション */
.scroll::before, .scroll-up::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    box-shadow: 0 0 0 0 rgba(255, 230, 64, .2);
    border-radius: 50%;
    opacity: 0;
    animation: ripple 3s infinite;
}

@keyframes ripple {
    0% { opacity: 0; }
    30% { opacity: 1; }
    60% { box-shadow: 0 0 0 2em rgba(255, 230, 64, .2); opacity: 0; }
    100% { opacity: 0; }
}


/* ----------------------------------------- */

/* ----------ブログページ -----------------------*/

.section22 .center {
    text-align: center;
    
}


.title .titlemei4 {
    text-align: center;  /* 左寄せ → 中央寄せ */
    margin-top: 50px;
    color: rgba(60, 107, 16, 0.98);
}

/* -------------blog 別ページ　２２・２３ ------------*/
/* Blogタイトル */


.blog>p{
    width: 70%;
    color: #516c3c;
    margin: 0 auto;
    position: relative;
 }
.moji {
    width: 70%;
    color: #516c3c;
    margin: 0 auto;
    position: relative;
}
.card-list{
    display: grid;
    grid-template-columns: repeat(4, 0.05fr);
    gap: 1rem;
    justify-content: center;
    perspective: 1000px;
    margin-bottom: 50px;
    margin-top: 70px;
}

.card-item{
    width: 250px;
    height: 250px;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 10px;
}

.card-item1 {
    display: block;
    width: 350px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 10px;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  transition: transform 0.8s ease;
  background-position: center;
  background-size: cover;
}

.card-front1,
.card-back1 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  transition: transform 0.8s ease;
  background-position: center;
  background-size: cover;
}


.card-front{
    /* background-image: url(../img/b2.jpg); */
    transform: rotateY(0deg);
    box-shadow: 0px 0px 16px -6px rgba(0,0,0,2);
    font-display: block;
    margin-left: 15px;

}
.card-front1 {
    /* background-image: url(../img/b2.jpg); */
    transform: rotateY(0deg);
    box-shadow: 0px 0px 16px -6px rgba(0,0,0,2);
    font-display: block;
    margin-left: 15px;
}

.card-back {
  /* background-image: url(../img/b1.jpg);  */
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  color: #516c3c;
  text-align: center;
}
.card-back1 {
  /* background-image: url(../img/b1.jpg);  */
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  color: #516c3c;
  text-align: center;
}

.card-front{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 10px;

}

.card-back  {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 10px;
}

.card-front1 {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 10px;

}

.card-back1  {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 10px;
}


.card-back h3 {
  font-family: 'pacifico',cursive;
  position: relative;
}

.card-back h3::before {
    content: attr(title-ja);
    font-family: 'zen kaku gothic new',sans-serif;
    font-size: 1.2rem;
    font-weight: 400;

    position: absolute;
    top : 100%;
    left: 50%;
    transform: translateX(-50%);

}

.card-back1 p {
    font-size: 1.4rem;
    margin-top: 4rem;
}

.card-back1 h3 {
  font-family: 'pacifico',cursive;
  position: relative;
}

.card-back1 h3::before {
    content: attr(title-ja);
    font-family: 'zen kaku gothic new',sans-serif;
    font-size: 1.2rem;
    font-weight: 400;

    position: absolute;
    top : 100%;
    left: 50%;
    transform: translateX(-50%);

}

.card-back1 p {
    font-size: 1.4rem;
    margin-top: 4rem;
}


.card-item:hover .card-front{
    transform: rotateY(180deg);
}

.card-item:hover .card-back{
    transform: rotateY(360deg);
}

.card-item1:hover .card-front1{
    transform: rotateY(180deg);
}

.card-item1:hover .card-back1{
    transform: rotateY(360deg);
}


/* flipクラスが付いたら裏面を表示レスポンス時にカードが自動反転 */
.flip .card-front1 {
  transform: rotateY(180deg);
}
.flip .card-back1 {
  transform: rotateY(360deg);
}



/* -------blog.次のページボタン ----------------------*/
.pagination-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
    margin-bottom: 40px;
}

.pagination-3 a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-bottom: 2px solid rgba(60, 107, 16, 0.98);
    color: #333;
    text-decoration: none;
}

.pagination-3 .current a {
    border-bottom: 2px solid #1c0f03;
    pointer-events: none;
}

/* -----------blogsyousai　詳細ページ------------------------ */

.title1 {
    font-size: 40px;
    font-weight: 500;
    color: rgba(60, 107, 16, 0.98);
    margin-top: 100px;
    margin-bottom: 30px;
    margin-top: auto;
    margin-left: 6px;
    text-align: center;
}



.p1 {
    margin-bottom: 30px;
}

.moji1 {
   color: #516c3c;
    margin: 0 auto;
    position: relative;
    width: 90%;
    max-width: 1120px;
    margin: 0 auto; 
}



.mojisyousai1 {
    text-align: center;
    font-size: 16px;
    
}

.blogsyousai {
    width: 30%;
    margin: 0 auto;
    
}


.blogsyousai img {

    width: 100%;
    margin-bottom: 30px;

}

/* PC時は幅30%でもOKですが、スマホだと画面幅いっぱいに広げたい。 */
@media (max-width: 1024px) {
    .blogsyousai {
        width: 80%;  /* スマホ・タブレットで幅を広く */
        margin: 0 auto;
    }

    .mojisyousai1 {
        font-size: 14px; /* 小さめに調整 */
        text-align: left; /* 左寄せで読みやすく */
        padding: 0 10px;
    }

    .title1 {
        font-size: 28px;
        margin-top: 50px;
    }

    .moji1 {
        font-size: 12px;
    }
}


/* PCは改行なしで、レスポンシブ時は <br> を有効にして見やすく： */
@media (max-width: 1024px) {
    .p1 br {
        display: inline;  /* 改行有効 */
    }
}

@media (min-width: 1025px) {
    .p1 br {
        display: none; /* PCでは改行無効 */
    }
}

/* 画面幅に応じて文字が大きすぎないように調整： */
@media (max-width: 767px) {
    .title1 {
        font-size: 22px;
    }

    .moji1 {
        font-size: 11px;
    }

    .mojisyousai1 {
        font-size: 13px;
    }
}



/*------------- アバウト ----------------------------------------*/

.section2 h2 .titlemei5 {
    text-align: left;
    margin: 20px;
}

.heading1 { 
    font-family: 'Dancing Script', cursive;
    font-size: 200px;
    font-weight: 700;
    color: #80BA4A;
    opacity: 0.1;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-30%);
    z-index: -1;
}

/* タブレット以下で非表示 */
@media (max-width: 1024px) {
    .heading1 {
        display: none;
    }
}

/* スマホ以下でも非表示 */
@media (max-width: 767px) {
    .heading1 {
        display: none;
    }
}


.text1 {
    text-align:center;
    display: block;
    margin-right: 200px;
    font-size: 16px;
    margin-top: 30px; 
}

/* PCは既存設定そのまま */

/* タブレット（幅1024px以下） */
@media (max-width: 1024px) {
    .text1 {
        margin-right: 0;
        font-size: 15px;
        line-height: 1.8;   /* 行間を広めにして読みやすく */
        text-align: left;
        padding: 0 20px;    /* 横に余白を作る */
    }
}

/* スマホ（幅767px以下） */
@media (max-width: 767px) {
    .text1 {
        font-size: 14px;
        line-height: 1.7;
        text-align: left;
        margin-right: 0;
        padding: 0 15px;
    }
}


.t1 {
    margin-left: 409px;
    
}


ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 35px;
    list-style-position: inside;
}

.text1 ul li{
    list-style-type: disc !important;/*黒文字つける*/
    list-style-position: inside;/*黒文字を内側に*/
    text-align: left;
    padding-left: 20px;
}

/* レスポンシブ時も改行させず横並び */
@media (max-width: 1024px) {
   ul li {
        display: flex;
        flex-wrap: nowrap; /* 改行させない */
        gap: 20px;         /* 項目間の余白 */
        padding-left: 0;
        list-style: none;  /* 黒丸非表示にする場合 */
    }

   ul li {
        white-space: nowrap; /* 改行させない */
        font-size: 16px;     /* 必要に応じて調整 */
    }
}

@media (max-width: 767px) {
    ul li {
        font-size: 14px;     /* スマホ用フォントサイズ */
    }
}



.column-41 {
    width: 38%;
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
}

.column-41 img {
    width: 100%;  /* 必要に応じて max-width も指定 */
    max-width: 400px;
    height: auto;
}

@media (max-width: 1024px) {
    .skill_inner {
        flex-direction: column; /* 横並び → 縦並び */
        align-items: center;    /* 中央寄せ */
    }
    .column-41, .column-55 {
        width: 90%; /* 画面幅に合わせる */
        margin: 0 auto;
    }
    .column-41 img {
        width: 100%;
        max-width: 400px;
        height: auto;
    }
}
@media (max-width: 1024px) {
    .column-41 {
        margin-right: 0;
        margin-bottom: 20px; /* 縦並びのときの上下の隙間 */
    }
}

/* PC表示では改行を消す */
@media (min-width: 1025px) {
  .text br {
    display: none; /* PC時は <br> を無効化 */
  }
}




/* ---------お問い合わせ　セクション-------------------------------------- */

.section3 {
    padding-top: 60px;
    margin-bottom: 130px;
}

.section3 .container {
    max-width: 1080px;
    width: 90%;
    margin: 0 auto;
}

.section3 h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: sans-serif;
    text-align: center;
    margin-bottom:5px;
    color: rgba(60, 107, 16, 0.98);
}

.section3 hr {
    border: solid 1px #000000;
    margin: 0 auto 40px;
    width: 60px;
}

/* ---------------問い合わせフォームの中------------------------------- */

.section3 form {
    max-width: 540px;
    margin: 0 auto;
}

.section3 label {
    display: block;
    color: rgba(60, 107, 16, 0.98);
    font-size: larger;
    font-family: sans-serif;
}



.section3 input, .section3 textarea {
    display: block;
    width: 100%;
    padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #ffffff;
    color: black;
    background: #ffffff;
    border: solid 2px #000000;
    border-radius: 10px;
}

.section3 input[type = submit] {
    text-align: center;
    background-color: #ffffff;
    color: #000000; /*送信文字のカラー */
    font-family: sans-serif;
    letter-spacing: 2px;
    border-radius: 6px;
    transition-duration: .2s;
}

.section3 input[type=submit]:hover {
    background-color: rgba(60, 107, 16, 0.98);
}


/* ------------------ フッター -------------------------------*/

footer {
    color: #000000;
    text-align: center;
    font-size: 12px;
}
footer .container {
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
    border-top: solid 1px #000000;
    padding: 50px 0 20px;
}
footer .logo {
    font-size: 20px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 40px;
    color: rgba(60, 107, 16, 0.98);
}
footer ul {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;

}
footer ul li {
    font-size: 15px;
    margin: 0 20px;
}
footer ul li a {
    transition: .2s;
}
footer ul li a:hover {
    transition: .2s;
    opacity: 0.6s;
}

/* スマホ・タブレット対応 */
@media (max-width: 1024px) {
  footer ul {
    flex-direction: column; /* 縦並びにする */
    align-items: center;    /* 真ん中に寄せる */
    gap: 15px;              /* 各リンクの間に余白 */
    margin-bottom: 40px;
  }

  footer ul li {
    margin: 10px 0; /* 横の余白をなくし、縦に余白を追加 */
  }

  footer .logo {
    margin-bottom: 30px; /* 少し詰める */
  }
}



/*------------------- トップへ戻るボタン -------------------------------- */

.top_button{
  position: fixed;
  bottom: 30px;
  right: 15px;
  cursor: pointer;
  padding: 13px 5px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: solid 2px #0a3c07;
  background-color: rgba(60, 107, 16, 0.98);
  color: #ffffff;
  text-decoration: none;
  z-index: 1;
  display: none; /*ここでボタンが消える*/
  margin-right: 20px;
}

.top_button:hover {
  color: #0a3c07;
  background-color: white;
}



/* ーーーーここは動かしたらだめ！！！！！ーーーーーーーーーーーーーーーーーーーーーーーーー */
/* Blogカード レスポンシブ調整 */
/* ---------------- レスポンシブ：縦1列、正方形 ---------------- */
@media (max-width: 1024px) {
    .card-list {
        display: flex;           
        flex-direction: column;  
        align-items: center;     
        gap: 30px;               /* カード間の余白 */
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .card-item, .card-item1 {
        position: relative;       /* 回転アニメーションに対応 */
        width: 90%;               /* 横幅を90% */
        max-width: 400px;         /* 最大幅 */
        aspect-ratio: 1 / 1;      /* 正方形にする */
        margin: 0 auto;           
    }

    .card-front, .card-front1,
    .card-back, .card-back1 {
        position: absolute;       /* 回転アニメーションを維持 */
        width: 100%;
        height: 100%;             /* 正方形に合わせる */
        border-radius: 10px;
    }

    .card-back p, .card-back1 p {
        font-size: 1.2rem;
        margin-top: 1.5rem;
    }

    .card-back h3, .card-back1 h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .card-list {
        gap: 20px;  /* スマホでは余白を少し狭く */
    }

    .card-item, .card-item1 {
        width: 95%;
    }

    .card-back p, .card-back1 p {
        font-size: 1rem;
        margin-top: 1rem;
    }

    .card-back h3, .card-back1 h3 {
        font-size: 1.2rem;
    }
}

/* Blogタイトル 真ん中寄せ*/

.title01 {
    font-size: 40px;
    font-weight: 500;
    color: rgba(60, 107, 16, 0.98);
    margin: 100px auto 30px auto; /* 上下マージンは残す */
    text-align: center;           /* 文字中央 */
    font-family: sans-serif;
    display: flex;                /* flex化 */
    justify-content: center;      /* 横方向中央 */
    width: 100%;                  /* 親の幅いっぱい */
}


/* 親要素の修正 */
.section22 .container {
    display: block;    /* flexを解除 */
    width: 90%;
    max-width: 1120px;
    margin: 0 auto;    /* 横中央に */
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .title01 {
        font-size: 32px;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}