@charset "utf-8";
/* CSS Document */


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

html {
    overflow-x: hidden;
}

body {
    overflow-y: auto;
}


/* ヘッダーの基本スタイル */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #333;
    color: #fff;
}

/* ロゴのスタイル */
.logo a {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

/* ナビゲーションメニュー（PC用） */
.nav-menu {
    display: flex;
}

.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-menu ul li a {
    color: #fff;
    : none;
    font-size: 18px;
}

/* ハンバーガーメニュー（768px以下で表示） */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 24px;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
}

/* 768px以下のスタイル（ハンバーガーメニュー表示） */
@media screen and (max-width: 1920px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 550px;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease-in-out;
    }

    .nav-menu ul {
        flex-direction: column;
        text-align: center;
        padding: 0;
    }

    .nav-menu ul li {
        margin: 15px 0;
    }

    .nav-menu ul li a {
        font-size: 20px;
    }

    /* メニューが開いた時のスタイル */
    .nav-menu.active {
        right: 0;
    }
}
/* 閉じるボタンのスタイル */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: #ff4d4d; /* ホバー時に色を変える */
}

/* メニューの基本スタイル */
/* ハンバーガーメニュー全体を最前面にする */
.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 55aaa0px;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease-in-out;
    z-index: 100; /* 画像より前面に表示 */
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.nav-menu ul li {
    margin: 15px 0;
}

.nav-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}

.nav-menu.active {
    right: 0;
}



/* メニューが開いた時のスタイル */
.nav-menu.active {
    right: 0;
}

/* メニュー内のリンク */
.nav-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.nav-menu ul li {
    margin: 15px 0;
}

.nav-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}

/* 画像のスタイル（画像の `z-index` が低すぎると前面に来てしまうので調整） */
img {
    position: relative;
    z-index: 10; /* メニューより低くする */
}

/*** ボタンスタイル***/
a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 400px;
	margin: auto;
	padding: 1rem 4rem;
	font-size: 24px;
	font-weight: bold;
	border: 2px solid #ccc;
	color: #000;
	transition: 0.5s;
	background-color: bisque;
	
}
a.btn_01:hover {
	color: #fff;
	background: #000;
}




    /* 画像がズームインし、その後フェードアウトする */
    #hero {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      animation: zoomIn 2s forwards, fadeOut 1s 2s forwards;
    }

    @keyframes zoomIn {
      0% {
        width: 100px;
      }
      100% {
        width: 1920px;
      }
    }

    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    /* 画面全体のガラス割れエフェクト */
    #glassEffect {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: none;
      background: rgba(255, 255, 255, 0.1);
      pointer-events: none;
    }

    #content {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: white;
      opacity: 0;
      transition: opacity 0.8s;
    }

#hero,
#glassEffect {
  pointer-events: none;
}

/************common***************************/
.txc{text-align: center;}

/*************************************/
.mv{
	width: 100%;
	margin: 0 auto;
}

.mv{
	max-width: 1920px;
	width: 100%;
	height: 960px;
	background-image: url("images/mv02.png");
	text-align: center;
	
}

