/* =====================
   01 Reset
===================== */

*,
*::before,
*::after {
  	box-sizing: border-box;
}
html {
  	font-size: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote {
  	margin: 0;
  	padding: 0;
}
ul,
ol {
  	list-style: none;
}
img {
  	max-width: 100%;
  	height: auto;
  	display: block;
}
button,
input,
textarea {
  	font: inherit;
  	border: none;
  	background: none;
}

/* =====================
   02 Base
===================== */

body {
  	font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  	line-height: 1.7;
  	color: #3f4f63;
  	background-color: #fff;
  	-webkit-font-smoothing: antialiased;
	padding-top:85px;
}
a {
  	color: inherit;
  	text-decoration: none;
}
a:hover{
	opacity:0.6;
}
section {
  	padding: 80px 20px;
}
.inner {
  	max-width: 1100px;
  	margin: 0 auto;
	padding:0 20px;
}
h2 {
    	font-size: 50px;
}

/* =====================
   03 Layout
===================== */

/* 共通セクション */
.l-section {
  	padding: 80px 20px;
}

/* コンテナ */
.l-inner {
  	max-width: 1100px;
  	margin: 0 auto;
}

/* ヘッダー */
.l-header {
  	position: fixed;
  	top: 0;
  	left:0;
  	width: 100%;
  	padding: 10px 20px;
  	transition: 0.3s ease;
  	background: rgba(255, 255, 255, 1);
    	backdrop-filter: blur(6px);
    	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	z-index:9999;
}
.l-header.scrolled {
  	background: rgba(255, 255, 255, 1);
}

.header-inner {
  	display: flex;
  	align-items: center;
	justify-content:space-between;
	margin:0 auto;
	padding:0 20px;
}
.sp-entry {
    	display: none;
}
.header-right{
	display:flex;
	align-items:center;
	gap:12px;
	flex-shrink:0;
}
.l-header-logo__link {
  	display: flex;
  	align-items: center; 
  	gap: 10px;
  	text-decoration: none; 
}
.l-nav {
  	margin-left: auto;
}
.contact-btn {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width:50px;
  	height: 50px;
  	border-radius: 50%;
  	background: #ff7bac;
  	transition: 0.3s;
}
.contact-btn img {
  	width: 30px;
  	height: 30px;
}
.contact-btn img {
  	filter: brightness(0) invert(1);
}
.contact-btn:hover {
  	opacity: 0.8;
}

/* ナビ */
.nav-list li {
  	position: relative;
}
.nav-list a {
  	display: inline-block;
  	padding:0 20px;
  	position: relative;
}
.nav-list a.active span::after{
  	width: 100%;
}
.nav-list li:not(:nth-child(7))::after {
  	content: "";
  	position: absolute;
  	right: 0;
  	top: 50%;
  	transform: translateY(-50%);
  	width: 2px;
  	height: 18px;
  	background: #8ec6e8;
}
.nav-list a span {
  	position: relative;
  	display: inline-block;
}
.nav-list a span::after {
  	content: "";
  	position: absolute;
  	left: 0;
  	bottom: -4px;
  	width: 0;
  	height: 2px;
  	background: #8ec6e8;
  	transition: width 0.5s ease;
}
.nav-list a:hover span::after {
  	width: 100%;
}
.nav-list a span {
  	transition: opacity 0.3s ease;
}

.entry-btn {
  	display: inline-block;
  	padding: 15px 28px;
  	background: #f15a24;
  	color: #fff;
 	border-radius: 50px;
  	font-weight: 600;
  	font-size: 20px;
  	letter-spacing: 0.05em;
  	transition: all 0.3s ease;
}
.entry-btn:hover {
  	background: #d94e1f;
  	transform: translateY(-2px);
  	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.entry-btn span {
  	display: inline-block;
  	transition: transform 0.3s ease;
}
.entry-btn:hover span {
  	transform: translateY(4px);
}
.entry-wrapper{
position:relative;
}

.entry-dropdown{
position:absolute;
top:100%;
right:0;
background:#f15a24;
border-radius:8px;
min-width:150px;
display:none;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
overflow:hidden;
z-index:1000;
opacity:0.8;
}

/* JS用 */
.entry-dropdown.open{
display:block;
}

/* PC hover */
@media screen and (min-width:769px){
.entry-wrapper:hover .entry-dropdown{
display:block;
}
}

.entry-dropdown li a{
display:block;
padding:12px 18px;
color:#fff;
font-weight:500;
transition:background 0.3s ease;
text-align:center;
opacity:1;
}

.entry-dropdown li a:hover{
opacity:0.6;
}

/* ハンバーガー */
.hamburger {
  	display:none;
}
.hamburger span {
  	width: 28px;
  	height: 2px;
  	background: #333;
  	transition: 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  	transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  	opacity: 0;
}
.hamburger.active span:nth-child(3) {
  	transform: translateY(-8px) rotate(-45deg);
}
.nav-list {
  	display: flex;
}
.sp-entry{
	display;none;
}

/* メインビジュアル */
/* ヒーロー全体 */
.hero-slider {
  	position: relative;
  	width: 100%;
  	height: 600px; /* 好みで調整 */
  	overflow: hidden;
}
/* 個別スライド */
.hero-slide {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background-size: cover;
  	background-position: center -80px;
	background-repeat:no-repeat;
	opacity:0;
  	transition: opacity 1s ease-in-out;
}
/* オーバーレイで文字の見やすさ確保 */
.hero-slide .overlay {
  	position: absolute;
  	inset: 0;
  	background: rgba(255,255,255,0.15);
}
/* 文字 */
.hero-slide .hero-text {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	text-align: center;
  	color: #f6efe6; /* メインキャッチはワイン色 */
  	max-width: 80%;
  	text-shadow: 0 0 6px rgba(0, 0, 0, 0.5),0 0 20px rgba(0,0,0,0.3);
}
/* メインキャッチ */
.hero-slide h1 {
  	font-size: 50px;
  	line-height: 1.2;
 	margin-bottom: 20px;
  	font-family: "Sawarabi Mincho";
}
/* サブコピー */
.hero-slide p {
  	font-size: 20px;
  	line-height: 1.5;
 	color: #f6efe6;
  	margin-bottom: 30px;
  	font-weight:600;
	text-shadow: 0 0px 2px rgba(0, 0, 0, 0.9), 0 0px 6px rgba(0, 0, 0, 0.7);
}
.hero-pagination{
  	position:absolute;
  	bottom:20px;
  	left:50%;
  	transform:translateX(-50%);
  	display:flex;
  	gap:20px;
  	z-index:10;
}

.hero-slide:first-child::after{
content:"";
position:absolute;

left:15%;   /* 横位置 */
bottom:0;     /* 下から配置 */

width:550px;
height:650px;

background:url(../images/darkkhaki_1899.png) no-repeat;
background-size:contain;

z-index:2;
pointer-events:none;
}
.hero-slide:first-child{
background-position:center top;
}
.hero-slide:first-child .hero-text{
margin-left:150px;
}
.hero-slide:first-child .overlay{
background:linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.1) 40%,
rgba(180,230,255,0.25) 70%,
rgba(120,200,255,0.35) 100%



);
}
.dot{
  	width:12px;
  	height:12px;
  	background:rgba(255,255,255,0.5);
  	border-radius:50%;
  	cursor:pointer;
  	transition:0.3s;
}
.dot.active{
  	background:#fff;
  	transform:scale(1.2);
}
/* ボタン */
.hero-btn {
  	display: inline-block;
  	padding: 15px 40px;
  	background: #b11401;
  	color: #fff;
  	text-decoration: none;
  	border-radius: 8px;
  	font-weight: 700;
  	transition: background 0.3s, opacity 0.3s;
}
.hero-btn:hover {
  	background: rgba(177,20,1,0.8);
}
.hero-slide {
  	opacity: 0;
  	z-index: 0;
}
.hero-slide.active {
  	opacity: 1;
  	z-index: 1;
}
.cta-buttons-hero {
  	display: flex;
  	justify-content: center;
  	gap: 30px;
  	margin-left: 75px;
}
.btn-hero {
  	position: relative;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	padding: 20px 40px;
  	border-radius: 10px;
  	font-weight: 700;
  	text-decoration: none;
  	color: #fff;
  	transition: 0.3s;
  	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.btn-hero {
  	display: inline-block; /* または block */
  	min-width: 350px;
  	padding: 15px 30px;
  	text-align: center;
}
.btn-hero .entry-main {
  	font-size: 30px;
}
.btn-hero .entry-sub {
  	font-size: 16px;
  	opacity: 0.9;
}
.btn-hero .arrow {
  	font-size: 24px;
  	margin-top: 5px;
}
/* 色分け */
.btn-hero:first-child {
  	background-color: #ff7bac;
	border-bottom: 6px solid #cc6288;
}
.btn-hero:last-child {
  	background-color: #f15a24;
	border-bottom:6px solid #c9471b;
}
/* ホバー */
.btn-hero:hover {
  	transform: translateY(-4px);
  	box-shadow: 0 12px 25px rgba(0,0,0,0.3);
  	opacity: 0.9;
}
.message-paper-wrapper {
  	padding: 60px 0;
	position:relative;
}
.message-paper-wrapper::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 100%;
  	height: 60px;
  	background: linear-gradient(
    	to bottom,
    	rgba(255,255,255,1),  /* 上のセクション背景色 */
    	rgba(224,247,255,1)    /* 下のセクション背景色 */
  	);
  	pointer-events: none;
}
/* タイトル */
.message-paper h2 {
  	font-family: 'Noto Serif JP', serif; /* 温かみのある明朝系 */
  	font-size: 40px;
  	margin-bottom: 34px;
  	line-height: 2.2; /* 行間調整 */
	text-align:center;
}
/* 本文 */
.message-paper p {
  	font-family: 'Noto Sans JP', sans-serif;
  	font-size: 20px;
  	line-height: 2.1; /* 行間を広くして読みやすく */
  	margin-bottom: 16px;
  	padding-bottom: 16px;
}
.message-p2 {
    	margin-top: 20px;
}
.message-p3 {
    	margin-top: 22px;
}
.message-p4 {
    	margin-top: 24px;
}
.paper-logo {
  	position: absolute;
  	bottom: 30px;
  	right: 30px;
  	width: 100px; 
  	opacity: 0.4;
}
@media screen and (max-width: 768px) {
  .message-paper-wrapper {
    	padding: 40px 0;
  }

  .message-paper {
    	padding: 30px 15px;
  }

  .message-paper h2 {
    	font-size: 22px;
  }

  .message-paper p {
    	font-size: 15px;
  }
}
.message-paper {
  	background-color: #fffdf5; /* 紙色 */
  	max-width: 960px;
  	margin: 0 auto;
  	padding: 40px 20px;
  	border-radius: 8px;
  	box-shadow: 4px 8px 20px rgba(0,0,0,0.15);
	position:relative;
  	background-image: repeating-linear-gradient(
    	to bottom,
    	transparent 0px,
    	transparent 40px,
    	#ccc 41px
  	);
  	background-size: 100% 41px;
   	line-height: 40px;
	transform: rotate(-0.5deg);
}

