@charset "UTF-8";

ol, ul, menu {
    list-style: none;
}
.salesPro img {
	width: 100%;
	border: none;
	vertical-align: top;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
p{
	line-height: 1.7;
}
/* 表示切替 */
.switch {
	visibility: hidden;
}
.sp{
	display:none;
}
@media screen and (max-width:640px){
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
}

/*
	common
-----------------------------------------------------------------------------------------------*/
/* 変数 */
:root{
	/* color */
	--bk: #000;
	--wh: #fff;
	--gry: #666;
	--bl: #003f94;
	--lbl: #d2eeff;
	--lrd: #ff4848;
	--yl: #fbee00;
	--mstd: #fbbb5e;
	--beg: #faf6ee;
	/* font-family */
	--en: 'Montserrat', sans-serif;
	/* font-weight */
	--light: 100;
	--medium: 400;
	--bold: 700;
	--black: 900;
}

/* ctsArea */
.ctsArea{
	margin-bottom: 60px;
}
@media screen and (max-width:640px){
	.ctsArea{
		margin-bottom: 30px;
	}
}

/* title */
.mainTit{
	margin-bottom: 40px;
}
[class^="cmnTit"]{
	margin-bottom: 30px;
	font-size: 35px;
	font-weight: var(--bold);
	text-align: center;
}
[class^="cmnTit"]::after{
	content:' ';
	display:block;
	width:50px;
	height:3px;
	margin: 20px auto 0;
	background-color: var(--bl);
}
@media screen and (max-width:640px){
	.mainTit{
		margin-bottom: 15px;
	}
	[class^="cmnTit"]{
		font-size: 26px;
	}
	[class^="cmnTit"]::after{
		width:40px;
		margin: 10px auto 0;
	}
}

/* text */
[class^="cmnTxt_L"]{
	font-size: 20px;
	font-weight: var(--bold);
	color: var(--bl);
	text-align: center;
	line-height: 1.8;
	position: relative;
}
[class^="cmnTxt_L"] sup{
	font-size: 10px;
}
.cmnTxt_L_flag::before{
	content:' ';
	display:block;
	width:40px;
	height:40px;
	margin: 0 auto 10px;
	background:url(../images/ico_flag.svg) no-repeat center center / cover;
}
[class^="cmnTxt_M"]{
	margin-top: 15px;
	font-size: 16px;
	font-weight: var(--bold);
	text-align: center;
	line-height: 1.8;
}
@media screen and (max-width:640px){
	[class^="cmnTxt_L"]{
		font-size: 18px;
		text-align: left;
	}
	[class^="cmnTxt_M"]{
		font-size: 15px;
		text-align: left;
	}
}

/* notes */
.notes{
	margin-top: 15px;
	font-size: 12px;
	color: var(--gry);
	text-align: center;
}
@media screen and (max-width:640px){
	.notes{
		margin-top: 10px;
		text-align: left;
	}
}


/*
	wrapper
-----------------------------------------------------------------------------------------------*/
.wrapper{
	width: 1040px;
	margin: 0 auto;
	padding: 0 30px;
	font-size: 14px;
}
.wrapper *,
.wrapper *::before,
.wrapper *::after {
    box-sizing: border-box;
}
@media screen and (max-width:640px){
	.wrapper{
		width: calc(100% - 40px);
		padding: 30px 20px 50px;
		background-color: var(--wh);
	}
}

/*
	about
-----------------------------------------------------------------------------------------------*/
/* data */
.about__character{
	width: 740px;
	margin: 80px auto 0;
}
.about__characterImg{
	width: 80%;
	margin: 0 auto 50px;
}
.about__characterDate{
	padding: 30px;
	background-color: var(--beg);
	border-radius: 20px;
	position: relative;
}
.about__characterDateTit{
	font-size: 22px;
	font-weight: var(--bold);
	color: var(--bl);
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}
.about__characterDateArea{
	display: flex;
}
.about__characterDateList{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 0;
	width: calc((100%)/2);
	font-size: 13px;
	font-weight: bold;
}
.about__characterDateList dt{
	width: 110px;
	margin-right: 10px;
	padding: 8px 10px;
	color: var(--wh);
	text-align: center;
	background-color: var(--bl);
	border-radius: 15px;
}
.about__characterDateList dd{
	width: calc(100% - 120px);
	font-size: 15px;
}
.about__characterDateTxt{
	width: calc((100%)/2);
	margin-left: 30px;
	padding-left: 30px;
	font-size: 14px;
	border-left: 1px dotted var(--gry);
}
@media screen and (max-width:640px){
	.about__character{
		width: 100%;
		margin: 60px auto 0;
	}
	.about__characterImg{
		width: 100%;
		margin: 0 auto 30px;
	}
	.about__characterDate{
		padding: 30px 20px 20px;
	}
	.about__characterDateTit{
		font-size: 18px;
		top: -15px;
	}
	.about__characterDateArea{
		flex-direction: column;
	}
	.about__characterDateList{
		width: 100%;
		font-size: 12px;
	}
	.about__characterDateList dt{
		width: 100px;
		padding: 6px;
	}
	.about__characterDateList dd{
		width: calc(100% - 110px);
		font-size: 14px;
	}
	.about__characterDateTxt{
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
		padding-left: 0;
		padding-top: 15px;
		font-size: 14px;
		border-left: none;
		border-top: 1px dotted var(--gry);
	}
}


/*
	search
-----------------------------------------------------------------------------------------------*/
#search{
	width: 900px;
	margin: 0 auto 100px;
}

