@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* PCサイズ（960px以上など）になったらリッチな配置にする */
@media (min-width: 960px) {
    .gnav ul {
        justify-content: center; /* 右寄せ */
        margin-left: 300px;        /* PC時のみ大きな余白 */
        gap: 90px;                 /* PC時のみ広い間隔 */
    }
}

.icon{
    width:40px;
    min-width: 40px;
    height:auto;
    margin-top: 10px;
    margin-left: 10px;
    flex-shrink: 0; /* テキストが長くなっても、アイコンは絶対に縮ませない */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    display: flex;
    align-items: center; /* ヘッダー内の中身を上下中央に */
    justify-content: space-between; /* ロゴとナビを両端に分ける場合 */
    padding: 10px 20px; /* ここでヘッダー全体の上下の厚みを決める */
    box-sizing: border-box;
}

.gnav{
    height: auto;
}

.gnav ul {
    display: flex;
    gap: 20px;
    margin: 0; /* 余計なマージンを消す */
}

.gnav a{
    color:rgb(159, 157, 155);
    font-size:14px;
    font:bold;
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
}
.gnav a:hover{
    color:rgb(107, 105, 105);
    margin-left: 20px;
    transition-property: background-color,margin-left;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: ease-in;
}

body {
    font-family:"Zen Kaku Gothic New", sans-serif;    /*フォントはZen Kaku Gothic New*/
    color:rgb(159, 157, 155);
    justify-content: center;
    align-items: 120;
    height: 100vh;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: visible;
    overflow-x: hidden;
    cursor:none;
}
#cursor{
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;      /* 円のサイズ */
    height: 20px;
    background-color: rgba(175, 165, 165, 0.5); /* あなたのテーマカラー */
    border-radius: 50%;
    pointer-events: none; /* クリックを邪魔しない */
    z-index: 9999;        /* 一番手前に */
    transition: transform 0.02s ease-out; /* 少し遅れてついてくる演出 */
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, transform 0.3s;
}

/* リンクにホバーした時の変化 */
#cursor.active {
    width:40px;
    height:40px;
    background-color: rgba(112, 128, 144, 0.5);
}

/* すべての要素で標準のカーソルを非表示にする */
*, a, button {
    cursor: none !important;
}
a:hover{
    text-decoration-line: underline;
}

.rotating-svg {
    width: 100vw;
    max-width: 400px;
    height: auto;
    margin-top:100px;
    margin-left: 80px;
    flex-shrink: 1; /* 画面が狭いときは縮むことを許可 */
}

text.rotating-text {
    font-family: "Zen Kaku Gothic New", sans-serif;;
    font-size: 9px;
    font-weight: 900;
    fill: #afa5a5;
    text-transform: uppercase;
    letter-spacing: 5.5px;
}
.rotate-group {
    /* viewBoxが 0 0 200 200 なので、その中心である 100 100 を明示 */
    transform-origin: 100px 100px; 
    animation: rotate-text 20s linear infinite;
}