/* NEWS */

.news-list {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	gap: 20px;
	justify-content:center;
}

/* ??これ追加 */
.news-card {
  	max-width: 400px;
  	width: 100%;
  	background-color: #fffdf5;
  	border-radius: 8px;
  	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  	overflow: hidden;
  	flex: 1 1 30%;
  	display: flex;
  	flex-direction: column;
  	transition: transform 0.3s, box-shadow 0.3s;
  	position: relative;
}
/* テキスト部分をフレックスで伸ばす */
.news-meta,
.news-title {
  	padding: 12px 16px;
}
/* タイトル下にノート風線 */
.news-title {
  	font-size: 18px;
  	font-weight: 700;
  	line-height: 1.4;
  	position: relative;
  	flex-grow: 1;
}
.news-title::after {
  	content: '';
  	display: block;
  	height: 2px;
  	width: 100%;
  	background: repeating-linear-gradient(
    	to right,
    	#ccc,
    	#ccc 4px,
    	transparent 4px,
    	transparent 8px
  	);
  	margin-top: auto; /* タイトルの最後の行の下に線を固定 */
}
/* カードホバー */
.news-card:hover {
  	transform: translateY(-4px);
  	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.news-thumb img {
  	width: 100%;
  	display: block;
  	object-fit: cover;
  	height: 100%;
	max-height: 300px;
}
.news-meta {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 14px;
}
.news-title {
  	padding: 0 16px 16px;
  	font-size: 18px;
  	font-weight: 700;
  	line-height: 1.4;
}
/* もっと見るボタン */
.news-more {
  	text-align: center;
  	margin-top: 24px;
}
.news-more a {
  	display: inline-block;
  	padding: 10px 24px;
  	background-color: #1e90ff; /* 水色 */
  	color: #fff;
  	font-weight: 700;
  	border-radius: 6px;
  	text-decoration: none;
  	transition: background-color 0.3s;
}
.news-more a:hover {
  	background-color: #1a7ac7; /* 少し濃いめ */
}
section.news {
    	background: #e0f7ff;
	position:relative;
	padding:60px 0;
	overflow:visible;
}
section.news::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 100%;
  	height: 80px;
  	background: linear-gradient(
    	to bottom,
    	rgba(224,247,255,1),  /* 上は白 */
    	rgba(255,255,255,1)   /* 下は透明、bodyのベージュが透ける */
  	);
  	pointer-events: none;
}

