@charset "UTF-8";
/*===============================================================
	shiftkey - static - style
	https://www.shiftkey.jp/
===============================================================*/
/* base
===============================================================*/
body{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
}
a{color: #000;}
.inner{
	background-color: #f2ece1;
	width: 100%;
}
.fl{
	display: flex;
	align-items: center;
}
.fl-sb{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fl-c{
	display: flex;
	align-items: center;
	justify-content: center;
}
.fontBold{
	font-weight: bold;
}
/* current */
a.current-nav {
	color: #e60012;
	display: block;
    padding: 30px 0;
	position: relative;
}
a.current-nav::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 6px;
	background: #e60012;
}
/* やじるし */
.arrow {
	position: relative;
	display: inline-block;
	padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
	padding-left: 1em;
}
.arrow::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: solid 2px #e60012;
	border-right: solid 2px  #e60012;
	position: absolute;
	left: 10px;
	top: 8px;
}
.arrow.arrow-top::after {
	transform: rotate(-45deg);
	top: 10px;
}
.arrow.arrow-bottom::after {
	transform: rotate(135deg);
}
.arrow.arrow-left::after {
	transform: rotate(-135deg);
}
.arrow.arrow-right::after {
	transform: rotate(45deg);
}

/* header
===================================*/
header{
	font-size: 1.6rem;
	width: 100%;
	padding: 20px 30px 0;
	min-height: 165px;
}
/* ロゴ */

.logoL{
	display: block;
	width: 100%;
	max-width: 250px;
}
.logoR{
	display: block;
	width: 100%;
	max-width: 160px;
}
.h-dami{
	display: none;
}
/* ナビ */

.nav-box nav ul li{
	margin-right: 30px;
}
.nav-box nav ul li a:not(.current-nav):hover{
	opacity: 0.5;
}
.nav-box{
	padding-top: 10px;
}

#sp-trigger{
	display: none;
}

/* --------フォントサイズ---------- */

/* #fontChange{
	margin-right: 45px;
} */
#fontChange p{
	margin-right: 20px;
}
ul.headChange{
	display: flex;
	justify-content: space-between;
	align-items: flex-end !important;
}
ul.headChange li{
	background-color: #f5f5f5;
	/* margin: 0 5px; */
}
/* 中 */
ul.headChange li.middle span {
    cursor: pointer;
    width: 73px;
    height: 32px;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 大 */

ul.headChange li.large span{
	cursor: pointer;
    width: 73px;
    height: 32px;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#sp-trig span.open,#sp-trig.open span.close{
	display: none;
}
#sp-trig span.close,#sp-trig.open span.open{
	display: block;
}
#sp-nav-box, #sp-trig {
	display: none;
}
@media (max-width: 1190px) {
	#fontChange{
		margin-right: 1rem;
	}
	#fontChange p {
		margin-right: 1rem;
	}
	nav ul li {
		margin-right: 1.5rem;
	}
}
/* SNS */
ul.share li {
	width: 33%;
    max-width: 28px;
    height: 28px;
    margin: 0 6px;
}
ul.headChange li.current{
	background-color: #282828;
	color: #fff;
}



