@charset "UTF-8";

/********************************************************/
/* アニメーション - フェードイン */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
	.fade-in {
		animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	}

	.fade-in-long {
		animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	}


@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
	.fade-in-up {
	    animation: fade-in-up 1s ease forwards;
	}
	
/* アニメーション - 右からスライドイン */
@keyframes slide-in-from-right {
  0% {
    transform: translate(180px,30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}
	.slide-in-from-right{
		animation: slide-in-from-right 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}

/* アニメーション - 左からスライドイン */
@keyframes slide-in-from-left {
  0% {
    transform: translate(-180px, 30px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
  }
  20%, 100% {
    opacity: 1;
  }
}
	.slide-in-from-left {
		animation: slide-in-from-left 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}

/* アニメーション - きらっと光る */
@keyframes shine {
  0%, 40% {
    background-position: 100% 50%;
    color: transparent;
  }
  40% {
    background-position: 0% 50%;
    color: transparent;
  }
}
	.shine {
	  animation: shine 5s infinite;
	  background-image: linear-gradient(
	    70deg,
	    rgba(50, 50, 50, 0.9) 45%, 
	    #ffffff 50%,
	    rgba(50, 50, 50, 0.9) 55% 
	  );
	  background-size: 500% 100%;
	  background-clip: text;
	  -webkit-background-clip: text;
	  color: transparent;
	}
	
/* アニメーション - 左からワイプ */
@keyframes wipe-from-left {
  from {
	opacity: 1;
    width: 0;
    overflow: hidden;
  }
  to {
	opacity: 1;
    width: 100%;
    overflow: hidden;
  }
}
	.wipe-from-left {
		animation: wipe-from-left 1s ease-in-out forwards;
		position: relative;
		white-space: nowrap;
		overflow: hidden;
	}

/* テキスト下部に線を引く(spanタグ限定) */
@keyframes text-liner-a {
	50%{
		background-size: 100% 100%;
	}
	100%{
		background-size: 0% 100%;
	}
}
@keyframes text-liner-b {
	100%{
		background-position: right bottom;
	}
}
	.text-liner{
		background-image: linear-gradient(to top, orange 1px, transparent 1px);
		background-position: left bottom;
		background-repeat: no-repeat;
		background-size: 0% 100%;
		animation-name: text-liner-a, text-liner-b;
		animation-duration: 5s, 0s;
		animation-delay: 0s, 2.5s;
		animation-fill-mode: forwards;
	}

/* 四方のボーダーアニメーション */
@keyframes border-liner-a {
	20%{
		background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	}
	30%{
		background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
	}
}
@keyframes border-liner-b {
	100%{
		background-position: right bottom, right bottom, top left, top left;
	}
}
	.border-liner{
		padding: 23px;
		background-image:
			linear-gradient(to bottom, transparent 10px, orange 10px, orange 12px, transparent 11px),
			linear-gradient(to left,   transparent 10px, orange 10px, orange 12px, transparent 11px),
			linear-gradient(to top,    transparent 10px, orange 10px, orange 12px, transparent 11px),
			linear-gradient(to right,  transparent 10px, orange 10px, orange 12px, transparent 11px);
		background-repeat: no-repeat;
		background-size: 0% 100%, 100% 0%, 0% 100%, 100% 0%;
		background-position: top left, top left, right bottom, right bottom;
	}
	.border-liner.active{
		animation-name: border-liner-a, border-liner-b;
		animation-duration: 3s, 0s;
		animation-delay: 0s, 0.6s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards
	}

/* 左に無限横スクロール */
@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}

/* 下からぽよんと出現 */
@keyframes poyon-from-bottom {
	0% {
		transform: translateY(340px);
		opacity: 1;
	}
	50% {
		transform: translateY(-30px);
	}
	65% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-30px);
	}
	20%,100% {
		opacity: 1;
	}
}
	.poyon-from-bottom {
	  animation: poyon-from-bottom 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
	}

