@charset "utf-8";

/* --- 全体レイアウト --- */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
	font-family: 'Sawarabi Gothic', sans-serif; /* 全体に適用 */
}

/* --- テキストアニメーションエリア --- */
.container {
    position: absolute; 
    top: 50%;           
    left: 50%;          
    transform: translate(-50%, -50%); 
    z-index: 100;       /* 数字を大きくして、確実にスライド(z-index:1)より上にする */
    width:100%;
	text-align: center;
	margin: 0;
    pointer-events: none; /* 文字がスライドショーのクリックなどを邪魔しないように */
}

.reveal-text {
    font-family: 'Rubik', sans-serif;
    font-size:12rem; /* PC・基本のサイズ */
    color: #fff;
    text-shadow: 0 0 20px rgba(0,0,0,0.3);
    letter-spacing: 0.1em;
	font-weight: 700;
}


/* 日本語テキストのスタイル */
.sub-text {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 2.5rem; /* 大きさはお好みで */
    color: #fff;
    margin-bottom: 30px; /* LAUGHTERとの間隔 */
    font-weight: 600;
    letter-spacing: 0.15em;
    opacity: 0; /* 最初は隠しておく */
	text-shadow: 0 0 15px rgba(0,0,0,0.5); /* 文字を読みやすくするための影 */
}





/* ★重要：JSで生成された中身の「文字（span）」に対してサイズを指定する★ */
.reveal-text span {
    font-size: 12rem !important; /* PCサイズ：!importantで強制適用 */
}


/* --- スライドショー設定 --- */
.main-visual {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.slide {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-repeat: no-repeat;
    background-position: center top;
}

.slide.active {
    opacity: 1;
    position: relative;
    z-index: 1;
}


.wave-container {
    position: absolute;
    bottom: -1px;       /* 画像の最下部に配置 */
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;      /* スライドより上で、文字(z-index:999)より下 */
}

.wave-container svg {
    display: block;
    width: 100%;
    height: 150px;
}


.sp-br {
    display: none; /* 通常（PC）は改行を無効化 */
}

.concept-copy p {
    font-size: 2rem; /* PCでのサイズ（適宜調整してください） */
    white-space: nowrap; /* PCでは絶対に改行させない */
}


/* --- CONCEPT セクション --- */
.concept {
    background-color: #fff; /* 波の下は白背景 */
    padding: 120px 5% 150px; /* 上下にゆとりを持たせる */
    overflow: hidden;
}

.concept-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* 左側：説明文（横書き） */
.concept-main-text {
    flex: 1;
    line-height: 2.2;
    color: #333;
    font-size: 1.1rem;
    font-family: "Sawarabi Gothic", sans-serif;
	font-weight: 700;
    padding-top: 20px;
}

.concept-main-text p {
    margin-bottom: 2.5rem;
}

/* 右側：キャッチコピー（縦書き） */
.concept-copy {
    writing-mode: vertical-rl; /* 縦書き（右から左へ） */
    font-family: "Yu Mincho", "MS Mincho", serif; /* 縦書きは明朝体が美しい */
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.3em;
    color: #000;
    margin-top: -10px; /* 位置の微調整 */
	white-space: normal;/* PCでは改行を許可する */
}

.pc-br { display: inline; } /* PC用改行を表示 */
.sp-br { display: none; }   /* スマホ用改行を隠す */


.concept-copy span {
    color: #e60012; /* 「笑い声」だけ色を変えて強調する場合 */
}

/* リンク全体のコンテナ */
.concept-link {
    margin-top: 50px; /* 文章との間隔 */
}

.concept-link a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* リンクの下線アニメーション */
.concept-link a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.concept-link a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
	font-family: 'Sawarabi Gothic', sans-serif;
    font-weight: 700;
}

/* 矢印（アロー）のデザイン */
.arrow {
    display: inline-block;
    width: 40px;      /* 矢印の長さ */
    height: 1px;      /* 矢印の太さ */
    background-color: #000;
    margin-left: 20px;
    position: relative;
    transition: transform 0.3s ease;
}

.arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 8px;
    height: 1px;
    background-color: #000;
    transform: rotate(45deg); /* 上のハネ */
}

/* ホバー時に矢印を少し右に動かす演出 */
.concept-link a:hover .arrow {
    transform: translateX(10px);
	color: aliceblue;
}


/* SERVICEセクション全体 */
.service {
    padding: 100px 20px;
    background-color: #fff;
    text-align: left; /* スライダー時のcenterからleftへ */
}

.service-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 100px; /* 下に余裕を持たせる */
}

/* タイトル周り（ここは以前のものを継承） */
.service-title {
    font-family: 'Rubik', sans-serif;
    font-size: 3rem;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-align: center; /* タイトルは中央のまま */
}

