@charset "UTF-8";

:root {
	--color__bagde: #c88e2a;
	--color__navy: #1b212a;
	--color__ao: #0c4dff;
	--color__lightblue: #dce7ed;
	--color__lightgray: #eceae7;
	--color__yellow: #ffe77a;
	--color__white: #ffffff;
	--color__orange: #f5ad31;
	--textColor__gray: #363636;
	--textColor__black: #000;
	--bg: #f2f3f2;
	--bg__footer: #e2e2e2;
	--gold: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
}
/*****************************
 common
 *****************************/

h2 {
	display: block;
	margin: 0 auto 40px;
	width: fit-content;
	font-size: clamp(12px, 5vw, 1.7rem);
	line-height: 1.5;
	font-family: serif;
}

h3 {
	margin-top: 30px;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-weight: 500;
}

a {
	color: var(--textColor__gray);
}
s a:visited {
	color: var(--textColor__gray);
}
img {
	width: 100%;
}
@media (min-width: 768px) {
	.none {
		display: none;
	}
}
@media (max-width: 767px) {
	.noneWhenSp {
		display: none;
	}
}

/*****************************
cvBtn
 *****************************/
.button {
    display: block;
    position: relative;
    width: auto;
    height: 60px;
    background: radial-gradient(
        rgba(93, 108, 107, 0.3) 0%,
        rgba(95, 162, 158, 0) 90%
    );
    
    /*：ボタン本体にも角丸を設定しておく（影を丸くするため） */
    /* border-radius: 30px;  */

    /* ：不要な box-shadow: none; などを消して、影を設定 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); 
    
    transition: all 0.3s ease;
}
.button::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -4px;
	left: 0;
	width: 160px;
	height: 10px;
	/* border-radius: 50%; */
	background: rgb(170, 255, 240);
	background: radial-gradient(
		/* rgba(255, 255, 255, 1) 0%, */
		rgba(255, 255, 255, 0) 33%,
		rgba(255, 255, 255, 0) 100%
	);
}
.button::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: -4px;
	right: 0;
	width: 160px;
	height: 10px;
	/* border-radius: 50%; */
	background: rgb(170, 255, 240);
	background: radial-gradient(
		/* rgba(255, 255, 255, 1) 0%, */
		rgba(255, 255, 255, 0) 33%,
		rgba(255, 255, 255, 0) 100%
	);
}
.button__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border-radius: 30px; ここで角を丸くする */
    background: linear-gradient(to top, #ec7c17, #e5c449);
    overflow: hidden; /* ★重要：すべてのツヤをこの丸い形の中に閉じ込める */
}
.button__box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	/* 変更ここから */
    /* 最小20px ~ 画面幅の4% ~ 最大32px の間でいい感じに伸び縮みする */
    font-size: clamp(20px, 4vw, 32px); 
    
    /* 影のぼかし具合を font-size に連動させる（0.2em = フォントサイズの20%） */
    text-shadow: 0px 0px 0.2em #000;
    /* 変更ここまで */
	font-weight: bold ;
	z-index: 1;
	top: 3%;
	left: 0.8%;
	width: 98.4%;
	height: 94%;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 2px;
	background: rgb(255, 255, 255);
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.4) 0%,
		rgba(255, 255, 255, 0) 50%
	);
	transition: all 1s ease;

	animation-delay: 3.5s;
	pointer-events: none;
	/* border-radius: 30px; */
	overflow: hidden;
}
.button__box::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.4),
		rgba(255, 255, 255, 0)
	);
	clip-path: path(
		"M215.98,12.57c8.09,0,16.1,.12,24.02,.33V0H0V44.89C53.01,25.06,130.12,12.57,215.98,12.57Z"
	);
}
.button--round {
	border-radius: 30px;
}
.button--round .button__wrapper {
	clip-path: path(
		"M210,1c15.99,0,29,13.01,29,29s-13.01,29-29,29H30C14.01,59,1,45.99,1,30S14.01,1,30,1H210m0-1H30C13.43,0,0,13.43,0,30s13.43,30,30,30H210c16.57,0,30-13.43,30-30S226.57,0,210,0h0Z"
	);
}
.button--round .button__box {
	border-radius: 30px;
	overflow: hidden;
}
.button:hover{
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.3); /* フワッと白い光を追加 */
}
@keyframes button2 {
	0% {
		letter-spacing: 2px;
		color: rgba(255, 255, 255, 0.9);
	}

	50% {
		letter-spacing: 8px;
		color: rgba(255, 255, 255, 1);
	}
	100% {
		letter-spacing: 2px;
		color: rgba(255, 255, 255, 0.9);
	}
}

/* 本体に関係ないスタイル */

.cvBtn {
	display: block;
	text-align: center;
	margin: 40px 0 0 0px;
	padding-top: 0px;
	height: auto;
	width: 650px;
	overflow: hidden;
	pointer-events: none;
}
.position__cvbtn {
	margin: 0 auto 0;
}
.sendEmailAnimation {
	position: relative;
}
.cvBtn__sentMail {
	width: 100%;
}
.cvBtn__copyMail {
	display: block;
	color: var(--color__white);
	font-size: 20px !important;
	font-weight: bold !important;
	line-height: 1.2;
	margin-bottom: 20px;
}
.cvBtn__copyMail--2 {
	color: var(--color__bagde);
}
.cvBtn_container {
	width: 100%;
	height: auto;
	margin-top: 16px;
	margin-bottom: 16px;
	pointer-events: auto;
}
.cvBtn__btn {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: var(--color__limeGreen);
	width: 390px;
	height: 96px;
	margin: auto;
	border-radius: 100vh;
	border-bottom: solid 5px var(--textColor__black);
	line-height: 96px;
	color: var(--textColor__black);
	position: relative;
	padding-left: 64px;
	font-size: 1.4rem;
	font-weight: bold;
	animation: push_btn 2s infinite;
}
.cvBtn__btn::before {
	content: "無料";
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: var(--color__white);
	border-radius: 50%;
	height: 80px;
	width: 80px;
	padding: 2px;
	position: absolute;
	left: 8px;
	top: 6px;
	line-height: 80px;
	color: var(--color__orange);
	font-size: 2rem;
	font-weight: 800;
}
.cvBtn__btn--2::before {
	background: var(--textColor__black);
}