/* フッター ******************************************************************/
#banner{
	padding-top: 8rem;
	border-bottom: 1px solid #bbb;
}
.banner-wrapper{
	max-width: 1080px;
    margin: 0 auto;
    padding: 0 10%;
}
.inner-img-box{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.banner-img{
	width: 32%;
    text-align: center;
    margin-bottom: 30px;
}
footer{
	border-top: 1px solid #bbb;
	padding-bottom: 2rem;
	font-size: 1.4rem;
    font-style: normal;
    font-weight: bold;
	padding-top: 8rem;
}
.footer-note{
	line-height: 1.5;
}
.footer-box{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 2rem;
}
.footer-logo-text-box{
	display: flex;
	align-items: center;
}
.footer-logo-left,.footer-logo-right{
	width: 100%;
	max-width: 13rem;
	margin-right: 2rem;
}
.centerbox p{
	margin-left: 2rem;
	line-height: 2.2rem;
}
span.footer-tel{
	color: #0072cf;
}
.footer-nav-flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-start !important;
}
.footer-nav-flex li:first-child{
	margin-right: 3rem;
}
.footer-nav-box ul li a{
	font-size: 1.1rem;
    line-height: 2rem;
    padding-left: 13px;
}
.footer-arrow {
	position: relative;
	display: inline-block;
	padding-top: 10px;
}
.footer-arrow::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: solid 2px #32C2ED;
	border-right: solid 2px  #32C2ED;
	position: absolute;
	left: -6px;
	top: 16px;
	transform: rotate(45deg);
}
small{
	display: block;
	text-align: center;
    padding: 7rem 0 2rem;
	font-size: 1.4rem;
}
/* footer
===============================================================*/
#page-top{
	bottom: 3rem;
	color: #202020;
	height: 7rem;
	line-height: 9rem;
	position: fixed;
	right: 1rem;
	text-align: center;
	width: 7rem;
	z-index: 10;
}
@media (max-width: 540px) {
	#page-top{bottom: .4rem; right: .4rem; transform: scale(.8);}
}
#page-top a{
	border-radius: 50%;
	background: #fff;
	color: #202020;
	display: block;
	height: 100%;
	width: 100%;
	box-shadow: 0 5px 3px rgba(0,0,0,0.1);
}
#page-top a span{
	display: block;
    position: relative;
    top: -1rem;
}
.page-top-arrow {
	position: relative;
	display: inline-block;
	padding: 1rem;
}

.page-top-arrow::before {
	content: '';
	width: 1rem;
	height: 1rem;
	border-top: solid 2px #202020;
	border-right: solid 2px  #202020;
	position: absolute;
	left: 50%;
	margin-left: -.5rem;
    top: 2.3rem;
	transform: rotate(-45deg);
}
#page-top a:hover{
	opacity: 1;
}
address{
	color: #eee;
	text-align: center;
}

@media (min-width: 1367px){
	.wrapper{
		width: 100%;
		margin: 0 auto;
		max-width: 1300px;
	}
    .breadcrumbs-box{
        max-width: 1300px;
        margin: 0;
        width: 100%;
    }
}
@media (max-width: 1366px) {
	/*  幅いっぱいに */
	.wrapper{
		margin: 0 5rem;
	}
}