/* テーブル行を順番にハイライト */
@keyframes highlight-tr {
    0% { background-color: transparent; }
    50% { background-color: rgb(255 200 100 / 10%); }
    100% { background-color: transparent; }
}
	.highlight-tr tr:nth-child(1) { animation: highlight-tr 0.6s ease-out 0.0s 1; }
	.highlight-tr tr:nth-child(2) { animation: highlight-tr 0.6s ease-out 0.1s 1; }
	.highlight-tr tr:nth-child(3) { animation: highlight-tr 0.6s ease-out 0.2s 1; }
	.highlight-tr tr:nth-child(4) { animation: highlight-tr 0.6s ease-out 0.3s 1; }
	.highlight-tr tr:nth-child(5) { animation: highlight-tr 0.6s ease-out 0.4s 1; }
	.highlight-tr tr:nth-child(6) { animation: highlight-tr 0.6s ease-out 0.5s 1; }
	.highlight-tr tr:nth-child(7) { animation: highlight-tr 0.6s ease-out 0.6s 1; }
	.highlight-tr tr:nth-child(8) { animation: highlight-tr 0.6s ease-out 0.7s 1; }
	.highlight-tr tr:nth-child(9) { animation: highlight-tr 0.6s ease-out 0.8s 1; }
	.highlight-tr tr:nth-child(10){ animation: highlight-tr 0.6s ease-out 0.9s 1; }
	.highlight-tr tr:nth-child(11){ animation: highlight-tr 0.6s ease-out 1.0s 1; }
	.highlight-tr tr:nth-child(12){ animation: highlight-tr 0.6s ease-out 1.1s 1; }

/* リストタグを順番にハイライト */
@keyframes highlight-li {
    0% { background-color: transparent; }
    50% { background-color: rgb(255 222 100 / 20%); }
    100% { background-color: transparent; }
}
	.highlight-li li:nth-child(1) { animation: highlight-li 0.6s ease-out 0.0s 1; }
	.highlight-li li:nth-child(2) { animation: highlight-li 0.6s ease-out 0.1s 1; }
	.highlight-li li:nth-child(3) { animation: highlight-li 0.6s ease-out 0.2s 1; }
	.highlight-li li:nth-child(4) { animation: highlight-li 0.6s ease-out 0.3s 1; }
	.highlight-li li:nth-child(5) { animation: highlight-li 0.6s ease-out 0.4s 1; }
	.highlight-li li:nth-child(6) { animation: highlight-li 0.6s ease-out 0.5s 1; }
	.highlight-li li:nth-child(7) { animation: highlight-li 0.6s ease-out 0.6s 1; }
	.highlight-li li:nth-child(8) { animation: highlight-li 0.6s ease-out 0.7s 1; }
	.highlight-li li:nth-child(9) { animation: highlight-li 0.6s ease-out 0.8s 1; }
	.highlight-li li:nth-child(10){ animation: highlight-li 0.6s ease-out 0.9s 1; }
	.highlight-li li:nth-child(11){ animation: highlight-li 0.6s ease-out 1.0s 1; }
	.highlight-li li:nth-child(12){ animation: highlight-li 0.6s ease-out 1.1s 1; }
	