.service-subtitle {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 80px;
    letter-spacing: 0.2em;
    text-align: center; /* サブタイトルも中央のまま */
}

/* サービス紹介の主要レイアウト（PC版） */
.service-feature {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 60px; /* テキストと画像の間の隙間 */
    margin-bottom: 100px; /* 次のサービスとの間隔 */
	padding-bottom: 100px;
	border-bottom: 1px solid #eee;
}

/* テキストエリア */
.service-feature-text {
    flex: 1;
}

.service-category {
    font-family: 'Rubik', sans-serif;
    font-size: 5rem;
	font-weight: 700;
    color: #ddd; /* 薄いグレーで数字 */
    display: block;
    margin-bottom: 10px;
}

.service-large-title {
    font-family: 'Rubik', sans-serif;
    font-size: 7rem; /* ★大きな文字★ */
    line-height: 1;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
	white-space: nowrap;
    /* もし左から出てくるアニメーションを足すならここに追加 */
	opacity: 0;
    transform: translateX(-150px); scale(0.95);/* 左に50pxズラしておく */
    transition: 
		opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); 	
}

* 反転レイアウト（service-reverse）のときは右から出したい場合 */
.service-reverse .service-large-title {
    transform: translateX(150px); scale(0.95);
}

/* このクラスがついたらアニメーション開始（JSで付与します） */
.service-large-title.is-show {
    opacity: 1;
    transform: translateX(0);scale(1);
}



.service-lead {
    font-size: 1.4rem;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.service-description p {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 15px;
}

/* 写真エリア */
.service-feature-img {
    flex: 1.2; /* テキストより少し広く */
}

.img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10; /* 写真の比率 */
    overflow: hidden;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.1); /* 少し影をつけてリッチに */
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.news {
    padding: 100px 20px;
    background-color: #f9f9f9; /* 少し背景色をつけると枠が引き立ちます */
}

.news-list {
    max-width: 800px; /* ニュースの横幅を絞ると読みやすい */
    margin: 0 auto;
}

.news-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 12px; /* ★角丸の設定 */
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item a {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
    color: #333;
    gap: 20px;
}

.news-item:hover {
    transform: translateY(-3px); /* 浮き上がる演出 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.news-date {
    font-family: 'Rubik', sans-serif;
    font-size: 0.9rem;
    color: #888;
    flex-shrink: 0; /* 日付が改行されないように */
}