/* タブレットレスポンシブ */
@media (max-width: 1024px) {

	header{ padding: 1rem;
			height: 80px;
			min-height: 80px;}
	h1{ max-width: 600px;}
	.h-dami{
		display: block;
		width: 60px;
		height: 60px;
		opacity: 0;}
	.logoL{ max-width: 250px;}
	/* ハンバーガー */
	#sp-trig{
		width: 70px;
		height: 70px;
		border-radius: 10px;
		background: #fff;
		padding: 1.5rem 1rem 0;
		margin: .5rem 1rem 0 0;
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		text-align: center;
		cursor: pointer;
		z-index: 900;
		box-shadow: 0 5px 3px rgba(0,0,0,0.1);
	}
	#sp-trig u{
		display: block;
		width: 100%;
		height: 3px;
		border-radius: 10px;
		margin: 8px auto;
		background: #000;
		transition: .5s all;
	}
	.open #sp-trig u:nth-child(1){
		transform: translateY(9px) rotate(-45deg);
	}
	.open #sp-trig u:nth-child(2){
		opacity: 0;
	}
	.open #sp-trig u:nth-child(3){
		transform: translateY(-9px) rotate(45deg);
	}
	#sp-trig span{color: #000; font-size: 13px; margin-top: 1rem}
	.nav-box{
		display: none;
	}
	#sp-nav-box{
		padding-top: 11rem;
		width: 100%;
		display: block;
		position: fixed;
		top: -100%;
		right: 0;
		background: #fff;
		opacity: 0;
		transition: .5s all;
		z-index: 899;
		-webkit-overflow-scrolling: touch;
		overflow: auto;
	}
	#sp-nav-box.open{
		opacity: 1;
		top: 0;
		z-index: 899;
	}
	ul.sp-nav{
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #000;
	}
	ul.sp-nav li{
		position: relative;
		border-top: 1px solid #000;
		padding: 3rem 0;
		width: 50%;
		margin: 0;
		text-align: center;
	}

	ul.sp-nav li a::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		pointer-events: auto;
		content: "";
		background-color: transparent;
	}
	/* ul.sp-nav li:nth-child(4),ul.sp-nav li:nth-child(5){
		border-bottom: 1px solid #000;
	} */
	ul.sp-nav li:nth-child(odd){
		border-right: 1px solid #000;
	}
	/* ul.sp-nav li:first-child{
		border-top: 1px solid #000;
		width: 100%;
	} */
	/* sp ナビゲーション */
	a.sp-current-nav{
		color: #e60012;
	}
	#sp-fontChange{
		padding: 3rem 0;
	}
	#sp-fontChange p{
		margin-right: 1.5rem;
	}
	#sp-share{
		padding-bottom: 3rem;
	}
	#sp-trig.open u:nth-child(1){
		transform: translateY(0) rotate(-45deg);
	}
	#sp-trig.open u:nth-child(2){
		transform: translateY(-10px) rotate(45deg);
	}
	 /* footer */
	.footer-box,.footer-logo-text-box{
		flex-direction: column;
		margin: 0 auto;
		min-height: 0%;
	}
	.footer-logo-box{
		min-height: 0%;
	}
	#f-copyright{margin: 2rem 0;}
	.footer-nav-box{margin: 0 auto;}
	small{padding: 4rem 0 2rem;}
}
@media (max-width: 960px) {
	.wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }

}

@media (max-width: 540px) {
	.pc-only{display: none;}
	.sp-only{display: block;}

/* ヘッダー */
	.logoL{max-width: 200px;}
	.logoR{max-width: 100px;}
	.h-dami{
        width: 60px;
        height: 60px;
        opacity: 0;
    }

	/* フッター */
.footer-nav-flex li:first-child { margin-right: 1rem;}
.banner-img:nth-child(3){ display: none;}
.footer-logo-left, .footer-logo-right { max-width: 10rem;margin-right: 0;}
.banner-img { width: 40%;}

footer{ padding-top: 4rem;}
}

@media (max-width: 400px){
	.logoL{max-width: 175px;}
    .logoR{max-width: 90px;}
}

@media (max-width: 370px){
	.logoL{max-width: 150px;}
    .logoR{max-width: 85px;}
}
/* 記事のラベル共通
===============================================================*/
.article-label{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    width: 8rem;
    height: 8rem;
    padding: 0.5rem 0.8rem;
    background-color: #004c81;
    font-family: 'Teko-font';
}
.article-label > i{
	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0.4rem 0 0rem;
    background-color: #fff;
    font-size: 2.5rem;
    color: #004c81;
}
.article-label > span {
    display: block;
    padding-top: 0.5rem;
    margin-top: 0.7rem;
    border-top: 1px solid #fff;
    font-size: 3.3rem;
    color: #fff;
    text-align: center;
    letter-spacing: .2rem;
}
@media (max-width: 600px) {
	.article-label{
		height: 6rem;
		width: 6rem;
		padding-top: 0.6rem;
		font-size: 2.5rem;
	}
	.article-label > i {
		padding: 0.3rem 0 0rem;
		font-size: 1.8rem !important;
	}
	.article-label > span {
		padding-top: 0.3rem;
		margin-top: 0.6rem;
		font-size: 2.4rem;
	}
}
/* データ共通部分
===============================================================*/
/* data a~d共通 */
/* パンくず */
.breadcrumbs-box{
	padding-bottom: 3rem;
	margin-left: 2.5rem;
    z-index: 10;
}
li.breadcrumbs-item{
	display: inline-block;
}
a.breadcrumbs-link{
	color: #fff;
	font-size: 1.4rem;
}
.breadcrumbs-name{
	background-color:  #202020;
	padding: 0.5rem;
}
.breadcrumbs-arrow {
	position: relative;
	display: inline-block;
	padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
	padding-left: 1em;
	transform: rotate(45deg);
}
.breadcrumbs-arrow::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: solid 2px #fff;
	border-right: solid 2px  #fff;
	position: absolute;
	left: 10px;
	top: 8px;
}
.data .inner{
    padding: 8rem 0;
}