/* リストタグを順番にハイライト */
@keyframes highlight-div {
    0% { background-color: transparent; }
    50% { background-color: rgb(255 222 100 / 20%); }
    100% { background-color: transparent; }
}
	.highlight-div > div:nth-child(1) { animation: highlight-div 0.6s ease-out 0.0s 1; }
	.highlight-div > div:nth-child(2) { animation: highlight-div 0.6s ease-out 0.1s 1; }
	.highlight-div > div:nth-child(3) { animation: highlight-div 0.6s ease-out 0.2s 1; }
	.highlight-div > div:nth-child(4) { animation: highlight-div 0.6s ease-out 0.3s 1; }
	.highlight-div > div:nth-child(5) { animation: highlight-div 0.6s ease-out 0.4s 1; }
	.highlight-div > div:nth-child(6) { animation: highlight-div 0.6s ease-out 0.5s 1; }
	.highlight-div > div:nth-child(7) { animation: highlight-div 0.6s ease-out 0.6s 1; }
	.highlight-div > div:nth-child(8) { animation: highlight-div 0.6s ease-out 0.7s 1; }
	.highlight-div > div:nth-child(9) { animation: highlight-div 0.6s ease-out 0.8s 1; }
	.highlight-div > div:nth-child(10){ animation: highlight-div 0.6s ease-out 0.9s 1; }
	.highlight-div > div:nth-child(11){ animation: highlight-div 0.6s ease-out 1.0s 1; }
	.highlight-div > div:nth-child(12){ animation: highlight-div 0.6s ease-out 1.1s 1; }

/********************************************************/

body{
	position:relative;
    margin: 0;
}
	body::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background-color: #2c3240;
		z-index: 0;
	}

/* セクション */
.section{
	overflow: hidden;
}

/* 非表示 */
.hide{
	display:none !important;
}

/* 改行(PC用) */
.br_pc{
	display:block;
}

/* 最初のコンテナーに付与するコンテナフェードイン */
.first-orange-container-before {
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, #fffaf0c9, transparent);
    pointer-events: none;
    z-index: 2;
}

/* 最後のコンテナーに付与するコンテナフェードアウト */
.last-orange-container-after {
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, #fffaf0c9, transparent);
    pointer-events: none;
    z-index: 2;
}