.news-title {
    font-weight: 500;
    line-height: 1.5;
    /* 長すぎるタイトルを1行で切る場合（任意） */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* VIEW ALL ボタンのデザイン */
.news-more {
    text-align: center;
    margin-top: 40px;
}

.btn-more {
    display: inline-block;
    padding: 15px 50px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-family: 'Rubik', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    transition: background 0.3s;
}

.btn-more:hover {
    background: #555;
}

/* リンクがない時のNEWSアイテムのスタイル */
.news-item.no-link {
    cursor: default; /* カーソルを指マークにしない */
}

.news-item.no-link:hover {
    transform: none; /* 浮き上がらせない */
    box-shadow: none; /* 影をつけない、または薄くする */
}

.news-item-inner {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    gap: 20px;
}



.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横に3つ並べる */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.works-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* 横長に統一 */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.works-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.works-item:hover img {
    transform: scale(1.05); /* ホバーで少しズーム */
}

.access {
    padding: 100px 0;
    background-color: #fff;
}

.access-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.access-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* 左側：テキストエリア */
.access-info {
    flex: 1;
}

.info-detail {
    margin-top: 40px;
}

.company-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.address, .tel, .business-hours {
    line-height: 2;
    color: #555;
    margin-bottom: 10px;
}

/* 右側：マップエリア */
.access-map {
    flex: 1.2; /* マップを少し広めに */
    filter: grayscale(100%); /* モノクロにするとサイトの雰囲気に合います */
    transition: filter 0.5s ease;
    border-radius: 15px;
    overflow: hidden;
}

.access-map:hover {
    filter: grayscale(0%); /* ホバーで色を戻す演出 */
}


.footer {
    padding: 40px 0;
    background-color: #333;
    color: #fff;
    text-align: center;
}
.copyright {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}



/* 1080px以下のレスポンシブ設定（縦置きモニターやタブレット） */
@media (max-width: 768px) {
    .service-feature {
        flex-direction: column; /* 縦並びに */
        gap: 40px;
        margin-bottom: 100px;
    }

    .service-large-title {
        font-size: 3.5rem; /* スマホでは文字を小さく */
    }

    .service-feature-img {
        width: 100%;
        max-width: 600px; /* スマホで広がりすぎないように */
    }
}









/* --- PC表示設定 (768px以上) --- */
@media (min-width: 768px) {
    .main-visual, .slide {
        height: 100vh; 
        background-size: cover;
    } 
	.reveal-text{
		font-size: 4rem;
	}

    .service-reverse {
        flex-direction: row-reverse; /* 右から左へ並べる */
    }

    /* 反転した時のテキストの余白や並びを整える（お好みで） */
    .service-reverse .service-feature-text {
        padding-left: 60px; /* 画像との間に隙間を作る */
        padding-left:0;
    }
	
	.main-title {
        /* 15vwだと少し大きい可能性があるので、12vw〜13vwあたりで調整 */
        font-size: 12vw; 
        
        line-height: 1.1;
        letter-spacing: 0.02em; /* 文字間をさらに詰めると収まりやすくなります */
        
        /* 重要：単語の途中で改行させない設定 */
        word-break: normal; 
        white-space: nowrap; 
        
        display: block;
        width: 100%;
        text-align: center;
        overflow: hidden; /* 万が一はみ出しても横スクロールが出ないように */
    }
}

/* --- スマホ表示設定 (767px以下) --- */
@media (max-width: 768px) {
    .main-visual {
        height: auto;
		aspect-ratio:1/1.8; /*ここで「縦長の箱」の形を指定（例：3:4の比率） */
        position: relative; /* 文字の配置基準にする */
        overflow: hidden;
        width: 100vw;
		background-color: #fff; /* 余白がどうしても出る場合、グレーではなく白にする */
    }
	
	.slide {
        position: absolute; /* 画像を浮かせて重ねる */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 100% auto;
		background-repeat: no-repeat;
        background-position: center;
    }
	
	/* ★ここが重要：文字を画像の上に浮かせる設定を維持する★ */
    .container {
        position: absolute; /* absoluteを再指定（または維持） */
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        z-index: 100;
        text-align: center;
        margin: 0; /* 余計なマージンを消す */
    }

    /* メディアクエリのカッコの中に文字サイズを入れる */
    .reveal-text {
        font-size: 4rem; 
		letter-spacing: 0.05em;
    }
	
	.reveal-text span {
        font-size: 4rem !important; /* LAUGHTERのサイズ */
    }
	
	.sub-text {
        font-size: 1.2rem;
        margin-bottom: 10px;
		letter-spacing: 0.1em;
    }
	
	/* ★ここに追加！波線の位置をスマホ用に微調整★ */
    .wave-container {
        bottom: -1px; /* 下端にピッタリくっつけて隙間を消す */
        z-index: 10;  /* 画像より確実に上にくるように */
		width:100%;
    }
	
	/* 波自体の高さをスマホ向けに調整 */
    .wave-container svg {
        display: block;
        width: 100%;
        height: 80px; /* ★ここを追加！スマホで見た時の波の高さです */
    }
	
	
	.concept {
        padding: 80px 25px;
    }
    
    .concept-inner {
        flex-direction: column-reverse; /* スマホではコピーを上にする */
        align-items: center;
        gap: 40px;
    }

    .concept-copy {
        /* 1. 縦書きから横書きにリセット */
        writing-mode: horizontal-tb; 
        
        /* 2. スマホで見やすいサイズに変更 (PCの2.8remは大きすぎるため) */
        font-size: 1.25rem; 
        
        /* 3. 縦書き用の余白や字間をスマホ用に調整 */
        margin-top: 40px; /* PCのマイナス値をリセットし、上の要素との間隔を作る */
        letter-spacing: 0.1em; /* 字間を少し詰める */
        line-height: 2; /* 行間をゆったりさせて読みやすく */
        
        /* 4. 中央揃え */
        text-align: center;
        width: 100%;
        padding: 0 20px;
		white-space: normal;
    }
	
	.pc-br { display: none; }   /* PC用改行を隠す */
    .sp-br { display: inline; } /* スマホ用改行を表示 */

    

    /* HTMLの中にある <br> をスマホの時だけ有効にするための念押し */
    .concept-copy br {
        display: block;
    }

    .concept-main-text {
        font-size: 1rem;
        line-height: 1.8;
        text-align: justify;
    }
	
	.service-grid {
        flex-direction: column; /* 縦並びに */
        align-items: center;
        gap: 60px;
    }

    .service-item {
        width: 300px; /* スマホ・縦画面では少し小さく */
    }
	
	.service-feature {
        flex-direction: column; /* スマホでは全て縦並びに戻す（画像が下、文字が上） */
        text-align: left;       /* テキストは左寄せで統一 */
    }
    
    /* スマホで「画像→文字」の順にしたい場合はここを column-reverse にします */
    /* .service-feature { flex-direction: column-reverse; } */
   
	.news-item a {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
	
	.news-item-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
	
	.works-grid {
        grid-template-columns: 1fr;
    }


    .access-content {
        flex-direction: column;
    }
    
    .access-map {
        width: 100%;
        height: 300px;
    }
}







 /* ← ここがスマホ設定の終わり */