.hideBox {
	position: absolute;
	height: 100%;
	width: 100%;
	animation: send_animation_img 2s infinite linear;
	z-index: 10;
	background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
		linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
		linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
		linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
		linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
		linear-gradient(
			#1d1d1d 25%,
			#1a1a1a 25%,
			#1a1a1a 50%,
			transparent 50%,
			transparent 75%,
			#242424 75%,
			#242424
		);
	background-color: #131313;
	background-size: 20px 20px;
}
.hideBox--2 {
	background: var(--color__white);
}

@keyframes send_animation_img {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	45% {
		transform: translateX(90%);
		opacity: 1;
	}
	55% {
		transform: translateX(90%);
		opacity: 1;
	}
	56% {
		transform: translateX(90%);
		opacity: 0;
	}
	100% {
		transform: translateX(90%);
		opacity: 0;
	}
}
@keyframes push_btn {
	0% {
		transform: translateY(0px);
		border-bottom: solid 5px var(--textColor__black);
	}
	51% {
		transform: translateY(0px);
		border-bottom: solid 5px var(--textColor__black);
	}
	52% {
		transform: translateY(5px);
		border-bottom: 0;
	}
	100% {
		transform: translateY(5px);
		border-bottom: 0;
	}
}

@media (min-width: 768px) {
	.none {
		display: none;
	}
}

.btn__bg2 {
	padding: 80px 0 56px;
}
/*****************************
header
 *****************************/

.header__wrap {
	display: flex;
	background: var(--color__white);
	height: auto;
}

.header__icon {
	height: auto;
	width: 200px;
	margin: 24px auto;
}
.esaiten {
	display: block;
	width: 50%;
	margin: 0 auto 50px;
}
@media (max-width: 767px) {
	.header__icon {
		height: auto;
		width: 140px;
		margin: 6px auto;
	}
	.esaiten {
		display: block;
		width: 90%;
		margin: 0 auto 50px;
	}
}

/*****************************
navbox
 *****************************/
.nav__Box {
	padding: 0% 0;
}

.nav__text {

    margin-top: 0px;

    padding-top: 20px;

    padding-bottom: 20px;

    width: 80%;

    margin: 0 auto;

    font-family: serif;

    font-weight: 650;

    font-size: clamp(12px, 3vw, 18px);

	

	/* 1. 最後の1文字だけが改行されるのを防ぐ（最新の超便利機能！） */
    text-wrap: balance; 
    
    /* 2. 英語やカタカナが変な位置でスパッと切れるのを防ぐ */
    word-break: keep-all;
    overflow-wrap: break-word; /* keep-allで画面からはみ出すのを防ぐ保険 */

}
.nav__text ul {
    display: flex;
    justify-content: center;
    gap: 8vw; /* 100pxの代わりにvw(画面幅の割合)を指定。スマホでは狭く、PCでは広くなります */
    color: var(--color__white);
    text-align: center;
    line-height: 1.6;
}
@media (max-width: 425px) {
	.nav__text {
		width: 90%;
		line-height: 1.6;
	}
	.nav__text ul {
		gap: 15px;
		justify-content: space-between;
	}
}
.nav__text ul li a {
	color: #000;
}