/*追加20250125*/
.point .inner{
    padding: 4rem 0 8rem 0;
}
/*追加20250125end*/

.data-mv .breadcrumbs-box {
    padding-bottom: 3rem;
    margin-left: 2.5rem;
    z-index: 10;
    position: absolute;
    margin-top: 4rem;
}
@media (max-width: 768px) {
	/* パンくずリスト */
	.breadcrumbs-box{top: 0;font-size: 1.4rem;}
	.breadcrumbs-name{padding: 0.2rem;}
}
@media (max-width: 540px){
    .data .inner{padding: 4rem 0;}
    .breadcrumbs-box{ display: none;}
}

/*追加20250125*/
@media (max-width: 540px){
    .point .inner{padding: 4rem 0;}
    .breadcrumbs-box{ display: none;}
}
/*追加20250125end*/
/* MV */
.article-mv{
    position: relative;
}
.article-mv figure{
    background-color: #f1f1f1;
}
.article-mv figure img{
    width: 100%;
    height: 70vh;
    object-fit: contain;
	font-family: 'object-fit: contain;'; /*IE対策*/
}
.article-mv figure.data-MV img{
    object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
}
@media (max-width: 768px){
	.article-mv figure.data-MV img{
		object-fit: contain;
		font-family: 'object-fit: contain;'; /*IE対策*/
	}
}
.dataMV-titleBox{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.dataMV-titleBox p{
    max-width: 300px;
}
.dataMV-titleBox p a{
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.356));
}

/* データ */
.data-Lead{
	font-size: 1.8rem;
	margin-bottom: 8rem;
}
.dataPage{ display: flex;}

.dataSide{ width: 14%; height: auto;}
.dataMenu{
    position:sticky;
    position: -webkit-sticky; /* Safari */
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
}
.dataMenu li{
    border: 4px solid #4869ab;
    background: #4869ab;
}
.dataMenu li.data-b{
    border: 4px solid #26a9bd;
    background: #26a9bd;
}
.dataMenu li.data-c{
    border: 4px solid #9863b6;
    background: #9863b6;
}
.dataMenu li.data-d{
    border: 4px solid #dc596b;
    background: #dc596b;
}
.dataMenu li{
    width: 100%;
    cursor: pointer;
    text-align: center;
    border: 4px solid #4869ab;
    border-right: 0 !important;
    background: #4869ab;
    color: #fff;
    border-radius: 6px 0 0 6px;
    transition: .3s all;
    margin-bottom: 6px;
    margin-left: 10px;
}

.dataMenu li h2{
    padding-left:0.5em;
    padding-right:0.5em;
    height:80px;
    display: flex;
    align-items: center;
}
.dataMenu li h2 a{
    color: #fff;
    display: flex;
    height: 100%;
	width: 100%;
    align-items: center;
    justify-content: center;
}
.dataMenu li:not(.current):hover{ opacity: 0.7;}