.spmv {
    width: 100%;
    height: 300px;
    background-image: url(images/sp-top.png);
    background-position: top center;
    text-align: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.ttl01{
	width: 1260px;
	margin: 0 auto;
	padding-bottom: 20px;
}

.ttl01 h2{
	font-size: 60px;
	color: #fadb2a;
	text-align: center;
	font-family: "Reggae One", serif;
}

.ttl01 h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.ttl01 .icon-left,
.ttl01 .icon-right {
    width: 116px; /* アイコンのサイズ */
    height: auto;
}


.ttl01 p{
	font-size: 15px;
	text-align: center;
	font-family: "Reggae One", serif;
}

.secA{
	max-width: 1920px;
	width: 100%;
	height: 1152px;
	background-image: url("images/top_02bg.png");
	text-align: center;
}

.secA h2 {
    text-align: left;
    padding-top: 250px;
    padding-left: 450px;
    font-size: 40px;
}

.secB{
	margin-top: 150px;
	width: 100%;
	padding-bottom: 100px!important;
}

.secB img{
	display: block;
	margin: 0 auto;
}

.secC{
	background: url("images/top-bg01.png");
	width: 1920px;
	height: 1792px;
	background-position: top center;
	max-width: 100%;
}

.secC h2{
	text-align: center;
	font-size: 82px;
	font-weight: bold;
	color: #fff;
	padding-top: 80px;
}

.col3 {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 10px; /* アイテム間の間隔 */
    padding: 80px; /* 余白 */
	padding-top: 200px;
}

.item01, .item02, .item03 {
	position: relative; /* .text-box の absolute を有効にする */
    background-size: cover;
    background-position: center;
    width: 496px;
    height: 876px;
}


.item01{
	background: url("images/item01.png");
	width: 496px;
	height: 876px;
	text-align: center;
	padding-top: 30px;
}

.item02{
	background: url("images/item02.png");
	width: 496px;
	height: 876px;
	text-align: center;
	padding-top: 30px;
}

.item03{
	background: url("images/item03.png");
	width: 496px;
	height: 876px;
	text-align: center;
	padding-top: 30px;
}

.text-box{
	font-size: 30px;
	font-weight: bold;
	max-width: 496px;
}



.hero-title {
    display: flex;
    justify-content: center; /* 中央配置 */
    align-items: center; /* 縦方向の中央揃え */
    gap: 10px; /* アイコンとテキストの間隔 */
    text-align: center;
}

.hero-title h2 {
    color: #fff;
    text-shadow: 
        -6px -6px 0 #000,  
         6px -6px 0 #000,
        -6px  6px 0 #000,
         6px  6px 0 #000;
    -webkit-text-stroke: 1px #000;
}



.hero-icon {
    width: 165px; /* アイコンのサイズ調整 */
    height: auto;
	padding-top: 50px;
}





.secD {
    background: url("images/top-bg02.png") no-repeat center top;
    background-size: cover;
    width: 1920px;
    height: 1159px;

    /* 左上に寄せる */
    display: flex;
    flex-direction: column; /* 縦配置 */
    justify-content: flex-start; /* 上寄せ */
    align-items: flex-start; /* 左寄せ */
    
    padding: 100px 50px; /* 上 100px, 左 50px に調整 */
    text-align: left;
}

.secD h2 {
    font-size: 32px;
    color: #000;
    margin-bottom: 10px; /* h2 と p の間隔 */
	padding-top: 200px;
    padding-left: 600px;
}

.secD p {
    font-size: 18px;
    color: #000;
    line-height: 1.6;
	padding-left: 600px;
}



footer{
	width: 100%;
	height: 150px;
	background-color: #000;
}

footer {
    background-color: #000; /* 背景色 */
    color: #fff; /* 文字色 */
    padding: 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between; /* 左右に分ける */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    font-weight: bold;
    font-size: 20px;
}

.footer-links {
    display: flex;
    gap: 20px; /* 各リンクの間隔 */
}

.footer-links p {
    margin: 0;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copy {
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	padding-top: 50px;
}


/* トップへ戻るボタンの基本スタイル */
.back-to-top {
    position: fixed;
    bottom: 20px; /* 画面下からの距離 */
    right: 20px; /* 画面右からの距離 */
    width: 112px; /* 画像サイズ */
    height: 112px;
    opacity: 0; /* 初期状態は非表示 */
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1000; /* 他の要素より前に表示 */
}

.back-to-top img {
    width: 100%;
    height: auto;
}

/* ボタンが表示される時 */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* ボタンのホバー時 */
.back-to-top:hover {
    opacity: 0.8;
}

/* アニメーション */
@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 初期状態（非表示＆位置調整） */
.item img {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 表示されたときにアニメーション適用 */
.item.show img {
    opacity: 1;
    transform: translateY(0);
	margin-top:0px;
}

/* 初期状態（非表示＆位置調整） */
.item img {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 表示されたときにアニメーション適用 */
.item.show img {
    opacity: 1;
    transform: translateY(0);
	margin-top:0px;
}

/**左から右にスライドイン **/
.slide-in {
    position: relative;
    animation: slideIn 1s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/**右から左にスライドイン **/

.slide-in-r {
    position: relative;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 2s ease-out, opacity 2s ease-out;
}

.slide-in.active {
    transform: translateX(0);
    opacity: 1;
}



    
/**下から上に**/
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}



.topmen01 {
    position: absolute;
    left: 0;
    bottom: 0;
}

.topmen02 {
    position: absolute;
    right: 0;
    bottom: 0;
}


/**震えるアニメーション**/
.men02 img {
    opacity: 1;
}

/* 震えるアニメーション */
@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-3px, 3px) rotate(-1deg); }
    20% { transform: translate(3px, -3px) rotate(1deg); }
    30% { transform: translate(-3px, 3px) rotate(-1deg); }
    40% { transform: translate(3px, -3px) rotate(1deg); }
    50% { transform: translate(-2px, 2px) rotate(0); }
    60% { transform: translate(2px, -2px) rotate(-1deg); }
    70% { transform: translate(-2px, 2px) rotate(1deg); }
    80% { transform: translate(2px, -2px) rotate(-1deg); }
    90% { transform: translate(-2px, 2px) rotate(1deg); }
}

/* 画面に表示されたら震える */
.men02 img.active {
    animation: shake 3s ease-in-out;
}

.men02 {
    width: 100%; /* 親要素を常に画面幅に合わせる */
    max-width: 100%; /* 最大幅をデフォルトで制限なし */
    margin: 0 auto; /* 中央配置 */
    text-align: center;
}

.men02 img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}