/* ふきだし */
.search__fukidashi{
	margin-bottom: 60px;
	padding: 80px;
	background-color: var(--lbl);
	border-radius: 20px;
	position: relative;
}
.search__fukidashi::after{
	content: "";
	width: 60px;
	height: 30px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: var(--lbl);
	position: absolute;
	left: 50%;
	bottom: -29px;
	transform: translateX(-50%);
}
/* title */
.search__tit{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: center;
	gap: 0 10px;
	margin-bottom: 30px;
	text-align: center;
}
img.search__titImg{
	width: 15%;
}
.search__titTxt{
	font-size: 35px;
	font-weight: var(--bold);
	line-height: 1.5;
}
.search__titTxtFukidashi{
	display: inline-block;
	font-size: 22px;
	position: relative;
}
.search__titTxtFukidashi::before,
.search__titTxtFukidashi::after{
	content: "";
	width: 3px;
	height: 80%;
	background-color: var(--mstd);
	position: absolute;
	bottom: 0;
}
.search__titTxtFukidashi::before{
	left: -20px;
	transform: rotateZ(-45deg);
}
.search__titTxtFukidashi::after{
	right: -20px;
	transform: rotateZ(45deg);
}
.search__titTxtEm{
	text-shadow : 
		3px  3px 0px #ffffff,
		-3px  3px 0px #ffffff,
		3px -3px 0px #ffffff,
		-3px -3px 0px #ffffff,
		3px  0px 0px #ffffff,
		0px  3px 0px #ffffff,
		-3px  0px 0px #ffffff,
		0px -3px 0px #ffffff; 
}
.search__titTxtEn{
	font-family: var(--en);
	font-size: 80px;
	color: var(--bl);
	line-height: 1.0;
}
.search__titTxt rt{
	font-size: 8px;
	color: var(--bl);
}
/* list_chart */
.search__list{
	display: flex;
	flex-wrap: wrap;
}
.search__list > li{
	text-align: center;
}
.search__list > li:first-of-type{
	width: 55%;
	margin-right: 50px;
}
.search__list > li:last-of-type{
	width: calc(100% - (55% + 50px));
}
.search__listFukidashi{
	display: inline-block;
	margin-bottom: 20px;
	padding: 10px 15px;
	font-size: 16px;
	font-weight: bold;
	color: var(--wh);
	text-align: center;
	background-color: var(--bl);
	border-radius: 5px;
	position: relative;
}
.search__listFukidashi::after{
	content: "";
	width: 20px;
	height: 10px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: var(--bl);
	position: absolute;
	left: 50%;
	bottom: -9px;
	transform: translateX(-50%);
}
.search__listImg{
	width: 100%;
}
.search__list li:last-of-type .search__listImg{
	width: 90%;
	margin-top: 60px;
}
.search__listNotes{
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 15px;
	margin-bottom: 50px;
	font-size: 12px;
	font-weight: var(--bold);
}
.search__listNotes li{
	padding-left: 18px;
	position: relative;
}
.search__listNotes li::before{
	content: '■';
	font-size: 15px;
	color: var(--lrd);
	position: absolute;
	left: 0;
}
.search__listNotes li:last-of-type:before{
	color: #ff9191;
}
/* txt */
.search__txtArea{
	padding: 45px;
	background-color: var(--wh);
	border-radius: 20px;
	position: relative;
}
.search__txtArea::before{
	content:' ';
	width:45px;
	height:50px;
	background:url(../images/ico_line.svg) no-repeat center center / cover;
	position: absolute;
	top: -15px;
	right: -15px;
}
.search__txt{
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
}
.search__txt span{
	color: var(--lrd);
}
.search__txt strong{
	display: inline-block;
	font-size: 20px;
	background:linear-gradient(transparent 60%, var(--yl) 60%);
}
@media screen and (max-width:640px){
	#search{
		width: 100%;
		margin: 0 auto 60px;
	}
	
	/* ふきだし */
	.search__fukidashi{
		margin-bottom: 50px;
		padding: 20px;
		border-radius: 20px;
	}
	.search__fukidashi::after{
		width: 40px;
		height: 20px;
		bottom: -19px;
	}
	/* title */
	.search__tit{
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: center;
		gap: 0 5px;
		margin-bottom: 20px;
	}
	img.search__titImg{
		display: none;
	}
	.search__titTxt{
		font-size: 25px;
	}
	.search__titTxtFukidashi{
		font-size: 18px;
	}
	.search__titTxtEm{
		text-shadow : 
			2px  2px 0px #ffffff,
			-2px  2px 0px #ffffff,
			2px -2px 0px #ffffff,
			-2px -2px 0px #ffffff,
			2px  0px 0px #ffffff,
			0px  2px 0px #ffffff,
			-2px  0px 0px #ffffff,
			0px -2px 0px #ffffff; 
	}
	.search__titTxtEn{
		font-size: 50px;
	}
	.search__titTxt rt{
		font-size: 5px;
	}
	/* list_chart */
	.search__list{
		flex-direction: column;
		gap: 40px 0;
		margin-bottom: 40px;
	}
	.search__list > li{
		width: 100%;
	}
	.search__list > li:first-of-type{
		width: 100%;
		margin-right: 0;
	}
	.search__list > li:last-of-type{
		width: 100%;
	}
	.search__listFukidashi{
		font-size: 15px;
	}
	.search__list li:last-of-type .search__listImg{
		width: 70%;
		margin: 0 auto;
	}
	.search__listNotes{
		margin-bottom: 0;
	}
	/* txt */
	.search__txtArea{
		padding: 25px;
		border-radius: 10px;
	}
	.search__txt{
		font-size: 15px;
		text-align: left;
	}
	.search__txt strong{
		font-size: 18px;
	}
}


