@charset "utf-8";

/* ---------------------------------------------
CSS Info

 File name:  top.css
 Style Info: TOPページ用レイアウト

～414px　スマホ基本
415px～959px　スマホ横
835px〜　iPhone XR 横
-----メジャーブレークポイント-----
960px～　PC
1366px～　大画面PC
------------------------------------------------ */


/* MV
------------------------------------------------ */
.idx-hero {
	position: relative;
	height: 264px;
}
.idx-hero:before {
	position: absolute;
	content: "";
	width: 90vw;
	height: 100%;
	top: 0;
	left: 0;
	background: #d8eefd;
}
.idx-hero-inr {
	position: relative;
	overflow: hidden;
}
.idx-hero-inr:before {
	position: absolute;
	content: "";
	width: 240px;
	height: 120px;
	background: url("../img/common/donut-half_yl.png") no-repeat;
	background-size: 240px 120px;
	left: -40px;
	top: 0;
	z-index: 2;
}
.idx-hero:after {
	position: absolute;
	content: "";
	width: 240px;
	height: 240px;
	left: 5vw;
	bottom: -120px;
	background: url("../img/common/donut_bl.png") no-repeat;
	background-size: 240px;
	z-index: 2;
}
.idx-hero--pic {
	position: relative;
	width: 85%;
	height: 240px;
	margin-left: 15%;
	background-color: #CCC;
	background-image: url("../img/top/mv_sp.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: cover;
	z-index: 1;
}
.idx-hero--copy {
	position: absolute;
	left: 3%;
	bottom: 24px;
	z-index: 3;
}
.idx-hero--copy img {
	width: 280px;
	height: auto;
}
.idx-hero--copy__name {
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: -2px -2px 0 #fff,
   2px -2px 0 #fff,
  -2px  2px 0 #fff,
   2px  2px 0 #fff,
  -2px  0    0 #fff,
   2px  0    0 #fff,
   0   -2px  0 #fff,
   0    2px  0 #fff;
}

.idx-hero--copy__name span {
    font-size: 0.85em;
    margin-right: 0.5em;
}

.idx-hero--copy__txt > span {
    font-size: 3.4rem;
    font-weight: 900;
    display: table;
    background: #fff;
    padding: 0 .5em 0 0.95em;
    border-radius: 0.15em;
    margin-bottom: 0.2em;
    letter-spacing: -1px;
}

.idx-hero--copy__txt span.blue {
    color: #078ac3;
}

@media screen and (max-width:767px) {
	.idx-hero--copy{
		bottom: 0;
	}
	.idx-hero--copy__txt > span {
    font-size: 2.1rem;
    margin-bottom: 0.3em;
}

.idx-hero--copy__name {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}
}
@media screen and (min-width:835px) {
	.idx-hero {height: 520px;}
	.idx-hero-inr:before {
		width: 480px;
		height: 240px;
		background-size: 480px 240px;
		left: -80px;
	}
	.idx-hero:after {
		width: 480px;
		height: 480px;
		left: 10vw;
		bottom: -240px;
		background-size: 480px;
	}
	.idx-hero--pic {
		position: relative;
		width: 75%;
		height: 480px;
		margin-left: 25%;
		background-image: url("../img/top/mv.jpg");
		background-position: left top;
		background-size: cover;
		z-index: 1;
	}

	.idx-hero--copy {
		position: absolute;
		left: 15%;
		top: calc(50% - 117px);
		z-index: 3;
	}
	.idx-hero--copy img {
		width: 600px;
		height: auto;
	}
	
}
@media screen and (min-width:1366px) {
	.idx-hero {height: 680px;}
	.idx-hero-inr:before {
		width: 640px;
		height: 320px;
		left: -120px;
	}
	.idx-hero:after {
		width: 640px;
		height: 640px;
		bottom: -320px;
		background-size: auto;
	}
	.idx-hero--pic {height: 640px;}
	.idx-hero--copy {
		top: calc(50% - 130px);
	}
	.idx-hero--copy img {width: auto;}
	.idx-hero--copy__txt > span {
    font-size: 3.8rem;
    margin-bottom: 0.3em;
}

.idx-hero--copy__name {
    font-size: 1.4em;
    margin-bottom: 0.4em;
}
}


/* ピックアップ
------------------------------------------------ */
.idx-pikcup {
	padding: 24px 0;
	z-index: 3;
}
.idx-picup--ttl {
	text-align: center;
	line-height: 1;
}
.idx-picup--ttl span {
	position: relative;
	padding-left: 32px;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
}
.idx-picup--ttl span:before {
	position: absolute;
	content: "";
	width: 24px;
	height: 24px;
	left: 0;
	top: 50%;
	margin-top: -12px;
	background: url("../img/common/idx-picup.png") no-repeat;
	background-size: 24px;
}
.idx-pikcup-box a {color: #010101;}
.idx-pikcup-box .idx-pikcup--thumb {
	border-radius: 8px;
	background-color: #fafafa;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.idx-pikcup-box .idx-pikcup--thumb:before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.idx-pikcup-box a:hover .idx-pikcup--thumb {opacity: .75;}
.idx-pikcup--desc .ttl {
	margin-bottom: .75em;
	font-weight: bold;
}
.idx-pikcup-box a:hover .idx-pikcup--desc {color: #999;}
.idx-pikcup--btn {
	margin-top: 1.5em;
	text-align: center;
}
.idx-pikcup--btn span {
	display: inline-block;
	height: 40px;
	line-height: 38px;
	padding: 0 1.5em;
	background: #FFF;
	border: 2px solid #0a73bb;
	border-radius: 20px;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #0a73bb;
	text-align: center;
}
.idx-pikcup--btn span:after {
	margin-left: .5em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f138";
}
.idx-pikcup-box a:hover .idx-pikcup--btn span {
	background: #0a73bb;
	color: #FFF;
}
.idx-pikcup-box .idx-pikcup--thumb,
.idx-pikcup--desc,
.idx-pikcup--btn span {
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
.idx-pikcup-banner-wrap {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4%;
}
.idx-banner-box {
	text-align: center;
	margin: 40px auto;
}
.idx-banner-box-flex {
	display: grid;
    grid-template-columns: 56% 42%;
    gap: 2%;
}
.idx-banner-box__txt {
    text-align: left;
}
.idx-banner-box__txt .linktxt {
    text-align: right;
    margin: 1em 0 0;
    color: #f2542d;
	display: block;
}

.idx-banner-box a img {
	width: 100%;
	max-width: 614px;
}

@media screen and (max-width:834px) {
	.idx-pikcup-box {margin: 24px 24px 0;}
	.idx-pikcup-box a {display: block;}
	.idx-pikcup-box .idx-pikcup--thumb {margin-bottom: 16px;}
	.idx-pikcup--desc .txt {
		font-size: 14px;
		font-size: 1.4rem;
	}

	.idx-pikcup-banner-wrap {
		grid-template-columns: 1fr;
	}

	.idx-banner-box-flex {
		grid-template-columns: 1fr;
	}

	.idx-banner-box a img {
		width: 90%;
	}
}
@media screen and (min-width:835px) {
	.idx-pikcup {padding: 64px 0;}
	.idx-picup--ttl span {
		padding-left: 56px;
		font-size: 40px;
		font-size: 4rem;
	}
	.idx-picup--ttl span:before {
		width: 48px;
		height: 48px;
		margin-top: -24px;
		background-size: 48px;
	}
	.idx-pikcup-box {margin-top: 48px;}
	.idx-pikcup-box a {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}
	.idx-pikcup-box .idx-pikcup--thumb {
		width: 40%;
		margin-right: 40px;
	}
	.idx-pikcup-box .idx-pikcup--desc {flex: 1;}
	.idx-pikcup--desc .ttl {
		font-size: 24px;
		font-size: 2.4rem;
	}
	.idx-pikcup--btn {text-align: right;}
}


/* SEC.1 メッセージ
------------------------------------------------ */
.idx-msg {
	background: #FFF;
	background: #d8eefd url("../img/common/bg-circle_multi.png") no-repeat center;
	background-size: cover;
}
.idx-msg-inr {
	position: relative;
	z-index: 3;
}
.idx-msg--txt {
	font-weight: bold;
	line-height: 2;
}

@media screen and (max-width:834px) {
	.idx-msg--txt {
		font-size: 14px;
		font-size: 1.4rem;
	}
}
@media screen and (min-width:835px) {
	.idx-msg--txt {text-align: center;}
}


/* SEC.2 所長メッセージ
------------------------------------------------ */
.idx-manager {
	position: relative;
	background: #f3f3f3 url("../img/common/bg-dot_ss.png");
}
.idx-manager:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 320px;
	top: 0;
	background: #0a73bb;
}
.idx-manager-box {
	position: relative;
	overflow: hidden;
	margin-bottom: 24px;
	padding-top: calc(140px + 24px);
}
.idx-manager-box:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 140px;
	top: 0;
	background: url("../img/top/bg-idx-manager.png?20250731") no-repeat center top;
	background-size: auto 140px;
}
.idx-manager--thumb {
	position: relative;
	width: 144px;
}
.idx-manager--thumb img {
	position: relative;
	border: 1px solid #4692c6;
	border-radius: 50%;
	z-index: 2;
}
.idx-manager--thumb:before {
	position: absolute;
	content: "";
	top: 0px;
	left: 4px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #4692c6;
}
.idx-manager--desc .name {
	margin-top: 1em;
	text-align: right;
}
.idx-manager--desc .name span {
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
}

@media screen and (max-width:959px) {
	.idx-manager--thumb {margin: 0 auto 24px;}
	.idx-manager .cm-btn {
		width: 94%;
		margin: 0 auto;
	}
}
@media screen and (min-width:960px) {
	.idx-manager-box {
		padding-top: calc(174px + 64px);
		margin-bottom: 32px;
	}
	.idx-manager-box:before {
		height: 174px;
		background-size: auto 174px;
	}
	.idx-manager-box_inr {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.idx-manager--thumb {
		width: 240px;
		margin-right: 40px;
	}
	.idx-manager--desc {flex: 1;}
}
@media screen and (min-width:1366px) {
	.idx-manager-box {padding-top: calc(304px + 64px);}
	.idx-manager-box:before {
		height: 304px;
		background-size: auto 304px;
	}
}


/* SEC.3 ターゲット
------------------------------------------------ */
.idx-target:before {
	position: absolute;
	content: "";
	width: 240px;
	height: 120px;
	background: url("../img/common/donut-half_yl.png") no-repeat;
	background-size: 240px 120px;
	top: 0;
	right: 0;
}
.idx-target:after {
	position: absolute;
	content: "";
	width: 240px;
	height: 240px;
	left: 0;
	bottom: 80px;
	background: url("../img/common/donut_bl.png") no-repeat;
	background-size: 240px;
	z-index: 1;
}
.idx-target-inr {
	position: relative;
	z-index: 2;
}
.idx-target-box {margin-top: 80px;}
.idx-target-item {
	position: relative;
	padding: 72px 16px 16px;
	border: 2px solid #0a73bb;
	border-radius: 8px;
}
.idx-target-item .thumb {
	position: absolute;
	width: 120px;
	height: 120px;
	top: -60px;
	left: calc(50% - 60px);
}
.idx-target-item .thumb img {
	border-radius: 50%;
	border: 2px solid #0a73bb;
}
.idx-target-item .desc .ttl {
	margin-bottom: .5em;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	color: #0a73bb;
}
.idx-target-item .desc .name {
	margin-top: .5em;
	text-align: right;
	color: #4692c6;
}
.idx-target--catch {
	position: relative;
	margin: 24px 0 40px;
	padding-top: 104px;
	font-weight: bold;
	text-align: center;
}
.idx-target--catch:before {
	position: absolute;
	content: "";
	width: 120px;
	height: 80px;
	top: 0;
	left: calc(50% - 60px);
	background: url("../img/top/arw-idx-target.png") no-repeat;
	background-size: 120px 80px;
}
.idx-target--catch .txt1 {
	font-size: 17px;
	font-size: 1.7rem;
}
.idx-target--catch .txt2 {
	font-size: 20px;
	font-size: 2rem;
}

@media screen and (max-width:320px) {
	.idx-target--catch .txt1 {
		font-size: 15px;
		font-size: 1.5rem;
	}
	.idx-target--catch .txt2 {
		font-size: 18px;
		font-size: 1.8rem;
	}
}
@media screen and (max-width:959px) {
	.idx-target-item:not(:last-of-type) {margin-bottom: 80px;}
}
@media screen and (min-width:768px) {
	.idx-target:before {
		width: 480px;
		height: 240px;
		background-size:480px 240px;
	}
	.idx-target:after {
		width: 480px;
		height: 480px;
		background-size: 480px;
	}
}
@media screen and (min-width:960px) {
	.idx-target:before {
		width: 640px;
		height: 320px;
		background-size: auto;
	}
	.idx-target:after {
		width: 640px;
		height: 640px;
		background-size: auto;
	}
	.idx-target-box {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
	}
	.idx-target-item {
		width: calc(25% - 48px / 4);
		padding: 72px 24px 24px;
	}
	.idx-target-item::last-of-type {margin-right: 0;}
	.idx-target--catch {margin: 48px 0 64px;}
	.idx-target--catch .txt1 {
		font-size: 32px;
		font-size: 3.2rem;
	}
	.idx-target--catch .txt2 {
		font-size: 40px;
		font-size: 4rem;
	}
}


/* SEC.4 8つの安心
------------------------------------------------ */
.idx-point {
	background-color: #d8eefd;
	background-image: url("../img/common/bg-donut.png");
	background-repeat: no-repeat;
	background-position: center;
}
.idx-point-inr:before,
.idx-point-inr:after {
	position: absolute;
	content: "";
	z-index: 1;
}
.idx-point-inr:before {
	top: 0;
	right: 0;
	width: 60px;
	height: 45px;
	background: url("../img/common/point-colorful-dot01.png") no-repeat left top;
	background-size: 60px 45px;
}
.idx-point-inr:after {
	top: 40px;
	left: 0;
	width: 45px;
	height: 60px;
	background: url("../img/common/point-colorful-dot02.png") no-repeat left top;
	background-size: 45px 60px;
}
.idx-point-box {
	position: relative;
	z-index: 2;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
}
.idx-point-item {
	background: #FFF;
	border-radius: 8px;
}
.idx-point-item .thumb img {
	border-radius: 8px 8px 0 0;
	vertical-align: bottom;
}
.idx-point-item .desc {
	position: relative;
	padding: 24px 16px 24px;
}
.idx-point-item .desc .label {
	position: absolute;
	width: 80px;
	height: 32px;
	line-height: 32px;
	border-radius: 16px;
	top: -16px;
	left: calc(50% - 40px);
	background: #0a73bb;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}
.idx-point-item .desc .txt {font-weight: bold;}

@media screen and (max-width:320px) {
	.idx-point-item .desc {padding: 24px 8px 24px;}
}
@media screen and (max-width:834px) {
	.idx-point-item {
		width: calc(50% - 16px / 2);
		margin-bottom: 16px;
	}
	.idx-point-item:nth-of-type(even) {margin-right: 0;}
	.idx-point-item .desc .txt br {display: none;}
}
@media screen and (min-width:835px) {
	.idx-point-inr:before {
		top: 0;
		right: 0;
		width: 120px;
		height: 90px;
		background-size: auto;
	}
	.idx-point-inr:after {
		top: 56px;
		width: 90px;
		height: 120px;
		background-size: auto;
	}
	.idx-point-item {
		width: calc(25% - 72px / 4);
		margin-bottom: 24px;
	}
	.idx-point-item:not(:nth-of-type(4n)){margin-right: 0;}
	.idx-point-item .desc {padding: 32px 16px 24px;}
	.idx-point-item .desc .label {
		width: 96px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		top: -20px;
		left: calc(50% - 48px);
		font-size: 20px;
		font-size: 2rem;
	}
	.idx-point-item .desc .txt {
		font-size: 20px;
		font-size: 2rem;
		text-align: center;
	}
}


/* SEC.5 資格に強い
------------------------------------------------ */
.idx-feature {
	background-color: #0072ae;
	background-image: url("../img/top/bg-idx-feature.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.idx-feature--txt {
	margin-bottom: 2em;
	font-weight: bold;
	color: #FFF;
}

@media screen and (min-width:835px) {
	.idx-feature--txt {
		font-size: 20px;
		font-size: 2rem;
	}
}