/* 入力要素幅調整 */
input,textarea{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* アニメーション実行後の継続表示用 */
.opacityOn{
	opacity: 1 !important;
}

/* 背景-円コンテンツ */
.circle-container-body {
    background-color: #ffffff;
    overflow: hidden;
    width: 1120px;
    height: 535px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    right: 0;
    top: 0;
}

	.circle-container-wrapper {
	    position: absolute;
	    width: 100%;
	    height: 620px;
	    top: 0;
	    right: 0;
	    overflow: hidden;
	}

		.circle-container {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    top: -1000px;
		    left: 530px;
		}
			
			/* 円 */
			.circle {
			    position: absolute;
			    border-radius: 50%;
			    top: 100%;
			    left: 50%;
			    transform: translate(-50%, -50%);
			    border: 3px solid rgb(255 211 145);
			}

			.circle-1 {
			    width: 1800px;
			    height: 1800px;
			}

			.circle-2 {
			    width: 1400px;
			    height: 1400px;
			}

			.circle-3 {
			    width: 1000px;
			    height: 1000px;
			}

			/* マーカー */
			.marker {
			    position: absolute;
			    width: 12px;
			    height: 12px;
			    background-color: rgb(255 192 98);
			    border-radius: 50%;
			    top: 100%;
			    left: 50%;
		    	transition: 1s;
			    transform-origin: 0 0;
			}

			.marker-1-1 {
			    animation: rotate-around-1 40s linear infinite;
			}

			.marker-1-2 {
			    animation: rotate-around-1 40s linear infinite;
			    animation-delay: -13.33s;
			}

			.marker-1-3 {
			    animation: rotate-around-1 40s linear infinite;
			    animation-delay: -26.66s;
			}

			.marker-2-1 {
			    animation: rotate-around-2 30s linear infinite reverse;
			}

			.marker-2-2 {
			    animation: rotate-around-2 30s linear infinite reverse;
			    animation-delay: -10s;
			}

			.marker-2-3 {
			    animation: rotate-around-2 30s linear infinite reverse;
			    animation-delay: -20s;
			}

			.marker-3-1 {
			    animation: rotate-around-3 20s linear infinite;
			}

			.marker-3-2 {
			    animation: rotate-around-3 20s linear infinite;
			    animation-delay: -6.66s;
			}

			.marker-3-3 {
			    animation: rotate-around-3 20s linear infinite;
			    animation-delay: -13.33s;
			}

			@keyframes rotate-around-1 {
			    0% {
			        transform: rotate(0deg) translate(900px);
			    }
			    100% {
			        transform: rotate(360deg) translate(900px);
			    }
			}

			@keyframes rotate-around-2 {
			    0% {
			        transform: rotate(0deg) translate(700px);
			    }
			    100% {
			        transform: rotate(360deg) translate(700px);
			    }
			}

			@keyframes rotate-around-3 {
			    0% {
			        transform: rotate(0deg) translate(500px);
			    }
			    100% {
			        transform: rotate(360deg) translate(500px);
			    }
			}


/* ヘッダー */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    box-sizing: border-box;
    justify-content: flex-start;
}
    
    /* ロゴ部分 */
    .logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #333;
	}
	    
	    .logo-mark {
	        display: flex;
	        height: 40px;
	        margin-right: clamp( 5px, calc( 2.5px + 0.625vw ), 10px );
	        background: url(../img/company-logo.png);
	        background-repeat: no-repeat;
	        background-size: contain;
	        background-position-y: 7px;
	        width: 30px;
	    }
	    
	    .logo-text {
	        font-size: clamp( 14px, calc( 13px + 0.25vw ), 16px );
	        font-weight: 700;
	        line-height: 1.2;
	    }
	    
    /* ヘッダー区切り線 */
    .header-divider {
        height: 40px;
        width: 2px;
        background-color: #dddddd;
        margin: 0 2% 0 2%;
    }
    
    /* ナビゲーションメニュー */
    .nav {
        display: flex;
        align-items: center;
        gap: 10%;
    }
	    
		/* アニメーション用のクラス */
		@keyframes bounce {
		    0%, 20%, 50%, 80%, 100% {
		        transform: translateY(0);
		    }
		    20% {
		        transform: translateY(-10px);
		        opacity:0.3;
		    }
		    100% {
		        opacity:1;
		    }
		}

		.nav-item {
		    /* 既存のスタイルはそのままに */
		    font-family: "Rubik", sans-serif;
		    position: relative;
		    font-size: clamp(10px, calc(9px + 0.25vw), 12px);
		    font-weight: 500;
		    text-decoration: none;
		    color: #333;
		    display: flex;
		    align-items: center;
		    transition: color 0.3s;
		    
		    /* アニメーションの初期状態 */
		    opacity: 0;
		    transform: translateY(20px);
		    transition: opacity 0.5s, transform 0.5s;
		}
			.nav-item.visible {
			    opacity: 1;
			    transform: translateY(0);
			}

			.nav-item.bounce {
			    animation: bounce 0.7s ease;
			}
		    
		    .nav-item:hover {
		        color: #6b99b9;
		    }
            
            .nav-item.active {
                color: #ff9900;
                font-weight: 600;
            }
	    /* ドロップダウンアイコン */
	    .dropdown-icon {
	        position: relative;
	        display: inline-flex;
	        justify-content: center;
	        align-items: center;
	        width: 20px;
	        height: 20px;
	        margin-left: 5px;
	        background-color: #f5f5f5;
	        border-radius: 50%;
	    }
	    
	    .dropdown-icon:after {
	        content: '';
	        display: block;
	        width: 6px;
	        height: 6px;
	        border-right: 2px solid #999;
	        border-bottom: 2px solid #999;
	        transform: rotate(45deg);
	        margin-top: -3px;
	    }
	    
	    /* メインコンテンツエリアの調整（ヘッダーの高さ分のパディングを追加） */
	    .main-content {
	        padding-top: 70px;
	    }
	    
	/* 採用Entryボタン */
	.entry-button-container {
	    margin-left: auto;
	    padding-right: 20px;
	}
		.entry-button {
		    display: flex;
		    align-items: center;
		    background-color: #ff9900;
		    color: white;
		    text-decoration: none;
		    padding: 8px 15px;
		    border-radius: 5px;
		    font-size: 14px;
		    font-weight: 600;
		    transition: all 0.3s ease;
		    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		    border:none;
		}

		.entry-button:hover {
		    background-color: #e07e00;
		    transform: translateY(-2px);
		    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}

		.entry-button-circle {
		    width: 24px;
		    height: 24px;
		    margin-left: 10px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    background-color: rgba(255, 255, 255, 0.2);
		    border-radius: 50%;
		    transition: all 0.3s ease;
		    box-shadow: 0 0 0 rgba(255, 153, 0, 0.5);
		    animation: pulse-shadow 1.5s infinite;
		}
			@keyframes pulse-shadow {
			    0% {
			        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.6);
			    }
			    100% {
			        box-shadow: 0 0 0px 6px rgb(255 255 255 / 30%);
			    }
			}

		.entry-button:hover .entry-button-circle {
		    background-color: rgba(255, 255, 255, 0.3);
		}

		.entry-button-arrow {
		    width: 20px;
		    height: 20px;
		    transition: transform 0.3s ease;
		}