/*****レスポンシブル*******/

@media (max-width: 768px) {
	.ttl01 {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
}
	.secA {
    max-width: 100%;
    width: 100%;
    height: 1152px;
    background-image: url(images/top_02bg.png);
    text-align: center;
}
	
	.ttl01 h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
	font-size: 40px;
}
	
	.item.show img {
    opacity: 1;
    transform: translateY(0);
    width: 100%;
}
	.men02 img {
    opacity: 1;
    width: 100%;
}
	.secC {
    background: url(images/top-bg01.png);
    width: 100%;
    height: auto;
	padding-bottom: 100px;
    background-position: top center;
}
	.item01 {
    background: url(images/item01.png);
    width: 100%;
}
	.item02 {
    background: url(images/item02.png);
    width: 100%;
}
	.item03 {
    background: url(images/item03.png);
    width: 100%;
}
	.secC h2 {
    text-align: center;
    font-size: 82px;
    font-weight: bold;
    color: #fff;
    padding-top: 80px;
    font-size: 30px;
}
	.hero-title h2 {
    color: #fff;
    text-shadow: -0px -0px 0 #000, 0px -0px 0 #000, -0px 0px 0 #000, 0px 0px 0 #000;
    -webkit-text-stroke: 1px #000;
}
	
	.mv {
    max-width: 1920px;
    width: 100%;
    height: 960px;
    background-image: url(images/topmain02.png);
    text-align: center;
    width: 100%;
}
	
	.ttl01 .icon-left, .ttl01 .icon-right {
    width: 0px;
    height: auto;
    display: none;
}
	/**ボタン **/
	a.btn_01 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 200px;
    margin: auto;
    padding: 1rem 2rem;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #ccc;
    color: #000;
    transition: 0.5s;
    background-color: bisque;
    margin-top: -50px;
}
	