/*
	tools
-----------------------------------------------------------------------------------------------*/
#tools{
	margin-bottom: 100px;
}

/* list */
.tools__list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.tools__list li{
	width: calc((100% - 60px)/3);
	background-color: var(--beg);
	border-radius: 20px;
}
.tools__list li a:hover{
	cursor: pointer;
}
.tools__listTit{
	padding: 15px;
	font-size: 17px;
	font-weight: var(--bold);
	color: var(--wh);
	text-align: center;
	background-color: var(--bl);
	border-radius: 20px 20px 0 0;
}
.tools__listImg{
	position: relative;
}
.tools__listImg::before {
	content: '';
	width: 25px;
	height: 25px;
	background: url(../images/ico_zoom.svg) no-repeat;
	position: absolute;
	right: 15px;
	bottom: 15px;
}
@media screen and (max-width:640px){
	#tools{
		margin-bottom: 60px;
	}
	
	/* list */
	.tools__list{
		gap: 10px;
	}
	.tools__list li{
		width: calc((100% - 10px)/2);
	}
	.tools__listTit{
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 66px;
		padding: 12px;
		font-size: 15px;
		z-index: 10;
	}
	.tools__listImg::before {
		width: 20px;
		height: 20px;
	}
}


/*
	modal
-----------------------------------------------------------------------------------------------*/
.modal_box {
	display: none;
	width: 80%;
	max-width: 800px;
	margin: 0;
    position: fixed;
    z-index: 7777;
}
.modal__tit{
	padding: 20px;
	font-size: 22px;
	font-weight: var(--bold);
	color: var(--wh);
	text-align: center;
	background-color: var(--bl);
	border-radius: 20px 20px 0 0;
}
.modal__itemArea{
	max-height: 70vh;
	padding: 60px;
	background-color: var(--beg);
	border-radius: 0 0 20px 20px;
	overflow-y: scroll;
}
/* modal_close */
.modal_close {
	width: 55px;
	height: 55px;
	background-color: var(--bk);
	border-radius: 50%;
	border: 1px solid var(--wh);
    position: absolute;
    top: -15px;
    right: -15px;
	cursor: zoom-out;
}
.modal_close::before,
.modal_close::after{
	content: '';
	width: 1px;
	height: 20px;
	background-color: var(--wh);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}