/* current */
.dataMenu li.current{
    background: #fff;
    color: #4869ab;
    transition: .3s all;
    margin-left:0;
}
.dataMenu li.data-b.current{ color: #26a9bd !important;}
.dataMenu li.data-c.current{ color: #9863b6 !important;}
.dataMenu li.data-d.current{ color: #dc596b !important;}
.dataMenu li.current h2{
    border-right: 6px solid #fff;
    z-index: 1;
    margin-right: -6px;
    cursor: auto;
    font-weight: bold;
	position: relative;
}
.dataMenu li.current h2 a{ color: #4869ab;}
.dataMenu li.data-b.current h2 a{ color: #26a9bd;}
.dataMenu li.data-c.current h2 a{ color: #9863b6;}
.dataMenu li.data-d.current h2 a{ color: #dc596b;}
.dataContent{
    width: 86%;
    border: 4px solid #4869ab;
    border-style: solid;
    border-radius: 0 6px 6px 6px;
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}
.dataContent.data-b{ border: 4px solid #26a9bd;}
.dataContent.data-c{ border: 4px solid #9863b6;}
.dataContent.data-d{ border: 4px solid #dc596b;}

@media (max-width: 768px) {
	.article-mv figure img{ height: auto;}
	.dataMenu li h2 {line-height: 1.5;padding-left: 0;padding-right: 0;}
    .dataMenu li h2 {font-size: 1.2rem; padding: 0; }
}

@media (max-width: 540px){
    .dataMenu li { border: 3px solid #4869ab;margin-left: 5px;}
    .dataMenu li { border: 3px solid #4869ab;}
    .dataMenu li.data-b { border: 3px solid #26a9bd;}
    .dataMenu li.data-c { border: 3px solid #9863b6;}
    .dataMenu li.data-d { border: 3px solid #dc596b;}
	.dataMenu li h2 {font-size: 1rem; padding: 0; }
    .dataContent { border: 3px solid #4869ab;}
    .dataContent.data-b{ border: 3px solid #26a9bd;}
    .dataContent.data-c{ border: 3px solid #9863b6;}
    .dataContent.data-d{ border: 3px solid #dc596b;}
	.data-Lead{
		font-size: 1.6rem;
		margin-bottom: 4rem;
		line-height: 1.5;
	}
}
/* data a~d共通end */

/* snsボタン **********************************************************************/
.sns-btn-box {
    padding: 1em 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    font-size: 80%;
    font-weight: bold;
}
.sns-link{
	display: block;
    padding: 0.8em 0.1em;
	height: 90px;
    border-radius: 0.4rem;
    position: relative;
    line-height: 1.2;
    text-align: center;
}
.sns-link:hover{
	height: 87px;
}
.sns-link img{
	width: 50px;
}
.facebook-btn{
	background: #1877f2;
	border-bottom: 5px solid #2c4373;
}
.facebook-btn:hover{
	margin-top: 3px;
	border-bottom: 2px solid #2c4373;
}
.line-btn{
	background: #4cc764;
	border-bottom: 5px solid #1e8f51;
}
.line-btn:hover{
	margin-top: 3px;
	border-bottom: 2px solid #1e8f51;
}
.twitter-btn{
	background: #000000;
	border-bottom: 5px solid #3b3b3b;
}
.facebook-btn img{
	width: 45px;
	padding-bottom: 6px;
}
.twitter-btn img{
	width: 31px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.twitter-btn:hover{
	margin-top: 3px;
	border-bottom: 2px solid #3b3b3b;
}
ul.sns-btn-box li{
	width: 13%;
    text-align: center;
	margin-left: 2rem;
}
ul.sns-btn-box li:first-child{
	margin-left: 0;
}
.sns-btn-text {
	font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: -4px;
    display: block;
    text-overflow: ellipsis;
	color: #fff;
}

@media (max-width: 768px) {
	ul.sns-btn-box li{width:22%;}
}
/* snsボタンend */

/*共有CSS*/



/* IE用 */
@media all and (-ms-high-contrast: none){
	.dataMV-titleBox p{
		flex-shrink: 0; /* IE用 */
	}
}




/* 事例下つき文字 */
.jirei-text sub{
	vertical-align: bottom;
	font-size: 60%;
}