.secA h2 {
    text-align: left;
    padding-top: 50px;
    padding-left: 80px;
    font-size: 12px;
}
	.item.show img {
    opacity: 1;
    transform: translateY(0);
    margin-top: 0px;
}

	
	
}

@media (max-width: 768px) {
    .mv {
        max-width: 1920px;
        width: 100%;
        height: 100vh;
        background-image: url(images/topmain02.png);
        text-align: center;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 768px) {
    .mv {
        flex-direction: column; /* 縦並び */
        align-items: center; /* 中央揃え */
        justify-content: center;
    }

    .topmen01, .topmen02 {
        position: static; /* 絶対位置を解除してフレックスボックスの影響を受けるように */
        text-align: center; /* 画像を中央揃え */
    }

    .topmen01 img, .topmen02 img {
        width: 180px; /* 画像を小さくする */
        max-width: 80%; /* 画面の幅に適応 */
    }
}


@media (max-width: 768px) {
    .secA {
        max-width: 100%;
        width: 100%;
        height: 30vh;
        background-image: url(images/top_02bg.png);
        text-align: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 480px) {
    .col3 {
        flex-direction: column;
        align-items: center;
    }

    .item {
        width: 100%; /* 幅を広げて見やすく */
    }
}

@media (max-width: 480px) {
    .item01 {
        background: url(images/item01.png);
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
		height: 400px;
		
    }
}

@media (max-width: 480px) {
    .item02 {
        background: url(images/item02.png);
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        height: 400px;
    }
}

@media (max-width: 480px) {
    .item03{
        background: url(images/item03.png);
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
		height: 400px;
    }
}

@media (max-width: 480px) {
    .item.show img {
        opacity: 1;
        transform: translateY(0);
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .col3 {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        padding-top: 0;
    }
	.text-box {
    font-size: 20px;
    font-weight: bold;
    color: #000;
}
}
@media screen and (max-width: 768px) {
    .secD {
        background: url(images/top-bg02.png) no-repeat center top;
        background-size: cover;
        width: 100%;
        height: 1159px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        background-size: cover;
        background-image: aliceblue;
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 480px auto;
        max-width: 100%;
        width: 100%;
        height: 30vh;
        text-align: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}
	@media screen and (max-width: 768px) {
    .secD h2 {
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
    padding-left: 50px;
    margin-top: -20px;
}
	.secD p {
    font-size: 10px;
    color: #000;
    line-height: 1.6;
    /* padding-left: 600px; */
    padding-left: 50px;
}

	.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}
}

@media screen and (max-width: 768px) {
    .secD h2 {
        font-size: 14px;
        color: #000;
        margin-bottom: 10px;
        padding-left: 50px;
        margin-top: -220px;
    }
	.footer-links {
    display: flex;
    gap: 20px;
    display: none;
}
	.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1000;
}
}



.chil {
	width: 100%;
	height: 700px;
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}



/**修正**************************************************************************************************/
@media (max-width: 1500px) {
	.secC {
    height: auto;
	padding-bottom: 100px;
}
    .col3 {
        justify-content: center; /* 画面幅に応じて中央揃え */
    }
	
	.col3 {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 5px; /* アイテム間の間隔 */
    padding: 80px; /* 余白 */
	padding-top: 200px;
}
	.col3 img{
		width: auto;
		height: 550px;
	}

.item01, .item02, .item03 {
	position: relative; /* .text-box の absolute を有効にする */
    background-size: contain;
    background-position: center;
}


.item01{
	background: url("images/item01.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 350px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}
	

	
.text-box p{
	max-width: 496px;
}
	
.text-box p{
	max-width: 496px;
}
	
.text-box p{
	max-width: 496px;
}

.item02{
	background: url("images/item02.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 350px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}

.item03{
	background: url("images/item03.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 350px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}

.text-box{
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	max-width: 496px;
}
}



@media (max-width: 1160px) {
	.secC {
    height: auto;
	padding-bottom: 100px;
}
    .col3 {
        justify-content: center; /* 画面幅に応じて中央揃え */
    }
	
	.col3 {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 5px; /* アイテム間の間隔 */
    padding: 80px; /* 余白 */
	padding-top: 200px;
	height:auto; 
}
	.col3 img{
		width: auto;
		height: 350px;
	}

.item01, .item02, .item03 {
	position: relative; /* .text-box の absolute を有効にする */
    background-size: contain;
    background-position: center;
}


.item01{
	background: url("images/item01.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 250px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}

.item02{
	background: url("images/item02.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 250px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}

.item03{
	background: url("images/item03.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 250px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}
}

@media (max-width: 860px) {
	.secC {
    height: auto;
	padding-bottom: 100px;
}
    .col3 {
        justify-content: center; /* 画面幅に応じて中央揃え */
    }
	
	.col3 {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 5px; /* アイテム間の間隔 */
    padding: 80px; /* 余白 */
	padding-top: 200px;
	height:auto; 
}
	.col3 img{
		width: auto;
		height: 250px;
	}

.item01, .item02, .item03 {
	position: relative; /* .text-box の absolute を有効にする */
    background-size: contain;
    background-position: center;
}


.item01{
	background: url("images/item01.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 180px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}

.item02{
	background: url("images/item02.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 180px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}

.item03{
	background: url("images/item03.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 180px;
	height: auto;
	text-align: center;
	padding-top: 30px;
}
}


@media (max-width: 768px) {
	.size01{
		width: 30%!important;
	}
	
	.secC {
    height: auto;
	padding-bottom: 100px;
}
    .col3 {
        justify-content: center; /* 画面幅に応じて中央揃え */
    }
	
	.col3 {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 5px; /* アイテム間の間隔 */
    padding: 80px; /* 余白 */
	padding-top: 0px;
	height:auto; 
}
	.col3 img{
		width: auto;
		height: 250px;
		width: auto !important;
	}

.item01, .item02, .item03 {
	position: relative; /* .text-box の absolute を有効にする */
    background-size: contain;
    background-position: center;
}


.item01{
	background: url("images/item01.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 180px;
	text-align: center;
	padding-top: 30px;
}

.item02{
	background: url("images/item02.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 180px;
	text-align: center;
	padding-top: 30px;
}

.item03{
	background: url("images/item03.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 180px;
	text-align: center;
	padding-top: 30px;
}
    .text-box {
        font-size: 20px;
        font-weight: bold;
        color: #000;
    }
}

@media (max-width: 630px) {
	.secC {
    height: auto;
	padding-bottom: 100px;
}
    .col3 {
        justify-content: center; /* 画面幅に応じて中央揃え */
    }
	
	.col3 {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 5px; /* アイテム間の間隔 */
    padding: 80px; /* 余白 */
	padding-top: 0px;
	height:auto; 
}
	.col3 img{
		width: auto;
		height: 180px;
		width: auto !important;
	}

.item01, .item02, .item03 {
	position: relative; /* .text-box の absolute を有効にする */
    background-size: contain;
    background-position: center;
}


.item01{
	background: url("images/item01.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 120px;
	text-align: center;
	padding-top: 30px;
	margin: 0 auto;
}

.item02{
	background: url("images/item02.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 120px;
	text-align: center;
	padding-top: 30px;
	margin: 0 auto;
}

.item03{
	background: url("images/item03.png");
	background-size: contain;
	background-repeat: no-repeat;
    width: 120px;
	text-align: center;
	padding-top: 30px;
	margin: 0 auto;
}
    .text-box {
        font-size: 20px;
        font-weight: bold;
        color: #000;
		text-align: center;
    }
}



@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none; /* これだけでは無効なので、JS でも対応 */
    }
}

/* アニメーションが終わった後に非表示にする */
#hero.hidden {
    display: none !important;
}


@media screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease-in-out;
    }
}