.modal_close::after{
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* modal_bg */
.modal_bg {
	display: none;
	width: 100%;
	height: 120%;
	background-color: var(--wh);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
	opacity: 0.98;
	cursor: zoom-out;
}
/* list */
[class^="modal__list"]{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
[class^="modal__list"] li{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
}
.modal__list2col li{
	width: calc((100% - 30px)/2);
}
.modal__list3col li{
	width: calc((100% - 60px)/3);
}
.modal__listImg{
	margin-bottom: 20px;
}
.modal__listTit{
	font-size: 16px;
	font-weight: var(--bold);
	text-align: center;
	line-height: 1.5;
}
.modal__listSpec{
	font-size: 13px;
}
@media screen and (max-width:640px){
	.modal_box {
		width: 90%;
	}
	.modal__tit{
		padding: 15px;
		font-size: 18px;
	}
	.modal__itemArea{
		max-height: 70vh;
		padding: 30px 20px;
	}
	/* modal_close */
	.modal_close {
		width: 45px;
		height: 45px;
		top: -10px;
		right: -10px;
	}
	.modal_close::before,
	.modal_close::after{
		height: 15px;
	}
	/* list */
	[class^="modal__list"]{
		gap: 30px;
	}
	.modal__list2col li{
		width: 100%;
	}
	.modal__list3col li{
		width: 100%;
	}
	.modal__listImg{
		margin-bottom: 15px;
	}
	.modal__listTit{
		font-size: 15px;
	}
	.modal__listSpec{
		font-size: 12px;
	}
	#tools .notes{
		margin-top: 30px;
		text-align: center;
	}
}


/*
	case
-----------------------------------------------------------------------------------------------*/
#case{
	margin-bottom: 100px;
}

/* list */
.case__list{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 30px;
	width: 910px;
	margin: 0 auto;
}
.case__list li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}
.case__list li:last-of-type{
	flex-direction: row-reverse;
}
.case__listTxtArea{
	width: calc(100% - 540px);
}
.case__listTit{
	margin-bottom: 15px;
	font-size: 25px;
	font-weight: var(--bold);
	color: var(--bl);
}
.case__listImg{
	width: 500px;
	border-radius: 20px;
	overflow: hidden;
}
#case .cmnTxt_M{
	margin-top: 50px;
}
@media screen and (max-width:640px){
	#case{
		margin-bottom: 0;
	}
	
	/* list */
	.case__list{
		gap: 40px;
		width: 100%;
	}
	.case__list li{
		flex-direction: column;
		gap: 10px;
	}
	.case__listTxtArea{
		width: 100%;
	}
	.case__listTit{
		margin-bottom: 10px;
		font-size: 18px;
	}
	.case__listImg{
		width: 100%;
	}
	#case .cmnTxt_M{
		margin-top: 30px;
		text-align: center;
	}
}