@keyframes rotate-text {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

text {
    font-family: "Zen Kaku Gothic New", sans-serif;;
    font-size: 12px; /* 文字サイズ */
    font-weight: 900;
    fill: rgb(250, 249, 248);
    text-transform: uppercase;
    /* 文字の間隔を広げて一周を埋める */
    letter-spacing: 5.5px; 
 }

/* ホバー時に一時停止する演出 */
.rotate-group:hover {
     animation-play-state: paused;
}

.mainarea{
    display: flex;
    background-color:#F2F0EF;
    justify-content:space-between;
    align-items: center;
    gap:40px;
    width: 100%;
    max-width: none;
    min-height:300px;
    padding: 30px auto;
    box-sizing: border-box;
}

/* ゆったりと（テキスト）部分 */
.maintext {
    /* PC版：横書き */
    color:#afa5a5;
    font-family:"Zen Kaku Gothic New", sans-serif;
    font-size:30px;
    flex:1;
    width:100%;
    max-width: 1280px;
    margin: 50px auto;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    writing-mode: horizontal-tb;
    line-height: 1.3;
}
.maintext p{
    font-size:20px;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .mainarea {
        flex-direction: column; /* 横並びから縦並びに変更 */
        height: auto;
        padding: 100px 0px; /* ヘッダーに被らないよう余白を調整 */
    }

    .rotating-svg {
        width: 100vw;          /* 少し大きくすると相対的に余白が減ります */
        max-width: 400px;     /* 大きくなりすぎないよう制限 */
        margin-left: -20px;    /* ★マイナスのマージンを使うと左に突き出せます */
        margin-top: 50px;     /* PC版の120pxが広すぎる場合は上も調整 */
        margin-bottom: 30px;
        flex-shrink: 0;       /* 潰れないように固定 */
    }

  .maintext {
    /* スマホ版 */
    width: auto;
    height: 30px;       /* 100pxだと短いので、文字が入り切る高さに広げる */
    margin: 0;      /* これで要素自体が画面の左右中央に寄ります */
    /* 3. 中の文字を上下左右中央に寄せる */
    display: flex;
    text-align:left;
    justify-content: center;
    font-family: "Zen Kaku Gothic New", sans-serif;
  }
}

/* ここからはWORKS部分 */

.works-container{
    width: 100%;                  /* 画面幅いっぱい */
    aspect-ratio: 16 / 9;         /* 横と縦の比率を固定（例：16:9） */
    background-image: url(../images/works-haikei.png);
    background-size: cover;
    background-position: center;  /* 常に中央を表示 */
    background-repeat: no-repeat;
    gap:30px;
    min-height: 100vh;
    padding:100px 0;
    display: flex;
    align-items: center;
    flex-direction: column;       /* 縦並び */
    justify-content: center;
    gap:40px;
    position: relative;
    margin-top: 10px;
}

.section-title{
    margin: 0;
    width: 100%;
    color:#afa5a5;
    margin: 100px auto;
    font-family: "Zen Kaku Gothic New", sans-serif;
    text-align: center;
    align-self: flex-start;
}

.works-grid{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:30px;
    position: relative;
    width:100%;
    max-width: 1350px;
    height: 100%;
    border:#ffffff solid 2px;
    border-radius: 20px;
    /* 背景とガラス効果 */
    background: rgba(255, 255, 255, 0.2); /* 薄い白の透過 */
    backdrop-filter: blur(5px);         /* ぼかし（ここが重要） */
    -webkit-backdrop-filter: blur(15px); /* Safari用 */
}
.works-list{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:50px;
    width: 100%;
}

a.works-item1{
    position: relative;
    width: 20%;
    aspect-ratio:1/1;
    background-color: #e0e4e7;
    border: #ffffff solid 2px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:clamp(10px, 2vw, 30px);
}
.works-item1 img{
    width: 50%;
}
.works-item1 p{
    font-size:20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

a.works-item2{
    position: relative;
    width: 20%;
    aspect-ratio:1/1;
    background-color: #d5e1df;
    border: #ffffff solid 2px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:clamp(10px, 2vw, 30px);
}
.works-item2 img{
    width: 45%;
}
.works-item2 p{
    font-size:20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

a.works-item3{
    position: relative;
    width: 20%;
    aspect-ratio:1/1;
    background-color: #ede1e3;
    border: #ffffff solid 2px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:clamp(10px, 2vw, 30px);
}

.works-item3 img{
    width: 45%;
}
.works-item3 p{
    font-size:20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* リンクにしたことで発生する初期スタイルを無効化 */
.works-item1, .works-item2,.works-item3,.works-link {
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 文字色を親から継承する */
    display: flex;         /* これでFlexboxレイアウトを維持 */
    /* その他、元の .works-item1 の指定があればそれを引き継ぐ */
}


/* 画面幅が 768px 以下の時 */
@media screen and (max-width: 768px) {
    /* 1. 全体を包む枠（すりガラス） */
    .works-grid {
        width: 90%;             /* 画面幅の90% */
        margin: 20px auto;      /* 中央寄せ */
        padding: 30px 15px;     /* 上下にしっかり余白 */
        
        /* ★重要：これがないとpaddingで横幅がはみ出します */
        box-sizing: border-box; 
        
        height: auto;
        min-height: 100px;
        flex-shrink: 0;
    }

    /* 2. リスト（縦並び） */
    .works-list {
        display: flex;
        flex-direction: column;
        align-items: center;    /* ★これで子要素の中央寄せを強制 */
        gap: 25px;
        width: 100%;
    }

    h2 {
        color: #afa5a5;
        font-weight: bold;
    }

    /* 3. 各カード（アイテム）の調整 */
    a.works-item1, 
    a.works-item2, 
    a.works-item3 {
        width: 80%;             /* 親要素の中で80% */
        max-width: 300px;
        aspect-ratio: auto;   
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        padding: 20px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    /* 4. 画像と文字 */
    a.works-item1 img,
    a.works-item2 img,
    a.works-item3 img {
        width: 50%;
        max-width: 100px;
        height: auto;
        object-fit: contain; /* はみ出し対策 */
    }

    a.works-item1 p,
    a.works-item2 p,
    a.works-item3 p {
        color: #7d7d7d;
        font-size: 20px;
    }
}

/* すべてのアイテムに共通で追加 */
.works-item1, 
.works-item2, 
.works-item3 {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* 柔らかい動きにする */
    cursor: pointer;
}
/* ホバー時：少し浮き上がるような演出 */
.works-item1:hover, 
.works-item2:hover, 
.works-item3:hover {
    transform: translateY(-5px) scale(1.02); /* 上に少し移動し、わずかに拡大 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);  /* 柔らかい影を追加 */
    background-color: rgba(255, 255, 255, 0.4); /* 背景を少し明るくしてハイライト */
}

/* ホバー時：中のアイコンを少し強調 */
.works-item1:hover img, 
.works-item2:hover img, 
.works-item3:hover img {
    filter: brightness(1.1); /* アイコンの明るさを上げる */
}

/* クリック時：押し込まれたような沈み込み */
.works-item1:active, 
.works-item2:active, 
.works-item3:active {
    transform: translateY(0) scale(0.98); /* 元の高さに戻り、わずかに縮小 */
    box-shadow: none; /* 影を消す */
}

/* ここからはPAGETOP部分 */
.pagetop{
    position:fixed;
    text-align: right;
    z-index: 1000;
    margin:0;
    bottom: 40px;
    margin-top:50px;
    right:20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.pagetop a{
    color:rgb(159, 157, 155);
}

/* ここからはfooter */
footer{
    display: flex;
    flex-direction: column;   /* 縦並びの軸にする */
    justify-content: center; 
    align-items: center;       /* 横方向：中央寄せ */
    width:100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.5); /* 薄い白の透過 */
    backdrop-filter: blur(5px);         /* ぼかし（ここが重要） */
    -webkit-backdrop-filter: blur(15px); /* Safari用 */
    padding-bottom: 10px;
}

/* ここからはWORKS部分 */
.page_works{
    background-color:#F2F0EF;
}

/* ここからはWORKSタイトル部分 */
.works_title{
    color:#afa5a5;
    font-size: 30px;
    display:flex;
    margin: 40px 100px;
    text-align: center;
    padding-top: 150px;
}

/* works修飾線 */
.works_title::before,
.works_title::after {
    content: "";
    height:1px;
    background-color: #979a9a;
    flex-grow: 1;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}

.works_section{
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
    justify-content: center; 
    gap: 15px;               /* バナーと動画の間の隙間 */
    flex-wrap: wrap;         /* 画面が狭くなったら折り返す設定 */
}

#banner_section,#douga_section{
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner_container,.douga_container{
    display: flex;
    flex-direction: column; /* 中身を縦に並べる設定 */
    align-items: center;
    border-right:#7d7d7d solid 1px;
    margin: 20px 0;
}

.douga_container{
    border: none;
}

.banner_container a,
.douga_container a{
    display: flex;          /* ここが重要 */
    justify-content: center; /* 中身（画像）を横中央に */
    width: 50%;            /* 必要に応じて指定 */
}

.banner_container img,
.douga_container video{
    width: 80%;
    height: auto;
    margin-top:15px;
    margin-bottom: 30px;
    transition: opacity 0.3s ease; /* 0.3秒かけて変化させる */
    cursor: pointer;
}

.douga_container video{
    border: #979a9a solid 0.3px;
}

.banner_container img:hover,
.douga_container video:hover{
    opacity: 0.5; /* 0.0〜1.0の間で調整（数値が小さいほど白くなる） */
}

.banner_container figcaption,
.douga_container figcaption{
    border-top: #7d7d7d solid 1px;
    width: 70%;
}

@media screen and (max-width: 650px) {
    .works_section{
        flex-direction: column;
        align-items: center;
    }
    #banner_section,#douga_section {
        width: 100%;
        flex: none;
    }
    
    .banner_container, .douga_container {
        width: 100%; /* 縦並びのときは幅を広げる */
        max-width: 400px; /* ただし大きくなりすぎないように制限 */
        border-right: none;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }

    .banner_container figcaption {
        border-top: none;           /* 元の上の線を消す */
        border-bottom: #7d7d7d solid 1px; /* 下に線を引く */
        width: 80%;                 /* 線を少し長めに見せる */
        padding-bottom: 20px;       /* 文字と下の線の間の余白 */
    }

    .douga_container{
        border-bottom: none;
    }
}


/* ここからはdetail部分 */
.detail_title{
    position: relative; /* 子要素(::after)をこの中に入れるための基準点 */
    display: inline-block; /* 文字の長さに合わせて横幅を縮める */
    text-align: center;
    font-size:2rem;
    margin: 100px 0 50px 20px;
}

.detail_title::after {
    content: ""; /* これがないと表示されません */
    position: absolute; /* 親要素の好きな場所に配置できる */
    /* 位置の調整 */
    bottom: 1px;      /* 文字の下の方に配置 */
    left: 0%;
    /* 幅と高さ */
    width: 130%;       /* これで幅を自在に変えられます！ */
    height: 30px;     /* マーカーの太さ */
    /* マーカーの画像 */
    background-image: url('../images/marker-stroke.svg');
    background-size: 100% 100%;
    /* 文字の後ろに配置 */
    z-index: -1; 
}

.manabi_container,.douga_detail_container{
    display: flex;
    flex-direction: column;
    width: 25%;
    margin:0 auto;
    justify-content: center;
    align-items: center;
}

/* 画像はコンテナの中に収まるようにする */
.manabi_container img,
.douga_detail_container video{
    max-width: 25%;
    min-width: 250px;
    height: auto;
    display: block;
    margin: 15px auto;
}

.douga_detail_container video{
    border: #7d7d7d solid 0.5px;
}

.manabi_title,.douga_title{
    margin:0 auto;
    padding-left:25%;
    font-size:1.4rem;
}

.manabi_banner_content,
.douga_banner_content{
    display: flex;
    gap:5px;
    padding-bottom: 30px;
}

.manabi_banner1{
    border-radius: 15px;
    width:80px;
    text-align: center;
    background-color: #857870;
    color: #fff;
    font-size: 14px;
}

.manabi_banner2{
    border-radius: 15px;
    width:80px;
    text-align: center;
    background-color:#A69F92;
    color:#fff;
    font-size: 14px;
}

.douga_banner{
    border-radius: 15px;
    width:80px;
    text-align: center;
    background-color:#b29fa1;
    color:#fff;
    font-size: 14px;
}

.manabi_container,.douga_detail_container{
    display: flex;
    gap:20px;
    width:100%;
}

.manabi_details,.douga_details{
    flex:1;
    min-width: 0;
}

.manabi_list,.douga_list{
    display:flex;
    align-items: flex-start; /* 縦方向の開始位置を揃える */
    gap: 20px;               /* h3とpの間の隙間 */
    margin-top:50px;
    padding-top: 30px;
    border-top: #A69F92 solid 0.5px;
}

.manabi_list h3,
.douga_liset h3{
    flex-shrink: 0;    /* 【重要】ここがポイント！幅が狭まっても縮まないようにする */
    width: 250px;      /* h3の幅を固定する（必要に応じて調整してください） */
    margin: 0;         /* 念のため余白をリセット */
    font-size:15px;
    text-decoration: underline;
    padding-left: 15px;
}

.manabi_list p,
.douga_list p{
    margin:0;
    font-size:15px;
    width: 80%;
    padding-left: 15px;
}

.manabi_list:last-child,
.douga_list:last-child{
    border-bottom: #A69F92 solid 0.5px;
    margin-bottom:50px;
    padding-bottom:40px;
}

/* 画面幅が768px以下になった時 */
@media screen and (max-width: 650px) {
    .manabi_list,
    .douga_list{
        flex-direction: column;
        border: none;
    }
    .manabi_list:last-child,
    .douga_list:last-child{
    border-bottom:none;
    margin-bottom:50px;
    padding-bottom:40px;
    }

    .manabi_banner_content{
        width: 50%;
    }
}


/* ここからはCONTACT */
.contact_h1{
    color:#fefefe;
    margin: 70px auto;
    text-align: center;
    padding-top: 80px;
}
/* フォームを包んでいる外側の要素 */
.main_contact{
    display: block;
    text-align: center;
    justify-content: center;
    background-color: #979a9a;
    padding-bottom: 50px;
    color: #fcfcfc;
}
form{
    display: flex;           /* Flexboxを有効化 */
    flex-direction: column;  /* 子要素を縦に並べる */
    align-items: center;     /* 子要素を水平方向の中央に寄せる */
    width: 70%;
    margin: 0 auto;          /* 画面全体に対してform自体を中央に */
    font-size: 18px;
}
input[type="text"], 
input[type="email"], 
textarea {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    
    /* 追加：親のフォント設定を引き継がせる */
    font-family: inherit; 
    font-size: inherit;

    /* オプション：右下のつまみで勝手に広げられないようにする */
    resize: vertical; 
    
}
textarea {
    display: block;
    width: 80%;
}
form>p{
    width: 80%;              /* テキストの横幅も合わせる */
    text-align: left;  /* ラベルは左寄せにしたい場合 */
}
input[type="submit"]{
    padding: 10px 50px;
    color: #fff;
    background-color: #afa5a5;
    border: none;  
    box-sizing: border-box;
}

.button-container {
    width: 80%;           /* 入力欄（inputやtextarea）と同じ幅にする */
    display: flex;        /* 中身を動かせるようにする */
    justify-content: flex-end; /* 中身（ボタン）を右端に寄せる */
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-submit {
    /* ここにボタン自体のデザイン（paddingや色など）を書く */
    padding: 20px 60px;
    /* marginなどは消しても大丈夫です */
}