/* トップビューテキスト */
.title {
	opacity:0;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: center;
}

	.title h1 {
	    color: #323232;
	    margin-bottom: 1rem;
	    width: 100%;
	    padding-top: 250px;
	    padding-left: 20px;
	    font-size: clamp( 36px, calc( 17.538461538461537px + 3.8461538461538463vw ), 56px );
	}
		.title h1 span {
		    font-size: clamp( 15px, calc( 6.692307692307692px + 1.7307692307692308vw ), 24px );
		    display: block;
		    margin-top: clamp( 0px, calc( -5px + 1.25vw ), 10px );
		    color: #666;
		}

	.title h2 {
	    font-size: 1.8rem;
	    font-weight: bold;
	    color: #000;
	}

.main-message {
  font-size: clamp( 18px, calc( 8px + 2.5vw ), 38px );
  line-height: 1.5;
  font-weight: 700;
  color: #323232;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
	.sub-message {
	    font-size: clamp( 11px, calc( 9.5px + 0.375vw ), 14px );
	    color: #666;
	    letter-spacing: 0.5px;
	    line-height: 1.8;
	}

/* セクションヘッダー */
.service-bar{
		display: flex;
		align-items: center;
	}
	.service-bar-line {
	    position: relative;
	    width: 5px;
	    height: 30px;
	    background-color: #484848; 
	    margin-right: 10px;
	    margin-top: 15px;
	    border-radius: 10px;
	}
		.service-bar-line:before {
		    content: '';
		    position: absolute;
		    top: -10px;
		    left: -1px;
		    width: 7px;
		    height: 7px;
		    background-color: #ff9900;
		    border-radius: 50%;
		}

	.service-label {
	    font-size: 14px;
	    color: #ff9900;
	    font-weight: 600;
	    letter-spacing: 1px;
	    text-transform: uppercase;
	}

	.service-sub {
	    font-size: 14px;
	    color: #121212;
	    margin-top: 5px;
	}

/* CEO MESSAGEセクション */
.ceo-section {
    padding: 100px 0 0 0;
    background-color: #ffffff6b;
}

	.ceo-content {
		opacity:0;
		display: flex;
		gap: 30px;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		flex-direction: row;
	}

		.ceo-image {
		    flex: 0 0 35%;
		    position: relative;
		    background:url(../img/ceo.png);
		    min-width: 500px;
		    height: 450px;
		    background-size: 900px;
		    background-position-x: -480px;
		    background-position-y: -150px;
		    background-repeat: no-repeat;
		}

		.ceo-image img {
		    width: 100%;
		    height: auto;
		    border-radius: 10px;
		    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		}

		.ceo-message {
		    flex: 1;
		    font-family: "Zen Antique", serif;
		    padding: 40px 0;
		    border-radius: 8px;
		    width: 100%;
		    max-width: 700px;
		    margin: 0 auto;
		    min-width: 620px;
		    text-align: center;
		}
			.ceo-message div {
				font-size: clamp( 15px, calc( 13.153846153846153px + 0.38461538461538464vw ), 17px );
				line-height: 1.8;
				color: #333;
				margin-bottom: 25px;
			}
			
/* フッタースタイル */
.footer {
	background-color: #2c3240; /* ダークネイビー背景色 */
	color: #ffffff;
	padding: 60px 40px 20px;
	position: relative;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	margin-top: 300px;
	z-index: 1;
}
	/* フッターコンテンツ全体のレイアウト */
	.footer-content {
	    max-width: 1200px;
	    margin: 0 auto;
	    display: flex;
	    flex-direction: column;
	    gap: 20px;
	}

	/* ロゴ部分 */
	.footer-brand {
	    margin-bottom: 20px;
	}

	.footer-logo {
    	font-family: 'Rubik', sans-serif;
	    font-size: 3.2rem;
	    font-weight: 300;
	    letter-spacing: 1px;
	    margin-bottom: 10px;
	    color: #ffffff;
	    line-height: 1;
	}

	.footer-logo sup {
	    font-size: 1rem;
	    vertical-align: super;
	}

	.footer-tagline {
    	font-family: 'Rubik', sans-serif;
    	font-size: clamp( 14px, calc( 12.666666666666666px + 0.2777777777777778vw ), 16px );
    	line-height: 1.6;
    	margin-top: 10px;
    	font-weight: 300;
    	padding-left: 4px;
 }

	/* ナビゲーションコンテナ */
	.footer-nav-container {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	    gap: 30px;
	    margin-top: 20px;
	}

	/* ナビゲーションセクション */
	.footer-nav-section {
	    margin-bottom: 30px;
	}

	.footer-nav-title {
	    font-size: 24px;
	    font-weight: 500;
	    margin: 0 0 5px 0;
	    color: #ffffff;
	    padding: 5px 0;
	    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.footer-nav-subtitle {
	    font-size: 0.8rem;
	    color: #ffffff;
	    margin: 0 0 15px 0;
	    opacity: 0.8;
	}

	.footer-nav-links {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    margin-top: 10px;
	}

	.footer-nav-links li {
	    margin-bottom: 8px;
	}

	.footer-nav-links a {
	    color: #ffffff;
	    text-decoration: none;
	    font-size: 0.85rem;
	    opacity: 0.7;
	    transition: opacity 0.3s;
	}

	.footer-nav-links a:hover {
	    opacity: 1;
	}

	/* フッターボトム部分 */
	.footer-bottom {
	    max-width: 1200px;
	    margin: 30px auto 0;
	    padding-top: 20px;
	}

	.footer-policies {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 30px;
	}
	
	.footer-copyright {
	    text-align: left;
	    margin-top: 10px;
	    padding-top: 20px;
	    border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

		.footer-copyright p {
		    font-size: 0.8rem;
		    color: #ffffff;
		    opacity: 0.6;
		    margin: 0;
		}
	.policy-link {
	    color: #ffffff;
	    text-decoration: none;
	    font-size: 0.8rem;
	    opacity: 0.6;
	    transition: opacity 0.3s;
	}

	.policy-link:hover {
	    opacity: 1;
	}

	/* ポリシーリンク前のアイコン */
	.policy-link:nth-child(3)::before,
	.policy-link:nth-child(4)::before {
	    content: "□";
	    margin-right: 5px;
	    font-size: 0.7rem;
	}
	
/* CONTACT USセクション */
.contact-section {
    padding: 100px 0 20px 0;
    background: #fffaf0c9;
    position: relative;
}
	.contact-container {
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 0 30px;
	}

		.contact-content {
		    background-color: #fff;
		    border-radius: 8px;
		    padding: 40px;
		    box-shadow: -3px 5px 15px 0px rgb(0 0 0 / 18%);
		    text-align: center;
		}
			.contact-title{
				font-size: clamp( 18px, calc( 14px + 0.8333333333333334vw ), 24px );
			}
			.contact-description{
				font-size: clamp( 12px, calc( 9.333333333333332px + 0.5555555555555556vw ), 16px );
			}
			
		/* お問い合わせフォームのスタイル */
		#contact-form {
		    width: 100%;
		    max-width: 800px;
		    margin: 30px auto 0;
		}

		.form-group {
		    margin-bottom: 25px;
		    text-align: left;
		}

		.required-input label:after {
		    content: " *";
		    color: #ff6b6b;
		}

		#contact-form label {
		    display: block;
		    font-size: 16px;
		    font-weight: 600;
		    color: #333;
		    margin-bottom: 8px;
		}
		
		#contact-form input,
		#contact-form select,
		#contact-form textarea {
		    width: 100%;
		    padding: 12px 15px;
		    border: 1px solid #ddd;
		    border-radius: 6px;
		    font-size: 16px;
		    color: #333;
		    background-color: #f9f9f9;
		    transition: all 0.3s ease;
		}

		#contact-form input:focus,
		#contact-form select:focus,
		#contact-form textarea:focus {
		    border-color: #ff9900;
		    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
		    outline: none;
		    background-color: #fff;
		}

		#contact-form textarea {
		    min-height: 150px;
		    resize: vertical;
		    font-size: clamp(14px, calc(12.666666666666666px + 0.2777777777777778vw), 16px);
		}

		#contact-form .contact-button-container {
		    text-align: center;
		    margin-top: 35px;
		}

		/* アラートメッセージのスタイル */
		#alert_message {
		    display: flex;
		    font-weight: 600;
		    background-color: rgb(0 0 0 / 53%);
		    font-size: 20px;
		    position: fixed;
		    width: 100%;
		    height: 100%;
		    left: 50%;
		    top: 50%;
		    transform: translateX(-50%) translateY(-50%);
		    z-index: 1001;
		    align-items: center;
		    justify-content: center;
		}
		
		#alert_message div{
			border-radius: 5px;
		    font-size: 20px;
		    width: fit-content;
		    margin: 0 auto;
		    padding: 10px;
		}
			#alert_message div.success {
			    background-color: #d4edda;
			    color: #155724;
			}

			#alert_message div.error {
			    background-color: #edd4d4;
			    color: #e91414;
			}

		/* レスポンシブ対応 */
		@media (max-width: 768px) {
		    #contact-form {
		        padding: 0 15px;
		    }
		    
		    .form-group {
		        margin-bottom: 20px;
		    }
				}
		/* お問い合わせボタンのスタイル */
		#contact-button {
		    display: inline-flex;
		    align-items: center;
		    justify-content: space-between;
		    background-color: #ff9900;
		    color: white;
		    padding: 15px 30px;
		    border-radius: 8px;
		    text-decoration: none;
		    font-size: 16px;
		    font-weight: 600;
		    transition: all 0.3s ease;
		    min-width: 250px;
		    border: none;
		    cursor: pointer;
		    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}

			#contact-button:hover {
			    background-color: #e07e00;
			    transform: translateY(-2px);
			    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
			}

			#contact-button:active {
			    transform: translateY(0);
			    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			}

			#contact-button:focus {
			    outline: none;
			    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.3);
			}

			/* 送信中の状態 */
			#contact-button:disabled {
			    background-color: #ffbb66;
			    cursor: not-allowed;
			    opacity: 0.7;
			    transform: none;
			    box-shadow: none;
			}

			/* ボタン右側の矢印アイコン */
			#contact-button .button-circle {
			    width: 30px;
			    height: 30px;
			    border-radius: 50%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    margin-left: 15px;
			    background-color: rgba(255, 255, 255, 0.2);
			    transition: background-color 0.3s ease;
			}

			#contact-button:hover .button-circle {
			    background-color: rgba(255, 255, 255, 0.3);
			}

			#contact-button .button-arrow-svg {
			    width: 24px;
			    height: 24px;
			    transition: transform 0.3s ease;
			}