/* COMPANY */
/* ベージュセクション */
.company-overview {
	background:#fff;
  	position: relative;        /* ::after用に必須 */
  	padding: 60px 0;
}
/* 下端にグラデーションで薄水色へ */
.company-overview::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 100%;
  	height: 80px; /* グラデーションの長さ */
  	background: linear-gradient(
    	to bottom,
    	rgba(255,255,255,1),  /* 上：薄ベージュの透け感 */
    	rgba(224,247,255,1)     /* 下：薄水色 */
  	);
  	pointer-events: none;
}
.ohana-split {
  	background:
    	linear-gradient(rgba(248,243,235,0.9), rgba(248,243,235,0.9)),
    	url("../images/note.jpg");
  	background-size: cover;
  	background-position: center;
  	padding: 50px;
}
.ohana-split {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: 120px; /* 中央余白を広めに */
  	margin-top: 60px;
}
.ohana-page {
  	line-height: 2;
}
.ohana-title {
  	font-size: 22px;
  	margin-bottom: 20px;
  	border-bottom: 2px solid #1e90ff;
  	display: inline-block;
  	padding-bottom: 6px;
}
.ohana-btn {
  	display: inline-block;
  	margin-top: 20px;
  	padding: 8px 50px;
  	border-radius: 40px;
  	border: 2px solid #1e90ff;
  	color: #1e90ff;
  	text-decoration: none;
  	transition: 0.3s;
	position:relative;
}
.ohana-btn:hover {
  	transform: translateY(-3px);
  	box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.company-content p {
    	text-align: center;
}
.ohana-photo {
  	margin: 20px auto 25px;
  	display: block;
	position:relative;
  	transform: rotate(-6deg);
	width: fit-content;
	text-align: center;
}
.ohana-photo img {
  	width: 100%;
  	max-width: 350px;
  	display: block;
  	border: 8px solid #ffffff;   /* 白フチ＝写真感 */
  	box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
.ohana-page.right .ohana-photo {
  	transform: rotate(6deg);
}
.ohana-photo::before {
  	content: "";
  	position: absolute;
  	width: 60px;
  	height: 20px;
  	background: rgba(255,255,255,0.6);
  	top: -10px;
  	left: 50%;
  	transform: translateX(-50%) rotate(-3deg);
}
.ohana-head {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	margin-bottom: 20px;
	margin-top:50px;
}
.ohana-title {
  	margin: 0;
}
.ohana-btn {
  	margin: 0;
}
.ohana-btn::after {
  	content: "→";
  	position: absolute;
  	right: 20px;
  	transition: transform 0.3s ease;
}
.ohana-btn:hover{
	background:#1e90ff;
	color:#fff;
}
.ohana-btn:hover::after {
  	transform: translateX(5px);
}

/* WORKS */
.work-links .inner {
  	position: relative;
	height:800px;
}
.work-links {
  	background-color:#e0f7ff;
  	position: relative;         /* ::after用に必須 */
  	padding: 60px 0;
}

/* 下端にグラデーションで白へ */
.work-links::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 100%;
  	height: 80px; /* グラデーションの長さ */
  	background: linear-gradient(
    	to bottom,
	rgba(224,247,255,1),
    	rgba(255,255,255,1)
  	);
  	pointer-events: none;
}
/* アウトライン風ボタン */
.works-btn {
  	display: inline-block;
  	padding: 10px 50px;
 	border: 2px solid #1e90ff; /* アウトライン色 */
  	color: #1e90ff;
  	border-radius: 40px;
  	cursor: pointer;
  	position: relative;
  	transition: all 0.3s ease;
	position:relative;
	margin-top:20px;
}
/* 矢印追加 */
.works-btn::after {
  	content: '→';
 	position: absolute;
  	right:20px;
  	transition: transform 0.3s ease;
}

/* ホバー時の色変更と矢印アニメ */
.works-btn:hover {
  	background-color: #1e90ff; /* 背景を青に */
  	color: #fff;               /* 文字を白に */
  	border-color: #1e90ff;
}
.works-btn:hover::after {
  	transform: translateX(4px); /* 矢印が右に動く */
}
.photo-wrapper{
  	position:absolute;
  	top:0;
  	left:0;
  	width:100%;
  	z-index:1; /* 封筒より後ろ */
}
.flying-photo {
  position: absolute;
  	width: 250px;          /* 大きく */
  	height: 250px;         /* 大きく */
  	object-fit: cover;
  	border-radius: 12px;    /* 少し丸め */
  	border: 4px solid #fff; /* 白の縁取り */
	top: -40px;   /* フタの下に少しだけ見える */
  	left: 20px;  /* 封筒内の位置 */
  	transition: transform 0.3s ease;
  	z-index:1;
}
.envelope {
  	width: 560px;
  	height: 350px;
  	background: #fff; 
  	border-radius: 12px;
  	box-shadow: 0 20px 40px rgba(0,0,0,0.08),
    		0 60px 120px rgba(0,0,0,0.18);
  	position: absolute;
	left:50%;
	top:50%;
  	overflow: visible;
  	transform:translate(-50%, -50%);
}
/* フタ部分 */
.envelope-body::before {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: 0;
  	border-left: 280px solid transparent;
  	border-right: 280px solid transparent;
  	border-top: 175px solid #FFEFF2;
  	z-index:10;
}
.photo1 {
  	top: -100px;
  	left: 40px;
 	transform: rotate(-5deg);
}
.photo2 {
  	top: -90px;
  	left: 140px;
  	transform: rotate(5deg);
}
.photo3 {
  	top: -85px;
  	left: 270px;
  	transform: rotate(-2deg);
}
.envelope:hover .photo1{
  	transform: translate(-40px,-30px) rotate(-12deg);
}
.envelope:hover .photo2{
  	transform: translate(0px,-50px) rotate(0deg);
}
.envelope:hover .photo3{
  	transform: translate(40px,-30px) rotate(12deg);
}
.photo4 {
  	top: -100px;
  	left: 40px;
 	transform: rotate(-20deg);
}

.photo5 {
  	top: -90px;
  	left: 140px;
  	transform: rotate(-5deg);
}

.photo6 {
  	top: -85px;
  	left: 270px;
  	transform: rotate(20deg);
}
.envelope-2:hover .photo4{
  	transform: translate(40px,-30px) rotate(-25deg);
}
.envelope-2:hover .photo5{
  	transform: translate(0px,-50px) rotate(-5deg);
}
.envelope-2:hover .photo6{
  	transform: translate(-40px,-30px) rotate(25deg);
}
.envelope:hover .flying-photo{
  	box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
/* テキスト */
.envelope a {
  	display: block;
	transform:rotate(0deg);
 	padding-top: 90px;
  	text-align: center;
  	position:relative;
  	z-index:20;
}
.envelope-desc {
    	font-size: 20px;
}
.envelope-1 a {
  	transform: rotate(5deg); /* 封筒と逆 */
}
.envelope-2 a {
  	transform: rotate(-5deg);
}
.envelope h3 {
  	font-size: 18px;
  	margin-bottom: 8px;
}
.envelope-1 {
  	transform: translate(-90%, -40%) rotate(-5deg);
  	z-index: 11;
}
.envelope-2 {
  	transform: translate(0%, -15%) rotate(5deg);
  	z-index: 12;
}
.envelope-1:hover {
  	transform: translate(-90%, -40%) rotate(-5deg) scale(1.03);
}

.envelope-2:hover {
  	transform: translate(0%, -15%) rotate(5deg) scale(1.03);
}
.envelope-body{
  	position:relative;
  	background:#fff;
  	width:100%;
  	height:100%;
  	border-radius:12px;
  	z-index:5;
}

/* PEOPLE */
.people {
    	background: #fff;
	position:relative;
	padding:60px 0;
}
.title-wrapper {
  	display: inline-flex;
  	flex-direction: column;
  	align-items: center; /* サブタイトルをテキスト幅に中央 */
  	text-align: left;    /* 日本語は左寄せ */
}
.section-title {
  	font-weight: 700;
  	align-self: flex-start; /* 左寄せ */
}
.section-subtitle {
  	font-size: 20px;
  	color: #333;
  	letter-spacing: 0.2em;
  	margin-top: 8px;
}
.interview-section {
  	padding: 0 20px 80px;
}
.section-header {
  m	argin-bottom: 60px;
	text-align:center;
}
.interview-grid {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	gap: 50px;
  	max-width: 1100px;
  	margin: 0 auto;
}
.more-btn {
  	background-color: #6faecf;
  	color: #fff;
  	padding: 10px 20px;
  	border-radius: 6px;
  	display: inline-block;
  	text-decoration: none;
  	transition: background 0.3s;
	position:relative;
}
.more-btn:hover {
  	background-color: #162e4b;
}
.more-btn::after {
  	content: "→";
  	position: absolute;
  	right: 20px;
  	transition: transform 0.3s ease;
}
.more-btn:hover::after {
  	transform: translateX(5px);
}
@media (max-width: 1024px) {
  .interview-grid {
    	grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== 社員インタビュー ===== */

.interview-section{
  	padding: 0 20px 80px;
}
/* タイトル */
.interview-heading{
  	text-align:center;
  	margin-bottom:50px;
}
/* 横並び */
.interview-container{
  	display:flex;
  	gap:30px;
  	justify-content:center;
  	flex-wrap:wrap;
	margin-bottom:50px;
}

/* カード */
.interview-card{
 	position:relative;
  	width:300px;
  	background:#fffdf5;
  	border-radius:12px;
  	padding:70px 25px 20px;
  	box-shadow:0 15px 40px rgba(0,0,0,0.08);
  	text-decoration:none;
  	transition:0.3s;
}
.interview-card:hover{
  	transform:translateY(-6px);
  	box-shadow:0 25px 60px rgba(0,0,0,0.12);
}
/* 写真（上からはみ出す） */
.interview-photo{
  	position:absolute;
  	top:-40px;
  	left:180px;
  	width:160px;
  	height:160px;
  	border-radius:50%;
  	object-fit:cover;
  	border:4px solid #fff;
}
/* 内容 */
.interview-content h3{
  	font-size:18px;
  	margin-bottom:5px;
}
.interview-role{
  	font-size:13px;
  	color:#777;
}
.interview-text{
  	padding:75px 25px 50px;
  	font-size:14px;
  	line-height:1.7;
}
.fukidashi1{
  	background:url(../images/fukidashi1.png) no-repeat center/contain;
	background-size: 260px;
}
.fukidashi2{
  	background:url(../images/fukidashi2.png) no-repeat center/contain;
	background-size: 260px;
}
.fukidashi3{
  	background:url(../images/fukidashi3.png) no-repeat center/contain;
	background-size: 260px;
}
/* MORE */
.interview-more{
  	display: inline-block;
    	padding: 10px 50px;
    	border: 2px solid #1e90ff;
    	color: #1e90ff;
    	border-radius: 40px;
    	cursor: pointer;
    	position: relative;
    	transition: all 0.3s ease;
    	position: relative;
	margin-left: 100px;
}
.interview-more:hover{
	background:#1e90ff;
	color:#fff;
}
/* 矢印 */
.interview-more::after{
  	content:"→";
	position:absolute;
	right:20px;
  	transition:0.3s;
}
.interview-card:hover .interview-more::after{
  	transform:translateX(6px);
}

.crosstalk-title-image {
  	position: relative;
  	display: inline-block;
  	margin-bottom: 40px;
}
.crosstalk-title-image img {
  	display: block;
  	width: 70%;
  	height: auto;
	border-radius:10px;
	opacity:0.8;
}
.crosstalk-text {
  	position: absolute;
  	top: 50%;
  	left: 28%;
  	transform: translate(-50%, -50%);
  	font-size: 24px;
  	font-weight: 700;
  	color: #fff; /* ワイン系ロゴ色 */
  	letter-spacing: 0.1em;
  	text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 文字を読みやすく */
}
.crosstalk-card {
    	display: flex;
}
.talk-03 {
    	margin-top: 50px;
}
.crosstalk-right {
    	margin-left: 50px;
}
.crosstalk-left,
.crosstalk-image-wrapper {
  	display: block;
  	position: relative; /* ラベル重ね用 */
  	text-decoration: none; /* 下線消す */
}
.crosstalk-left img,
.crosstalk-image-wrapper img {
  	width: 100%;
  	border-radius: 10px;
  	display: block;
}
.crosstalk-label {
  	position: absolute;
  	top: -5%;
  	left: 35%;
  	transform: translateX(-50%);
  	background: rgba(0,0,0,0.6);
  	color: #fff;
  	padding: 6px 12px;
  	border-radius: 6px;
  	font-weight: 600;
  	font-size: 20px;
  	white-space: nowrap;
  	pointer-events: none; /* 文字上もリンク有効 */
}
.crosstalk-label03 {
  	position: absolute;
  	top: -5%;
  	left: 40%;
  	transform: translateX(-50%);
  	background: rgba(0,0,0,0.6);
  	color: #fff;
  	padding: 6px 12px;
  	border-radius: 6px;
  	font-weight: 600;
  	font-size: 20px;
  	white-space: nowrap;
  	pointer-events: none; /* 文字上もリンク有効 */
}
.crosstalk-label01 {
  	position: absolute;
  	top: -5%;
  	left: 28%;
  	transform: translateX(-50%);
  	background: rgba(0,0,0,0.6);
  	color: #fff;
  	padding: 6px 12px;
  	border-radius: 6px;
  	font-weight: 600;
  	font-size: 40px;
  	white-space: nowrap;
  	pointer-events: none; /* 文字上もリンク有効 */
}
.crosstalk-image-wrapper {
  	position: relative; /* ボタンを重ねるため */
}
.crosstalk-btn {
  	position: absolute;
  	bottom: 10px;  /* 写真の下から */
  	right: 10px;   /* 写真の右から */
 	background-color: #ffffffc4;
  	color: #1e90ff;
	border:1px solid #1e90ff;
  	padding: 10px 50px;
  	border-radius: 40px;
  	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.crosstalk-btn:hover{
	background:#1e90ff;
	color:#fff;
}
.crosstalk-btn::after {
    	content: '→';
    	position: absolute;
    	right: 20px;
    	transition: transform 0.3s ease;
}
.crosstalk-btn:hover::after {
  	transform: translateX(4px); /* 矢印が右に動く */
}

/* FAQ */
.faq {
  	padding: 0;
}
.section-title {
	display:inline-block;
    	color: #f15a24;
}
.faq-item {
  	margin-bottom: 20px;
  	border-radius: 8px;
  	overflow: hidden;
  	background: #fff;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.faq-question {
  	width: 100%;
  	padding: 25px;
  	background: #fffdf5;
  	border: 1px solid #f0f0f0;
  	text-align: left;
  	font-size: 30px;
  	display: flex;
  	justify-content: space-between;
  	cursor: pointer;
	font-weight: bold;
}
.faq-answer {
  	display: none;
  	padding: 20px;
 	background: #fafafa;
	text-align:center;
}
.faq-answer.open {
  	display: block;
}
.faq-q {
  	color: #e6005c;
  	font-weight: bold;
  	font-size: 30px;
  	margin-right: 8px;
}
.faq-icon {
  	position: relative;
  	width: 45px;
  	height: 45px;
  	border-radius: 50%;
  	background: #ff7bac;
  	flex-shrink: 0;
	margin-top:5px;
}
.faq-icon::before {
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 12px;
  	height: 2px;
  	background: #fff;
  	transform: translate(-50%, -50%);
}
.faq-icon::after {
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 2px;
  	height: 12px;
  	background: #fff;
  	transform: translate(-50%, -50%);
  	transition: 0.3s;
}
.faq-question.open .faq-icon::after {
  	opacity: 0;
}
.faq-question-label img,
.faq-answer-label img {
  	width: 35px;
 	height: 35px;
  	border-radius: 50%;
  	margin-right: 8px;
  	vertical-align: middle;
}
.faq-question-label {
    	display: flex;
}
.faq-answer-label {
    	display: flex;
	margin-top:20px;
	text-align:left;
}
.btn-faq-more {
  	position: relative;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
}
.btn-faq-more::after {
  	content: "→";
  	position: absolute;
  	right: 20px;
  	transition: transform 0.3s ease;
}
.btn-faq-more:hover::after {
  	transform: translateX(5px);
}
.faq-btn{
	text-align:center;
}

/* CTA */
.recruit-cta {
  	padding: 80px 0;
  	text-align: center;
}
.btn {
  	display: inline-block;
  	padding: 15px 100px;
  	margin: 30px;
  	text-decoration: none;
  	border-radius: 50px;
  	font-weight: bold;
	box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.btn-outline {
  	background: transparent;
	border: 2px solid rgb(30, 144, 255);
	color: rgb(30, 144, 255);
}
.btn-outline:hover {
	background:rgb(30, 144, 255);
	color:#fff;
}
.btn-primary {
  	background: #e6005c;
  	color: #fff;
}
.cta-buttons {
  	margin-top: 20px;
}

/* ===== セクション全体（目立たせる） ===== */
.recruit-cta {
  	padding: 100px 20px;
  	text-align: center;
  	color: #fff;
  	position: relative;
}
.recruit-cta .inner {
  	max-width: 900px;
  	margin: 0 auto;
}

/* ===== 募集要項（補助ボタン） ===== */
.btn-outline-new {
  	display: inline-block;
  	padding: 20px 100px;
  	margin-bottom: 40px;
  	border: 2px solid rgb(30, 144, 255);
  	color: rgb(30, 144, 255);
  	font-weight: 600;
  	border-radius: 10px;
  	transition: 0.3s;
	width:50%;
	font-size:20px;
	position:relative;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn-outline-new:hover {
	background:rgb(30, 144, 255);
	color:#fff;
}
.btn-outline-new::after {
    	content: "→";
    	position: absolute;
    	right: 20px;
    	transition: transform 0.3s ease;
	color:rgb(30, 144, 255);
}
.btn-outline-new:hover::after {
  	transform: translateX(5px);
	color:#fff;
}

/* ===== エントリー2つ（主役） ===== */
.cta-buttons-new {
  	display: flex;
  	justify-content: center;
  	gap: 30px;
}
.btn-primary-new {
  	position: relative;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 15px;
  	padding: 20px 60px;
  	background: linear-gradient(180deg, #f15a24 0%, #d94e1f 100%);
	border-bottom:7px solid #c9471b;
  	color: #fff;
  	text-decoration: none;
  	border-radius: 10px;
  	font-weight: 700;
  	transition: 0.3s;
 	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 大きいENTRY */
.entry-main {
  	font-size: 40px;
  	letter-spacing: 2px;
	opacity:0.7;
}

/* 小さい補足文字 */
.entry-sub {
  	font-size: 20px;
  	font-weight: 500;
}

/* ホバー */
.btn-primary-new:hover {
  	transform: translateY(-6px);
  	box-shadow: 0 15px 35px rgba(0,0,0,0.3);
	opacity:1;
}
.btn-primary-new:first-child {
  	background: linear-gradient(180deg, #ff7bac 0%, #e66f9a 100%);
	border-bottom: 7px solid #cc6288;
}
@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.shiny-btn {
    	position: relative;
    	display: block;
    	width: 100%;
    	text-align: center;
    	overflow: hidden;
}
.shiny-btn::after {
    	content: '';
    	position: absolute;
    	top: -50px;
    	left: -50px;
    	width: 50px;
    	height: 50px;
    	background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
}
.shiny-btn:hover::after {
 /* アニメーション */
    	animation-name: shiny;
    	animation-duration: 1s;
    	animation-timing-function: ease-in-out;
}
/* ===== 常時光沢レイヤー追加 ===== */
.shiny-btn::before {
    	content: "";
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 55%;
    	background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.05),
        rgba(255,255,255,0)
    	);
    	border-radius: 10px 10px 0 0;
    	pointer-events: none;
}
.arrow-icon {
  	position: absolute;
  	right: 25px;
  	top: 50%;
  	transform: translateY(-50%);
  	width: 22px;
  	height: 22px;
  	opacity: 0.85;
  	transition: 0.3s;
}
.btn-primary-new {
  	position: relative;
  	padding-right: 70px;
}
.btn-primary-new:hover .arrow-icon {
  	right: 20px;
  	opacity: 1;
}
.arrow_bt{
 	position: absolute;
  	right: 25px;
  	top: 50%;
  	transform: translateY(-50%);
  	font-size: 28px;
}

.cta-buttons-new a:first-child .arrow_bt{
  	animation: arrowMove 1.5s ease-in-out infinite;
}

@keyframes arrowMove{
  0%{
    transform: translate(0,-50%);
  }
  50%{
    transform: translate(8px,-50%);
  }
  100%{
    transform: translate(0,-50%);
  }
}

/* =========================
   Footer 共通
========================= */
.l-footer {
  	font-size: 15px;
  	line-height: 1.8;
}

/* =========================
   上段エリア
========================= */
.footer-top {
  	background-color: #6faecf;
  	padding: 60px 0;
}
.footer-flex {
  	display: flex;
  	justify-content: space-between;
  	gap: 40px;
}
.footer-col {
  	/*flex: 1;*/
	color:#fff;
}
.footer-col:nth-child(1) {
	width: 25%;
}
.footer-col:nth-child(2) {
	width: 40%;
}
.footer-col:nth-child(3) {
	width: 35%;
}
.footer-title {
  	font-size: 20px;
  	margin-bottom: 20px;
  	color: #e3edf7;
}

/* ナビ */
.footer-nav {
  	list-style: none;
  	padding: 0;
}
.footer-nav li {
  	margin-bottom: 8px;
}
.footer-nav a {
  	color: #fff;
  	transition: 0.3s;
}
.footer-nav a:hover {
  	color: #B11401;
}

/* 電話番号強調 */
.footer-tel {
  	font-size: 16px;
  	font-weight: bold;
  	margin-bottom: 10px;
}

/* 塾リンク */
.school-link {
  	display: inline-block;
  	margin-top: 15px;
  	padding: 8px 16px;
  	transition: 0.3s;
}
.school-link:hover {
  	opacity: 0.8;
}
.footer-head {
  	display: flex;
  	align-items: center;
  	gap: 10px;
}
.footer-head img {
  	height: 30px;
}
.footer-bottom {
  	background-color: #4f8faf;
  	color: #fff;
  	padding: 25px 0;
	border-top:1px solid rgba(255,255,255,0.3);
}
.footer-bottom-flex {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
}
.footer-bottom a {
  	color: #fff;
  	text-decoration: none;
}
.footer-bottom a:hover {
  	opacity: 0.7;
}
.footer-brand {
  	font-weight: bold;
  	letter-spacing: 2px;
}

.scroll-top{
  	position: fixed;
  	right: 30px;
  	bottom: 30px;
  	width: 64px;
  	height: 64px;
  	cursor: pointer;
  	opacity: 0;
  	visibility: hidden;
  	transition: 0.3s;
 	z-index:9999;
	display:flex;
  	align-items:center;
  	justify-content:center;
}

.scroll-top.show{
  	opacity:1;
  	visibility:visible;
}

.progress-circle{
  	position:absolute;
  	top:2px;
  	left:2px;
}

.progress-circle circle{
  	fill: none;
  	stroke-width: 4;
}

.progress-circle .bg{
  	stroke: #eee;
}

.progress-circle .progress{
  	stroke: #f15c27;
  	stroke-dasharray: 163;
  	stroke-dashoffset: 163;
  	transition: stroke-dashoffset 0.2s;
}

.arrow_topbt{
  	position:absolute;
  	font-size:18px;
  	color:#f15c27;
  	font-weight:bold;
	background:#fff;      /* 見やすくする */
  	width:40px;
  	height:40px;
  	border-radius:50%;
  	display:flex;
  	align-items:center;
  	justify-content:center;
  	box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.bread-inner{
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	margin: 0 auto;
    	padding: 20px 50px;
	background:#e6f0fa;
	border-bottom:1px solid #e5e5e5;
}
.breadcrumb a:hover {
  	text-decoration: underline;
}

.separator {
  	margin: 0 6px;
  	color: #aaa;
}
.entry-group{
  	margin-top:40px;
}

.entry-title{
  	font-size: 30px;
    	margin-bottom: 15px;
    	color: #3f4f63;
}
.btn-parttime {
    	background: #fff;
    	color: #f9d023;
    	border: 3px solid #f9d023;
    	width: 550px;
    	margin: 0 auto;
	border-bottom: 7px solid #f9d023;
}
.btn-parttime:hover {
    	background: #f9d023;
    	color: #fff;
}
.sp-br{
	display:none;
}
.mv-bottom{
  	padding: 20px 0;
}
.accell {
    	width: 500px;
    	height: auto;
    	margin:0 auto;
	margin-bottom:50px;
}
.sp-br2{
	display:none;
}
.cta-chatch{
	color:rgb(63, 79, 99);
	padding-bottom:30px;
}
.footer-contact {
  	margin-top: 10px;
  	font-size: 14px;
}
.footer-contact a {
  	text-decoration: underline;
}
.footer-contact a:hover {
  	opacity: 0.7;
}
.highlight-banner {
  	font-size: 1.4em;
  	font-weight: bold;
  	color: #000;
  	padding: 12px 18px;
  	border-radius: 8px;
  	text-align: center;
  	line-height: 1.6;
}
/* 黄色マーカー */
.yellow-line {
  	background: linear-gradient(transparent 50%, #ffeb3b 50%);
}
/* ★ここがメイン強調 */
.animated-text {
  	font-size: 1.8em;
  	font-weight: bold;

  	background: linear-gradient(
    	90deg,
    	#ff6b6b 0%,    /* ピンク寄り赤 */
    	#ff9800 30%,   /* オレンジ */
    	#fff176 45%,   /* 明るい黄色（光の中心） */
    	#ffffff 50%,   /* キラッとする部分 */
    	#fff176 55%,   /* 黄色 */
    	#ff9800 70%,   /* オレンジ */
    	#ff6b6b 100%   /* ピンク寄り赤 */
  	);

  	background-size: 200% auto;

  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;

  	animation: shineText 4s linear infinite;
}
/* 左→右に流す */
@keyframes shineText {
  0% {
   	background-position: 200% center;
  }
  100% {
    	background-position: -200% center;
  }
}