.carbon {
    background-image: 
        /* 1層目: 模様の上部を背景色と同化させて薄く見せるカバー */
        linear-gradient(to bottom, rgba(0, 61, 117, 0.85) 0%, rgba(0, 96, 183, 0) 50%),
        
        /* 2層目: 六角形の幾何学模様（線を細く、透明度を高くしました） */
        url("data:image/svg+xml,%3Csvg width='40' height='35' viewBox='0 0 40 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='hexagon' x='0' y='0' width='40' height='35' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='10 0 30 0 40 17.5 30 35 10 35 0 17.5' fill='none' stroke='rgba(255, 255, 255, 0.25)' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23hexagon)'/%3E%3C/svg%3E"),
        
        /* 3層目: ベースとなる一番奥の3色グラデーション */
        linear-gradient(to bottom, #003d75, #0060b7, #0187c0);

    /* 2番目の数値（24px 21px）で模様を小さく・細かくしています */
    background-size: 100% 100%, 24px 21px, 100% 100%;
    
    background-repeat: no-repeat, repeat, no-repeat;
    width: 100%;
    height: 100%;
}

.white {
	color: #e1e1e1;
}
/*****************************
main
 *****************************/

.main {
	background: var(--color__lightblue);
	padding-top: 56px;
	overflow: hidden;
}
.text {
	font-size: clamp(30px, 4vw, 38px);
	color: #c45800;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 500;
	letter-spacing: 0.3rem;
	line-height: 1.5;
	margin-top: 0;
}
.kome {
	font-size: 12px;
	color: #c45800;
}
.main_box {
	display: block;
	background: var(--color__white);
	opacity: 0.8;
	width: 80%;
	max-width: 700px;
	padding: 56px;
	color: var(--color__white);
	margin: 0 auto;
	border: 1px solid var(--color__white);
	text-align: left;
	box-shadow: 3px 7px 15px 0px rgba(34, 28, 28, 0.2);
}
.text_small {
	display: block;
	margin: 24px 0;
	line-height: 2;
	color: var(--color__navy);
	font-size: clamp(8px, 4vw, 1rem);
}

.mainDescription {
	margin: 0px auto 80px;
	text-align: center;
	box-sizing: border-box;
}
.mainDescription p {
	color: var(--textColor__gray);
	line-height: 1.5;
}
.mainDescription img {
	margin-top: 36px;
	max-width: 700px;
}
.mark {
	background: yellow;
}
/*****************************
1
 *****************************/
.bg--text {
	background-color: #ececec;
	opacity: 1;
	background-image: linear-gradient(135deg, #e1e1e1 25%, transparent 25%),
		linear-gradient(225deg, #e1e1e1 25%, transparent 25%),
		linear-gradient(45deg, #e1e1e1 25%, transparent 25%),
		linear-gradient(315deg, #e1e1e1 25%, #ececec 25%);
	background-position: 7px 0, 7px 0, 0 0, 0 0;
	background-size: 7px 7px;
	background-repeat: repeat;
	padding: 80px 13px 56px;
}
.present__wrap {
	display: flex;
	justify-content: center;
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}
.moshi__wrap {
	height: 580px;
	width: 48%;
}
.moshi__headWrap {
	max-width: 425px;
	height: 500px;
	margin: 0 auto;
	position: relative;
}
.moshi__title {
	background: var(--color__white);
	color: var(--textColor__black);
	width: fit-content;
	font-size: clamp(16px, 5vw, 26px);
	padding: 10px;

	display: block;
	margin: auto auto auto 0;
	text-align: left;
	position: absolute;
	top: 100px;
	left: 40px;
	z-index: 10;
	box-shadow: 3px 7px 15px 0px rgba(34, 28, 28, 0.2);
}
.moshi__tagBox {
	background: yellow;
	color: #000; 
    width: fit-content;
    font-size: 30px;
    padding: 35px 20px; 
    display: inline-block;
    position: relative;
    font-family: sans-serif; 
    
    border: 3px solid #000; 
    border-radius: 50%; 
    box-shadow: 3px 3px 0px #000; 
    text-align: center;
	z-index: 1;
	transform: translate(-80px, -35px); 
}

@media (min-width: 768px) and (max-width: 1200px) {
    .moshi__tagBox {
        /* X軸（左の数値）を -80px から -40px などに変更して右に移動させます */
        /* ※ -35px や 0px など、画面を見ながらちょうどいい数値に調整してください */
        transform: translate(0px, -35px); 
    }
}

.moshi__tagBox::before {
    content: "";
    position: absolute;
    bottom: -2px; 
    right: 18px;  
    width: 12px; 
    height: 12px;
    
    background: yellow; 
    border-right: 3px solid #000; 
    border-bottom: 3px solid #000; 
    
    /* 変形は維持して鋭い先端を作る */
    transform: skewX(45deg) rotate(25deg);
    
    z-index: -1; 
    box-shadow: 2px 2px 0px #000; 
}
.moshi__number {
	font-size: clamp(40px, 10vw, 80px);
	display: block;
	margin: auto auto auto 0;
	text-align: left;
	position: absolute;
	left: 118px;
	top: 0px;
	z-index: 10;
	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: clamp(20px, 10vw, 80px);
}
.moshi__img {
	width: auto;
	height: 170px;
	display: block;
	margin: auto 0 auto auto;
	text-align: right;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0.8;
}
.moshi__txt {
	background: var(--color__white);
	color: var(--textColor__gray);
	line-height: 1.5;
	margin: 20px 4% 0 4%;
	padding: 24px;
	max-width: 600px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	z-index: 100;
	position: absolute;
	top: 180px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 3px 7px 15px 0px rgb(137 127 127 / 20%);
	box-sizing: border-box;

	font-size: clamp(8px, 4vw, 1rem);
}
@media (max-width: 767px) {
	.present__wrap {
		display: block;
		margin: 0 4%;
		justify-content: center;
		gap: 100px;
	}
	.moshi__wrap {
		height: 580px;
		width: 100%;
	}
	.moshi__tagBox {
		position: absolute;
		left: 0;
		top: 0;
		transform: translate(-20px, -12px); 
	}
	.moshi__number {
		position: absolute;
		left: 100px;
		top: 9px;
		font-size: 60px;
	}
	.moshi__title {
		position: absolute;
		top: 100px;
		left: 0px;
		font-size: clamp(16px, 9vw, 20px);
	}
	.moshi__img {
		position: absolute;
		top: 0%;
		right: 0%;
		height: 200px;
		background-size: contain;
		opacity: 0.8;
	}
	.moshi__txt {
		width: auto;
		left: 0;
		transform: none;
	}
}

/*****************************
2
 *****************************/
.pastExam__wrap {
	height: auto;
	width: 48%;
}
.pastExam__headWrap {
	max-width: 425px;
	height: 500px;
	margin: 0 auto;
	position: relative;
}
.pastExam__title {
	background: var(--color__white);
	color: var(--textColor__black);
	width: fit-content;
	font-size: clamp(16px, 5vw, 26px);
	padding: 10px;

	display: block;
	margin: auto auto auto 0;
	text-align: left;
	position: absolute;
	top: 80px;
	left: 0px;
	z-index: 10;
	box-shadow: 3px 7px 15px 0px rgba(34, 28, 28, 0.2);
}
.pastExam__tagBox  {
	background: yellow;
	color: #000; 
    width: fit-content;
    font-size: 30px;
    padding: 35px 20px; 
    display: inline-block;
    position: relative;
    font-family: sans-serif; 
    
    border: 3px solid #000; 
    border-radius: 50%; 
    box-shadow: 3px 3px 0px #000; 
    text-align: center;
	z-index: 1;
transform: translate(-80px, -35px); 
}

@media (min-width: 768px) and (max-width: 1200px) {
    .pastExam__tagBox {
        /* X軸（左の数値）を -80px から -40px などに変更して右にずらす */
        transform: translate(0px, -35px); 
    }
}
.pastExam__tagBox::before {
    content: "";
    position: absolute;
    bottom: -2px; 
    right: 18px;  
    width: 12px; 
    height: 12px;
    
    background: yellow; 
    border-right: 3px solid #000; 
    border-bottom: 3px solid #000; 
    
    /* 変形は維持して鋭い先端を作る */
    transform: skewX(45deg) rotate(25deg);
    
    z-index: -1; 
    box-shadow: 2px 2px 0px #000; 
}
.pastExam__number {
	font-size: clamp(40px, 10vw, 80px);
	display: block;
	margin: auto auto auto 0;
	text-align: left;
	position: absolute;
	left: 118px;
	top: 0px;
	z-index: 10;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: clamp(20px, 10vw, 80px);
}
.pastExam__img {
	width: auto;
	height: 170px;
	display: block;
	margin: auto 0 auto auto;
	text-align: right;
	position: absolute;

	top: 0;
	right: 0;
	opacity: 0.8;
}
.pastExam__txt {
	background: var(--color__white);
	color: var(--textColor__gray);
	line-height: 1.5;
	margin: 20px 4% 0 4%;
	padding: 24px;
	max-width: 600px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	z-index: 100;
	position: absolute;
	top: 180px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 3px 7px 15px 0px rgb(137 127 127 / 20%);
	box-sizing: border-box;

	font-size: clamp(8px, 4vw, 1rem);
}
@media (max-width: 767px) {
	.pastExam__wrap {
		height: 480px;

		width: 100%;
	}
	.pastExam__tagBox {
		position: absolute;
		left: 0;
		top: 0;
		transform: translate(-20px, -12px); 
	}
	.pastExam__number {
		position: absolute;
		left: 100px;
		top: 9px;
		font-size: 60px;
	}
	.pastExam__title {
		position: absolute;
		top: 100px;
		left: 0px;
		font-size: clamp(16px, 9vw, 20px);
	}
	.pastExam__img {
		position: absolute;
		top: 0px;
		right: 0%;
		height: 200px;
		opacity: 0.8;
		background-size: contain;
	}
	.pastExam__txt {
		width: auto;
		left: 0;
		transform: none;
	}
}

/*****************************
howTo
 *****************************/
.howTo {
	padding: 56px 0 64px;
}

.howTo__wrap {
	display: block;
	margin: 48px 4%;
	text-align: center;
}
.howTo__wrap li {
	display: block;
	height: 72px;
	width: 70%;
	max-width: 700px;
	margin: 32px auto;
	background: var(--color__lightgray);
	color: var(--textColor__gray);
	line-height: 72px;
	font-size: clamp(8px, 4vw, 1rem);
	border-radius: 10px;
	position: relative;
}
.howTo__wrap li:first-child::before {
	content: "";
	background-size: contain;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: yellow;
	background-image: url(../../images/2026/icon1.png);
	background-size: contain;
	border-radius: 5px;
	border: 5px solid  yellow;
	height: 40px;
	width: 40px;
	padding: 2px;
	left: 6px;
	top: 10px;
	line-height: 80px;
	font-size: 2rem;
	font-weight: 800;
	position: absolute;
}
.howTo__wrap li:nth-child(2)::before {
	content: "";

	background-size: contain;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: yellow;
	background-image: url(../../images/2026/icon2.png);
	background-size: contain;
	border-radius: 5px;
	border: 5px solid  yellow;
	height: 40px;
	width: 40px;
	padding: 2px;
	left: 6px;
	top: 10px;
	line-height: 80px;
	font-size: 2rem;
	font-weight: 800;
	position: absolute;
}
.howTo__wrap li:nth-child(3)::before {
	content: "";

	background-size: contain;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: yellow;
	background-image: url(../../images/2026/icon3.png);
	background-size: contain;
	border-radius: 5px;
	border: 5px solid  yellow;
	height: 40px;
	width: 40px;
	padding: 2px;
	left: 6px;
	top: 10px;
	line-height: 80px;
	font-size: 2rem;
	font-weight: 800;
	position: absolute;
}
.howTo__wrap li:last-child::before {
	content: "";

	background-size: contain;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: yellow;
	background-image: url(../../images/2026/icon4.png);
	background-size: contain;
	border-radius: 5px;
	border: 5px solid  yellow;
	height: 40px;
	width: 40px;
	padding: 2px;
	left: 6px;
	top: 10px;
	line-height: 80px;
	font-size: 2rem;
	font-weight: 800;
	position: absolute;
}
.next {
	background: yellow;
	
	height: 16px;
	width: 16px;
	margin: 8px auto;
	transform: rotate(180deg);

	clip-path: polygon(50% 0%, 0 85%, 100% 85%);
}

@media (max-width: 767px) {
	.howTo__wrap {
		text-align: left;
	}
	.howTo__wrap li {
		width: 75%;
		padding-left: 72px;
	}
}
/*****************************
relationSeminar
 *****************************/
/* .recommendSeminar--modifire {
	height: 50px;
	background: var(--color__yellow);
	position: relative;
	border-top: solid 5px var(--color__navy); 
	margin-bottom: 40px;
 } */
/* .recommendSeminar--modifire::after {
	content: "";
	position: absolute;
	background: linear-gradient(45deg, var(--color__white) 50%, transparent 52%),
		linear-gradient(315deg, var(--color__white) 50%, transparent 52%);
	background-size: 20px 20px;
	height: 14px;
	width: 100%;
	bottom: 0;
} */

.mains {
    padding-top: 56px;
  }

/* 大枠の横並びを解除して画面幅を広く使う */
.reccomendSeminarWrap {
    display: block; 
    
    /* 👇 左右を auto に変更すると真ん中に配置されます */
    margin: 32px auto; 
    
    /* 👇 画面がすごく広いPCで見た時に、横に広がりすぎないように最大幅を決めておくと綺麗に中央にまとまります（数値はお好みで調整してください） */
    max-width: 1200px; 
    
}

/* フレックスボックスで折り返し（wrap）を有効にする */
.straight, .firstExam {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 32px;
    gap: 4%; 
    align-items: flex-start;
}

/* タイトル（h3）を一番上（order: 1）にして横幅100%にする */
.straight h3, .firstExam h3 {
    width: 100%;
    order: 1;
    margin-bottom: 20px;
	text-align: left !important;
    justify-content: flex-start !important; /* もし flex がかかっていた場合のための左寄せ */
}

/* ★修正ポイント：画像を囲む「aタグ」を左側（order: 2）にする */
.straight a, .firstExam a {
    order: 2;
    width: 45%;
    max-width: 600px;
    margin: 0;
    display: block; /* aタグの横幅指定を効かせるために必須 */
}

/* aタグの中の画像を枠いっぱいに広げる */
.straight a img, .firstExam a img {
    width: 100%;
    height: auto;
}

/* 文章を右側（order: 3）にする */
.straight p, .firstExam p {
    order: 3;
    width: 48%;
    padding: 0;
    line-height: 1.7;
    font-size: clamp(12px, 2vw, 1rem);
    text-align: left;
}

/* =========================================
   スマホ版（767px以下）のレイアウト
   ========================================= */
@media (max-width: 1000px) {
    /* 1. スマホ版の全体を画面のど真ん中に配置する */
    .reccomendSeminarWrap {
        width: 92%; /* 左右に4%ずつの余白を綺麗に作る */
        margin: 32px auto; /* 左右をautoにして確実の中央寄せ */
    }

    .straight, .firstExam {
        flex-direction: column; /* 縦並びに戻す */
        gap: 16px;
    }
    
    /* スマホでは画像(aタグ)も文章も横幅いっぱいにする */
    .straight a, .firstExam a,
    .straight p, .firstExam p {
        width: 100%;
    }
    
  
.straight, .firstExam {
        flex-direction: column;
        gap: 0  /* ← 16px から 0 に変更して隙間をリセット */
    }
    
    /* 2. タイトルの「下」の余白をゼロにする */
    .straight h3, .firstExam h3 {
        margin-bottom: 10 ;
    }
    
    /* 3. 画像（aタグ）の「上」の余白をゼロにし、「下」の文章との間だけ隙間を作る */
    .straight a, .firstExam a {
		  margin: 1px auto;
        width: 100%;
        margin-top: 0 ;      /* タイトルとの隙間をなくす */
        margin-bottom: 16px ; /* 下の文章とは少し隙間をあける */
    }
    /* 2. スマホ版の文字サイズを大きくして読みやすくする */
    .straight p, .firstExam p {
        font-size: 15px ; /* スマホ用にしっかり読めるサイズ（15px〜16px）に固定 */
        line-height: 1.8; /* 文字が大きくなる分、行間も少し広げて窮屈さをなくす */
    }

	.reccomend__h3 {
        white-space: normal !important; /* 1行に固定する設定を解除し、見切れを防ぐ */
        word-break: keep-all ; /* 単語の途中で不自然に改行されるのを防ぐ */
        overflow-wrap: break-word ; /* 画面の端まできたら綺麗に改行させる */
        
        /* 黒い箱（令和8年度受検）と重なったり窮屈な場合は、ブロックにして少し隙間を空けます */
        display: block ; 
        margin-top: 8px ;
        line-height: 1.4; /* 複数行になった時も読みやすい行間に */
    }
}

/*****************************
 slider
 *****************************/
.slider {
	justify-content: center;
	overflow: hidden;
}
.slider__item {
	margin: 16px;
	max-width: 1400px;
	margin-bottom: 56px;
}

/*****************************
relation other
 *****************************/
.relation {
	background: var(--color__lightblue);
}
.relationSeminar {
	margin: 32px 4% 0;
	padding: 40px 0;
	text-align: center;
}
.relationSeminar p {
	line-height: 1.5;

	font-size: clamp(8px, 4vw, 20px);
}
.sekou__img {
	max-width: 700px;
	margin: 8px 0 32px;
}

/*****************************
 footer
 *****************************/
.footer {
	background-color: var(--color__navy);
	text-align: center;
	height: 80px;
	display: flex;
	align-items: center;
}

.footer p {
	color: var(--color__white);
	font-size: 0.6rem;
	margin: 0 auto;
}

.borderBottom {
	border-bottom: solid 1px var(--textColor__black);
}
.borderBottom.is-full-extended {
	border-bottom: solid 1px var(--textColor__black);
}
* {
	margin: 0;
}
.confetti canvas {
	height: 100%;
	width: 100%;
	position: absolute;
}

.box--mini {
    background: var(--color__navy);
    color: var(--color__white);
    
    /* 1. 文字サイズを画面幅に合わせて自動調整（最小12px 〜 最大20px） */
    font-size: clamp(12px, 3vw, 20px);
    
    /* 2. 背景の幅を画面幅に合わせて自動調整（最小120px 〜 最大200px） */
    flex-basis: clamp(100px, 20vw, 200px);
    max-width: 100%; /* スマホなどですごく狭くなった時、画面からはみ出さないための保険 */

    /* 3. 高さを指定（heightではなく min-height にすると、文字が大きくなっても箱が自動で伸びて安全です） */
    min-height: 10px; 
    
    /* 4. 余白（文字が箱のギリギリにくっつかないように、左右に少しだけ隙間を作ります） */
    padding: 0 10px;
    
    /* Flexboxでど真ん中に配置 */
    display: flex;
    align-items: center;      /* 垂直（上下）の中央揃え */
    justify-content: center;  /* 水平（左右）の中央揃え ※左寄せにしたい場合は外してください */
}



@media (min-width: 426px) {
    .koza {
        display: flex;
        text-align: center;
        gap: 20px;
    }
}

/* --- 425px以下の時の指定（追加部分） --- */
@media (max-width: 766px) {
    .koza {
        display: block;     /* flexを解除し、普通のブロック要素に戻す */
        text-align: left;   /* 中央寄せを解除し、左詰めに直す */
        /* display: block; になれば gap は無効化されるため、そのままでOKです */
    }
}


.h1__reiwa7 {
	display: block;
	background: rgba(100, 100, 0, 0.8);
	color: var(--color__white);
	width: fit-content;
	font-size: 32px;
	padding: 2px 10px;
	font-weight: 500;
}
.h1__2ks {
	display: block;
	background: rgba(255, 255, 255, 0.8);
	color: var(--textColor__black);
	width: fit-content;
	font-size: 50px;
	letter-spacing: 4px;
	padding: 2px 20px 5px;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 20px;
}
.h1__kyozai {
	display: block;
	color: var(--color__white);
	font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;

	padding: 5px 20px;

	font-size: 42px;
	line-height: 1.2;
}

.h1__1zi2ziwrap {
	display: block;
	height: auto;
	margin-top: 20px;
}
.h1__shiken {
	background-color: var(--color__yellow);
	color: var(--textColor__black);
	padding: 2px 20px;

	font-size: 24px;
	width: fit-content;
	padding: 2px 20px 5px;
	font-weight: 500;

	line-height: 1;
}
.h1__taisakukyozai {
	color: var(--color__white);

	padding: 5px 20px;

	font-size: 24px;
}
.h1__flex {
	display: flex;
	margin: auto 0;
	align-items: center;
}
.h1__dlsurvice {
	display: block;
	margin: 0 auto;
	background-color: var(--textColor__black);
	border: solid 2px white;
	color: var(--color__white);
	font-size: 32px;
	width: fit-content;
	font-weight: 500;
	line-height: 95px;
	border-radius: 100%;
	height: 100px;
	width: 100px;
	text-align: center;
	padding-left: 0.5%;
	box-sizing: border-box;
}
.color-white {
	color: var(--color__white);
	margin: 30px 0 20px;
}
.topimg__ashirai {
	display: block;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	color: var(--color__orange);
	right: 20px;
	top: 100px;

	width: fit-content;
	height: 3rem;
	line-height: 3rem;
	padding: 20px 40px;
	font-size: 34px;
	font-family: "Times New Roman", Times, serif;
}


.main__boxWrap {
	display: block;
	background-color: rgba(0, 0, 0, 0.6);
	background-image: url(../../images/2025/2ks_moshi_pc.png);
	background-repeat: no-repeat;
	background-position: right 0px bottom 0px;
	background-size: contain;
	padding: 30px 0px 30px 70px;
	max-width: 1440px;
	margin: 0 auto;
	height: 650px;
	box-sizing: border-box;
	position: relative;
}

.reccomend__h3 {
    /* 上下の余白は元のまま（0）、左右の中央寄せ（auto）だけを 0 にして左に詰める */
    margin: 0 0 ; 
    
    /* 消えてしまっていた元の文字サイズと行の高さを復活させます */
    font-size: clamp(12px, 4vw, 23px) !important;
    line-height: 1.5;
    
    text-align: left;
}
@media (min-width: 768px) and (max-width: 1348px) {
    .reccomend__h3 {
    
	  font-size: clamp(18px, 5vw, 22px) !important; 

        /* 💡 変な改行を防ぐための追加のおすすめ設定 */
        word-break: keep-all; /* 単語の途中で不自然に改行されるのを防ぐ */
        overflow-wrap: anywhere; /* 枠からはみ出しそうな時だけ改行する */
    }
}
/* 画面幅425px以下のスマートフォンサイズのみ適用 */
@media (max-width: 766px) {
    .reccomend__h3 {
        margin: 0; /* margin: 0 auto; の中央寄せを解除して左の隙間をなくす */
        white-space: nowrap; /* テキストを改行させず1行にする */
		font-size: clamp(18px, 5vw, 22px) !important;
    }
    
    /* もしHTML内に <br>タグ があって改行されている場合は、これで改行を無効化します */
    .reccomend__h3 br {
        display: none; 
    }
}

.redColor {
	color: red;
	font-size: 0.8rem;
}

/* @media (min-width: 768px) and (max-width: 1400px) {
	.main__boxWrap {
		display: block;
		background-color: rgba(0, 0, 0, 0.6);
		background-image: url(../../images/2025/2ks_moshi_pc.png);
		background-repeat: no-repeat;
		background-position: right 0px bottom 0px;
		background-size: contain;
		padding: 10px 10px;
		max-width: 768px;
		margin: 0 auto;
		height: 400px;
		box-sizing: border-box;
		position: relative;
	}
	.h1__reiwa7 {
		display: block;
		background: rgba(100, 100, 0, 0.8);
		color: var(--color__white);
		width: fit-content;
		font-size: 18px;
		padding: 2px 10px;
		font-weight: 500;
	}
	.h1__2ks {
		display: block;
		background: rgba(255, 255, 255, 0.8);
		color: var(--textColor__black);
		width: fit-content;
		font-size: 24px;
		letter-spacing: 4px;
		padding: 2px 20px 5px;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 0px;
	}
	h1 {
		display: block;
		width: fit-content;
		padding: 0px 10px;
		margin: 0px 0 0 0px;
		width: 400px;
		height: 180px;
		font-size: 0;
		text-align: center;
		box-sizing: border-box;
		letter-spacing: 0.2rem;
		border-radius: 0px;
		backdrop-filter: blur(3px);
		background-color: rgba(255, 255, 190, 0.1);
		box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
		border: 2px rgba(255, 255, 255, 0.4) solid;
		border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
		border-right: 2px rgba(40, 40, 40, 0.35) solid;
	}
	.h1__shiken {
		background-color: var(--color__yellow);
		color: var(--textColor__black);
		padding: 2px 20px;
		font-size: 12px;
		width: fit-content;
		padding: 2px 20px 5px;
		font-weight: 500;
		line-height: 1;
	}
	.h1__dlsurvice {
		display: block;
		background-color: var(--textColor__black);
		border: solid 2px white;
		color: var(--color__white);
		font-size: clamp(16px, 6vw, 22px);
		font-weight: 500;
		line-height: 250%;
		border-radius: 100%;
		height: 65px;
		width: 65px;
		text-align: center;
		padding-left: 1%;
		box-sizing: border-box;
	}
	.h1__kyozai {
		display: block;
		color: var(--color__white);
		font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
		padding: 5px 20px;
		font-size: 22px;
		line-height: 1.2;
	}
	.topimg__ashirai {
		display: block;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.8);
		color: var(--color__orange);
		right: 20px;
		top: 50px;
		width: fit-content;
		height: 2rem;
		line-height: 2rem;
		padding: 20px 40px;
		font-size: 16px;
		font-family: "Times New Roman", Times, serif;
	}
	.color-white {
		color: var(--color__white);
		margin: 20px 0 18px;
	}

	.cvBtn__copyMail {
		display: block;
		color: var(--color__white);
		font-size: 15px;
		font-weight: 300;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	.cvBtn {
		display: block;
		text-align: center;
		margin: 5px 0 0 0;
		padding-top: 0px;
		height: auto;
		width: 320px;
		overflow: hidden;
	}
	.position__cvbtn {
		margin: 0 auto 0;
		width: 80%;
	}
	.button__box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		 font-size: 16px; 
		z-index: 1;
		top: 3%;
		left: 0.8%;
		width: 98.4%;
		height: 94%;
		color: rgba(255, 255, 255, 0.9);
		letter-spacing: 2px;
		background: rgb(255, 255, 255);
		background: linear-gradient(
			120deg,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0) 50%
		);
		transition: all 1s ease;
	}
} */
@media (max-width: 767px) {

	.main__boxWrap {
		display: flex;
		flex-direction: column;
		background-color: rgba(0, 0, 0, 0.6);
		background-image: url(../../images/2025/2ks_moshi_pc.png);
		background-repeat: no-repeat;
		background-position: right 0px bottom 0px;
		background-size: 250px;
		padding: 10px 10px;
		max-width: 768px;
		margin: 0 auto;
		height: 580px;
		box-sizing: border-box;
		position: relative;
	}
	.h1__reiwa7 {
		display: block;
		background: rgba(100, 100, 0, 0.8);
		color: var(--color__white);
		width: fit-content;
		font-size: 18px;
		padding: 2px 10px;
		font-weight: 500;
	}
	.h1__2ks {
		display: block;
		background: rgba(255, 255, 255, 0.8);
		color: var(--textColor__black);
		width: fit-content;
		font-size: clamp(13px, 5vw, 24px);
		letter-spacing: 4px;
		padding: 2px 20px 5px;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 0px;
		margin: 0 auto;
	}
	/* h1 {
		display: block;
		width: fit-content;
		padding: 0px 10px;
		margin: 0px 0 0 0px;
		width: auto;
		height: auto;
		font-size: 0;
		text-align: center;
		box-sizing: border-box;
		letter-spacing: 0.2rem;
		border-radius: 0px;
		backdrop-filter: blur(3px);
		background-color: rgba(255, 255, 190, 0.1);
		box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
		border: 2px rgba(255, 255, 255, 0.4) solid;
		border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
		border-right: 2px rgba(40, 40, 40, 0.35) solid;
	} */
	.h1__shiken {
		background-color: var(--color__yellow);
		color: var(--textColor__black);
		font-size: 10px;
		width: fit-content;
		padding: 2px 5px 2px;
		font-weight: 500;
		line-height: 1;
	}
	.h1__dlsurvice {
		display: block;
		background-color: var(--textColor__black);
		border: solid 2px white;
		color: var(--color__white);
		font-size: clamp(12px, 4vw, 16px);
		font-weight: 500;
		line-height: 45px;
		border-radius: 100%;
		height: 50px;
		width: 50px;
		text-align: center;
		padding-left: 1%;
		box-sizing: border-box;
	}
	.h1__kyozai {
		display: block;
		color: var(--color__white);
		font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
		padding: 5px 10px;
		font-size: clamp(21px, 4vw, 28px);
		line-height: 1.2;
	}
	.topimg__ashirai {
		display: block;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.8);
		color: var(--color__orange);
		right: 170px;
		top: auto;
		bottom: 50px;
		width: fit-content;
		height: 2rem;
		line-height: 2rem;
		padding: 10px;
		font-size: clamp(12px, 4vw, 16px);
		font-family: "Times New Roman", Times, serif;
	}
	.color-white {
		color: var(--color__white);
		margin: 18px 0 8px;
	}

	.cvBtn__copyMail {
		display: block;
		color: var(--color__white);
		font-size: 15px;
		font-weight: 300;
		line-height: 1.2;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.cvBtn {
		display: block;
		text-align: center;
		margin: 5px 0 0 0;
		padding-top: 0px;
		height: auto;
		width: auto;
		overflow: hidden;
	}
	.position__cvbtn {
		margin: 0 auto 0;
	}
	.button__box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		font-size: 26px;
		z-index: 1;
		top: 3%;
		left: 0.8%;
		width: 98.4%;
		height: 94%;
		color: rgba(255, 255, 255, 0.9);
		letter-spacing: 2px;
		background: rgb(255, 255, 255);
		background: linear-gradient(
			120deg,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0) 50%
		);
		transition: all 1s ease;
	}
	.h1__1zi2ziwrap {
		display: block;
		height: auto;
		margin-top: 14px;
	}
	.h1__taisakukyozai {
		color: var(--color__white);
		padding: 0px 10px;
		font-size: 12px;
	}
	.h1__flex {
		display: flex;
		flex-direction: column-reverse;
		margin: auto 0;
		align-items: center;
	}
	.nav__text {
		margin-top: 50px;
		border-top: 1px solid var(--color__white);
		padding-top: 10px;
		width: 80%;
		margin: 0 auto;
		font-size: clamp(12px, 3vw, 16px);
	}
	.text {
		display: block;
		font-size: clamp(16px, 6vw, 26px);
		text-align: center;
	}
	.slider__item {
		margin: 0;
	}
	
    .box--mini {
        background: var(--color__navy);
        color: var(--color__white);
        padding: 10px;
            font-size: clamp(12px, 4vw, 18px);
        height: 10px;
        line-height: 18px;
        
        /* === 変更・追加箇所 === */
        
        /* 1. 長さを短くする（どちらかを選択） */
        flex-basis: auto;      /* 中の文字数に合わせる場合 */
        /* flex-basis: 100px;  数値を指定して短くする場合 */
        
        width: fit-content;    /* 文字数に合わせる場合の補助 */
        
        /* 2. 左詰めにする */
        margin-right: auto;    /* 親要素がFlexboxの場合、右側に余白を作って強制的に左に寄せる */
		transform: translateY(13px);
    }
}
	h3 {
		margin-top: 0;
	}
	h2 {
		display: block;
		margin: 0 auto 25px;
		width: fit-content;
		font-size: clamp(12px, 5vw, 1.7rem);
		line-height: 1.5;
		font-family: serif;
	}
	.bg--text {
		background-color: #ececec;
		opacity: 1;
		background-image: linear-gradient(135deg, #e1e1e1 25%, transparent 25%),
			linear-gradient(225deg, #e1e1e1 25%, transparent 25%),
			linear-gradient(45deg, #e1e1e1 25%, transparent 25%),
			linear-gradient(315deg, #e1e1e1 25%, #ececec 25%);
		background-position: 7px 0, 7px 0, 0 0, 0 0;
		background-size: 7px 7px;
		background-repeat: repeat;
		padding: 50px 13px 40px;
	}

@media (max-width: 425px) {
	.main_box {
		width: auto;
		margin: 0 10px;
		padding: 40px 8px;
	}

	.text_small {
		margin: 24px 8px;
	}
}

h1 {
	position:relative;
	
}
.fv_btn{
	display: block;
	position: absolute;
	bottom:5%;
	right:10%;
	width: 30vw;
	font-family: sans-serif;
}
.fv__button__box{
	font-size:2vw;
}
.fv-container {
    position: relative; /* ここをボタン配置の新しい基準にする */
}
@media (max-width: 767px) {
	.fv_btn{
	display: block;
	position: absolute;
	bottom:5%;
	left:50%;
	transform: translateX(-50%);
	width: 80vw;
	min-width: none;
	font-family: sans-serif;
}
	.fv__button__box{
	font-size:4.5vw;
}

}

body {
    font-family: sans-serif;
}

/* フォーム部品やボタンにも、bodyと同じフォントを強制的に引き継がせる */
input, button, textarea, select {
    font-family: inherit;
}