@charset "UTF-8";

header { position: relative; }
header:after { width: 100%; height: 100%; content: ""; background: #f1ffe0; position: absolute; top: 0; left: 0; clip-path: polygon(60% 0, 100% 100%, 100% 0); }
@media screen and (max-width: 767px) {
	#wrapper { overflow-x: hidden; }
	header { padding-bottom: 5vh;}
	header:after { display: none; }
	header .in { margin: 0; }
	.mainCopy { padding: 8% 6%;  }
	.mainCopy h1 { font-size: 2.2em; color: var(--base-color); text-align: center; line-height: 1.2; margin-bottom: 20px; font-weight: 900; font-style: normal; position: relative; letter-spacing: 0.1em; }
	.mainCopy h1 span.xsmall { letter-spacing: 0; font-size: 0.6em; }
	.mainCopy h1 span.imgCathch { position: absolute; top: -100px; left: -6%; width: 80px }
	.mainCopy h2 { font-weight: 600; font-size: 0.9em; color: #fff; margin-bottom: 10px; text-align: center;}
	.mainCopy h2 span { background: #333; color: #fff; padding: 5px 10px; }
	.mainCopy h3 { font-weight: normal; font-size: 1.2em; color: #fff; padding: 0 2%; margin-bottom: 20px; }
	.keni { position: absolute; top: 2%; right: 1%; width: 150px;}
	.opello-logo { width: 80%; margin: 0 auto; }
	.lineup { width: 90%; margin: 0 auto 20px; }
	header p.alC { margin: 0 6% !important; text-align: left !important; }
}
@media screen and (max-width: 375px) {
	header .in { margin: 0 auto; position: relative; height: 100vh; }
}
@media screen and (min-width: 768px) {
	header { padding-top: 5vh; }
	header .in { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; margin-bottom: 20vh; }
	header .in .headline { position: relative; }
	
	.mainCopy { position: absolute; top: 35%; left: 0%; transform: translateY(-50%); margin: 0 auto; z-index: 30; width: 100%;  }
	.mainCopy h1 { font-size: 4.0em; color: #fff; text-align: left; line-height: 1.2; margin-bottom: 20px; font-weight: 900; font-style: normal; position: relative; letter-spacing: 0.05em; padding-left: 6%; }
	.mainCopy h1 span.xsmall { letter-spacing: 0; font-size: 0.65em; }
	.mainCopy h1 span.imgCathch { position: absolute; top: -60px; left: -4%; }
	.mainCopy h2 { font-weight: 600; font-size: 1.2em; color: #fff; margin-bottom: 0px; padding-left: 7%; }
	.mainCopy h2 span { background: #000; color: #fff; padding: 5px 20px; }
	.mainCopy h3 { font-weight: normal; font-size: 1.2em; color: #fff; padding: 0 2%; margin-bottom: 20px; }
	.opello-logo { padding-left: 6%; }
	.keni { position: absolute; top: 4%; right: 1%; width: 300px;}	
	.lineup { position: absolute; left: 50%; bottom: -150px; transform: translateX(-50%); width: 80%; margin: 0 auto;}
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	header { padding-top: 0vh; padding-bottom: 5vh; }
	.mainCopy { position: absolute; top: 45%; }
	.mainCopy h1 { font-size: 3.0em; }
	.mainCopy h1 span.xsmall { letter-spacing: 0; font-size: 0.65em; }
	.mainCopy h1 span.imgCathch { position: absolute; top: -80px; left: -0%; width: 100px }
	.mainCopy h2 { font-size: 0.9em; padding-left: 12%; }
	.mainCopy h3 { font-weight: normal; font-size: 1.2em; color: #fff; padding: 0 2%; margin-bottom: 20px; }
	.keni { position: absolute; top: 4%; right: 1%; width: 200px;}	
	.opello-logo { padding-left: 4%; width: 360px; }
	.lineup { position: absolute; left: 50%; bottom: -150px; transform: translateX(-50%); width: 90%; margin: 0 auto;}
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	header { padding-top: 0vh; padding-bottom: 5vh; }
	.mainCopy { position: absolute; top: 40%; }
	.mainCopy h1 { font-size: 3.6em; }
	.mainCopy h1 span.xsmall { letter-spacing: 0; font-size: 0.65em; }
	.mainCopy h1 span.imgCathch { position: absolute; top: -80px; left: 2%; width: 100px }
	.mainCopy h2 { font-size: 0.9em; padding-left: 12%; }
	.mainCopy h3 { font-weight: normal; font-size: 1.2em; color: #fff; padding: 0 2%; margin-bottom: 20px; }
	.keni { position: absolute; top: 4%; right: 1%; width: 200px;}	
	.opello-logo { padding-left: 5%; width: 420px; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	header { padding-top: 0vh; }
	.mainCopy { position: absolute; left: 3%; }
	.mainCopy h1 { font-size: 3.3em; }
	.opello-logo { width: 400px; }
	.mainCopy h1 span.imgCathch { position: absolute; top: -50px; left: -3%; width: 100px }	
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	header { padding-top: 0vh; }
	.mainCopy { position: absolute; left: 4%; }
	.mainCopy h1 { font-size: 3.5em; }
	.opello-logo { width: 400px; }
	.mainCopy h1 span.imgCathch { position: absolute; top: -50px; left: -3%; width: 100px }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	header { padding-top: 0vh; }
	.mainCopy { position: absolute; left: 4%; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}
@media screen and (min-width: 1490px) and (max-width: 1589px) {
}
@media screen and (min-width: 1590px) {
}

/* mv */
@media screen and (max-width: 767px) {
	.pc_mv { display: none; }
	.tab_mv { display: none; }
	.sp_mv { display: block; }	
}
@media screen and (min-width: 768px) and (max-width: 1089px) {
	.pc_mv { display: none; }
	.tab_mv { display: block; }
	.sp_mv { display: none; }
}
@media screen and (min-width: 1090px) {
	.pc_mv { display: block; }
	.tab_mv { display: none; }
	.sp_mv { display: none; }
}

/*-- content ------------------------------------------------------------*/
.section-nayami { background: #fffcf6; position: relative; }
.section-nayami .in { position: relative; z-index: 10;}
@media screen and (max-width: 599px) {
	section .in { padding: 6%; }
	.section-nayami:after { width: 100%; height: 100%; content: ""; background: #f7f4e6; position: absolute; top: 0; left: 0; clip-path: polygon(60% 100%, 100% 100%, 100% 0); }
	.section-reason { position: relative; background: #e5f4ff;  }
	.section-reason:after { width: 100%; height: 100%; content: ""; background: #eff7fd; position: absolute; top: 0; left: 0; clip-path: polygon(60% 50%, 100% 100%, 100% 0); z-index: -1; }
	.section-reason .in { position: relative; z-index: 2; }
	.section-system { position: relative; }
	.section-system .in { position: relative; z-index: 2; }
	.section-system:after { width: 100%; height: 100%; content: ""; background: #fff8f4; position: absolute; top: 0; left: 0; clip-path: polygon(60% 50%, 100% 100%, 100% 0); z-index: 1; }
}
@media screen and (min-width: 600px) {
	#content { margin: 5vh 0; }
	.section-nayami:after { width: 100%; height: 100%; content: ""; background: #f7f4e6; position: absolute; top: 0; left: 0; clip-path: polygon(60% 100%, 100% 100%, 100% 0); }
	.section-reason { position: relative; background: #e5f4ff; }
	.section-reason:after { width: 100%; height: 100%; content: ""; background: #eff7fd; position: absolute; top: 0; left: 0; clip-path: polygon(60% 50%, 100% 100%, 100% 0); z-index: 1; }
	.section-reason .in { position: relative; z-index: 2; }
	.section-system { position: relative; }
	.section-system:after { width: 100%; height: 100%; content: ""; background: #fff8f4; position: absolute; top: 0; left: 0; clip-path: polygon(60% 50%, 100% 100%, 100% 0); z-index: -1; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#content { margin-top: 0; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#content { margin-top: 0; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#content { margin-top: 0; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#content { margin-top: 0; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#content { margin-top: 0; }
}
/*-- タイトル -------------------------------------------------------------*/
@media screen and (max-width: 1089px) {
	.ttl01 { text-align: center; margin-bottom: 20px; font-weight: bold; font-size: 1.5em; line-height: 1.5; color: #000; }	
	.subttl01 { text-align: center; color: #333; margin-bottom: 10px; font-weight: bold; line-height: 1.5; margin-bottom: 5px; }
	.subttl02 { background: var(--base-color); padding: 5px; text-align: center; color: #fff; }
	.ttlBar { width: 5%; height: 5px; margin: 0 auto 20px;}
	
	.mark { width: 30px; margin: 0 auto 10px; }	
	.movie_icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 30px;}
	.nayami { width: 100px; margin: 0 auto 20px; }
	.nayami img { mix-blend-mode: multiply; }
	.ttl02 { color: #fff; margin-bottom: 20px; font-weight: bold; font-size: 1.1rem; line-height: 1.5; background: var(--bestar-color); padding: 10px 20px; }
}
@media screen and (min-width: 600px) and (max-width: 1089px) {
	section .in { padding: 5vh 4%; }
	.ttl01 { font-size: 2.0rem; }
	.mark { width: 40px; }	
	.movie_icon { width: 40px;}
	.nayami { width: 150px; margin: 0 auto 20px;}
	.ttl01 { font-size: 1.3rem; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.ttl01 { font-size: 1.8rem; }
	.ttl01 { font-size: 1.4rem; }
}

@media screen and (min-width: 1090px) {
	section .in { max-width: 1260px; width: 96%; margin: 0 auto; padding: 5vh 0; }
	.ttl01 { text-align: center; color: #333; margin-bottom: 40px; font-weight: bold; font-size: 2.0em; line-height: 1.5; }	
	.ttl01 span.xsmall { color: #333; font-size: 0.7em;  }
	.ttlBar { width: 5%; height: 5px; margin: 0 auto 40px;}
	.subttl01 { text-align: center; color: #333; margin-bottom: 10px; font-weight: bold; line-height: 1.0; margin-bottom: 5px; }
	.subttl02 { background: var(--base-color); padding: 5px; text-align: center; color: #fff; }
	.mark { width: 60px; margin: 0 auto 10px; }	
	.movie_icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50px;}
	.nayami { width: 180px; margin: 0 auto 20px; }
	.nayami img { mix-blend-mode: multiply; }
	.ttl02 { color: #fff; margin-bottom: 20px; font-weight: bold; font-size: 1.8rem; line-height: 1.5; background: var(--bestar-color); padding: 10px 20px; }	
}
@media screen and (min-width: 1090px) and (min-width: 1189px) {
}
@media screen and (min-width: 1190px) and (min-width: 1289px) {
}
@media screen and (min-width: 1290px) and (min-width: 1389px) {
}

/*-- nayami -------------------------------------------------------------*/
@media screen and (max-width: 1089px) {
	.nayamiList { max-width: 700px; width: 100%; margin: 0 auto; }
	.nayamiList li { 
		font-size: 1.0rem; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; font-weight: bold; line-height: 1.7;
		background: url("../img/common/icon-check.png") left top no-repeat; background-size: 25px; padding-left: 30px; text-indent: 0em;
	}
}
@media screen and (min-width: 1090px) {
	.nayamiList { width: 700px; margin: 0 auto; }
	.nayamiList li { 
		font-size: 1.2rem; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; font-weight: bold; 
		background: url("../img/common/icon-check.png") left top no-repeat; background-size: 30px; padding-left: 60px; text-indent: -1em;
	}
}

/*-- ポイント -------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	#anch-point .ttl01 img { width: 60vw; margin: 0 auto 20px; }
	.in-flex { display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin-bottom: 5vh; }
	.in-flex:last-child { margin-bottom: 0px; }
	.in-flex .in-flex-Img { width: 100%; position: relative; order: 1; margin-bottom: 20px; }
	.in-flex .in-flex-Txt { width: 100%; order: 2; }
	.in-flex .in-flex-Txt .ttl01 { text-align: center; margin-bottom: 10px; font-size: 1.4em; color:var(--base-color); }
	.in-flex .in-flex-Txt .ttl01.ttl0101 { width: 60%; margin: 20px auto; }
	.in-flex .in-flex-Txt .ttl01.ttl0102 { width: 80%; margin: 20px auto; }
	.pointDl { margin-bottom: 5px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
	.pointDl dt { background: var(--base-color); color: #fff; padding: 1px 10px; width: fit-content; margin-right: 0.5em; word-break: keep-all; margin-bottom: 5px }
	.pointDl dd { padding: 2px 0px; font-weight: bold; }
	.pointDl dd .roboto { font-size: 1.5em; margin: 0 2px; }
	/*.in-flex .in-flex-Img:after { content: ""; position: absolute; top: -4%; left: -4%; background: var(--opa-color); width: 96%; height: 100%; z-index: -1; border-radius: 8px; }*/
}
@media screen and (min-width: 768px) {
	.in-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5vh; }
	.in-flex:last-child { margin-bottom: 0px; }
	.in-flex .in-flex-Img { width: 40%; position: relative; }
	.in-flex .in-flex-Txt { width: 56%; }
	.in-flex .in-flex-Txt .ttl01 { text-align: left; margin-bottom: 10px; }
	.pointDl { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; }
	.pointDl dt { background: var(--base-color); color: #fff; padding: 1px 10px;}
	.pointDl dd { padding: 1px 10px; }
	.pointDl dd .roboto { font-size: 1.5em; margin: 0 2px; }
	/*.in-flex .in-flex-Img:after { content: ""; position: absolute; top: -4%; left: -4%; background: var(--opa-color); width: 96%; height: 100%; z-index: -1; border-radius: 8px; }*/
}
@media screen and (min-width: 768px) and (max-width: 889px)  {	
	#anch-point .ttl01 img { width: 40vw; margin: 0 auto 20px; }
	.in-flex { display: flex; justify-content: space-between; align-items: flex-start; }
	.in-flex .in-flex-Img { width: 46%; }
	.in-flex .in-flex-Txt { width: 50%; }
	
	#anch-point .in-flex { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; }
	#anch-point .in-flex .in-flex-Img { width: 60%; margin: 0 auto 40px; order: 1; }
	#anch-point .in-flex .in-flex-Txt { width: 100%; order: 2; }
	.pointDl { display: flex; justify-content: flex-start; align-items: center; }
	#anch-point h3.ttl01 { text-align: center; }
}
@media screen and (min-width: 900px) and (max-width: 1089px)  {
	#anch-point .ttl01 img { width: 40vw; margin: 0 auto 20px; }
	.in-flex .in-flex-Img { width: 44%; }
	.in-flex .in-flex-Txt { width: 52%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px)  {
	#anch-point .ttl01 img { width: 40vw; margin: 0 auto 20px; }
	.in-flex .in-flex-Img { width: 42%; }
	.in-flex .in-flex-Txt { width: 54%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}

/*-- ポイント -------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.in-flex_opello .in-flex-Img { width: 100%; position: relative; order: 1; margin-bottom: 20px; }
	.in-flex_opello .in-flex-Txt { width: 100%; order: 2; }
}
@media screen and (min-width: 768px) {
	.in-flex_opello .in-flex-Img { width: 30%; position: relative; }
	.in-flex_opello .in-flex-Txt { width: 66%; }
}
@media screen and (min-width: 768px) and (max-width: 889px)  {	
	.in-flex_opello .in-flex-Img { width: 46%; }
	.in-flex_opello .in-flex-Txt { width: 50%; }
}
@media screen and (min-width: 900px) and (max-width: 1089px)  {
	.in-flex_opello .in-flex-Img { width: 44%; }
	.in-flex_opello .in-flex-Txt { width: 52%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px)  {
	.in-flex_opello .in-flex-Img { width: 42%; }
	.in-flex_opello .in-flex-Txt { width: 54%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}

/*-- cv-section -------------------------------------------------------------*/
.cv-section { background:url("../img/common/kikaBg.jpg") center center no-repeat; background-size: cover; padding: 2.5vh 0;}
.cv-section p { color: #fff; font-size: 1.1em; }
@media screen and (max-width: 599px) {
	.cv-section { padding: 2.5vh 0;}
	.cv-section .in { padding: 0 4%;}
	.contact-list { }
	.contact-list li { width: 90%; margin:0 5% 20px;}
	.contact-list li:last-child { margin-right: 0px; }
	.contact-list li:nth-child(1) p { margin-bottom: 0; font-size: 0.8em; }
	.contact-list li:nth-child(1) p.roboto { font-size: 2.4em;line-height: 1.7; }
		.contact-list li:nth-child(1) p.roboto a         { resize: none; }
		.contact-list li:nth-child(1) p.roboto a:link    { color:#000; text-decoration: none; }
		.contact-list li:nth-child(1) p.roboto a:visited { color:#000; text-decoration: none; }
		.contact-list li:nth-child(1) p.roboto a:hover   { color:#000; text-decoration: none; }
		.contact-list li:nth-child(1) p.roboto a:active  { color:#000; text-decoration: none; }
	.contact-list li:nth-child(1) p.roboto a:before { content: "\f095"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px; transform: rotate(-270deg); display: inline-block;} 
	.contact-list li:nth-child(1) p.roboto:hover a:before { content: "\f2a0"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px;}  
	.contact-list li:nth-child(1) p.xsmall { font-size: 0.8em; }
	
	.contact-list li.list-form { background: var(--cv-color); border: var(--cv-color) 1px solid; height: 35px; line-height: 35px; color: #fff; text-align: center; font-size: 0.9em; }
		.contact-list li.list-form a         { resize: none; display: block; }
		.contact-list li.list-form a:link    { color:#fff; text-decoration: none; }
		.contact-list li.list-form a:visited { color:#fff; text-decoration: none; }
		.contact-list li.list-form a:hover   { color:var(--cv-color); text-decoration: none; background:#fff; }
		.contact-list li.list-form a:active  { color:#FFFFFF; text-decoration: none; }
	.contact-list li.list-form a:before { content: "\f0e0"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px;} 
	.contact-list li.list-form:hover a:before { content: "\f2b6"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px;}  
}
@media screen and (min-width: 600px) {	
	.contact-list { display: flex; justify-content: center; align-items: center; }
	.contact-list li { width: 31%; margin-right: 3.5%;}
	.contact-list li:last-child { margin-right: 0px; }
	.contact-list li:nth-child(1) p { margin-bottom: 0; color:#000; font-size: 0.9rem; }
	.contact-list li:nth-child(1) p.roboto { font-size: 2.4rem;line-height: 1.2; }
		.contact-list li:nth-child(1) p.roboto a         { resize: none; }
		.contact-list li:nth-child(1) p.roboto a:link    { color:#000; text-decoration: none; }
		.contact-list li:nth-child(1) p.roboto a:visited { color:#000; text-decoration: none; }
		.contact-list li:nth-child(1) p.roboto a:hover   { color:#000; text-decoration: none; }
		.contact-list li:nth-child(1) p.roboto a:active  { color:#000; text-decoration: none; }
	.contact-list li:nth-child(1) p.roboto a:before { content: "\f095"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px; transform: rotate(-270deg); display: inline-block;} 
	.contact-list li:nth-child(1) p.xsmall { font-size: 0.8rem; }
	
	.contact-list li.list-form { background: var(--cv-color); border: var(--cv-color) 1px solid; height: 50px; line-height: 50px; color: #fff; text-align: center; font-size: 1.0rem; border-radius: 6px; }
	.contact-list li.list-form:hover { line-height: 47px; }
		.contact-list li.list-form a         { resize: none; display: block; }
		.contact-list li.list-form a:link    { color:#fff; text-decoration: none; }
		.contact-list li.list-form a:visited { color:#fff; text-decoration: none; }
		.contact-list li.list-form a:hover   { color:var(--cv-color); text-decoration: none; background:#fff; border-radius: 6px; }
		.contact-list li.list-form a:active  { color:#fff; text-decoration: none; }
	.contact-list li.list-form a:before { content: "\f0e0"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px;} 
	.contact-list li.list-form:hover a:before { content: "\f2b6"; font-family: "Font AweSome 5 Free"; font-weight: 900; margin-right: 10px;}  
}
@media screen and (min-width: 600px) and (max-width: 899px)  {	
	.cv-section .in { padding: 0 4%;}
	.contact-list li { width: 40%; margin-right: 2%;}
	.contact-list li.list-form p { margin-bottom: 0; font-size: 0.7rem; }
	.contact-list li.list-form p.roboto { font-size: 2.0rem; }	
	.contact-list li.list-form { height: 50px; line-height: 50px; font-size: 1.0rem; }
	.contact-list li.list-form:hover { line-height: 47px; }
}
@media screen and (min-width: 900px) and (max-width: 1089px)  {	
	.cv-section .in { padding: 0 4%;}
	.contact-list li { width: 32%; margin-right: 2%;}
	.contact-list li.list-form p { margin-bottom: 0; font-size: 0.7rem; }
	.contact-list li.list-form p.roboto { font-size: 2.0rem; }	
	.contact-list li.list-form { height: 50px; line-height: 50px; font-size: 1.0rem; }
	.contact-list li.list-form:hover { line-height: 47px; }
}

/*-- system -------------------------------------------------------------*/
.section-system .in-flex .in-flex-Img:after { display: none; }
@media screen and (max-width: 1089px) {
	.background dt { background: var(--base-color); padding: 5px; text-align: center; color: #fff;}
	.background dd { padding: 4%; }
	
	.pointList { }
	.pointList li { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #dedede; }
	.pointList li:nth-child(3) { margin-bottom: 0px; }
	.pointList li h5 { text-align: center; font-weight: bold; font-size: 1.3em; color: var(--base-color); margin-bottom: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
	.pointList li div { margin-bottom: 20px;}
	.pointList li p { font-size: 0.9em; }
	
	.useList li { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dotted #dedede; font-size: 0.9em; }
	.useList li sup { position: relative; font-size: 0.5em; top: -5px; left: 5px;   }
	.useList li:before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 5px; color:var(--base-color); }
}
@media screen and (max-width: 599px) {
	.opeFlex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; flex-direction: column; }
	.opeFlexL { background: #fff; border: 1px solid #dedede; padding: 6%; margin-bottom: 20px; }
	.opeFlexC { display: flex; justify-content: center; flex-direction: column; align-items: center; margin-bottom: 20px; background: #f4f4f4; border-radius: 8px; padding: 20px; }
	.opeFlexR { background: #fff; border: 1px solid #dedede; padding: 6%; }
	.opeFlex h5 { text-align: center; color: var(--base-color); margin-bottom: 20px; }
	.opeFlex .bar { margin-bottom: 20px;}
	.opeFlex ul li { font-size: 0.9em; margin-bottom: 10px; padding-left: 1em; text-indent: -1.5em; }
	.opeFlex ul li:before { content: "・"; margin-right: 0.5em; }
	
	.opeFlexC .mode { width: 40%; margin: 0 auto 20px; }
	.opeFlexC .arrow { width: 40%; margin: 0 auto 20px; transform: rotate(90deg);}
}
@media screen and (min-width: 1090px) {
	.in-960 { max-width: 960px; margin: 0 auto; }
	.background dt { background: var(--base-color); padding: 5px; text-align: center; color: #fff;}
	.background dd { padding: 4%; }
	
	.pointList { display: flex; justify-content: center; }
	.pointList li { width: 31%; margin-right: 2%; }
	.pointList li:nth-child(3) { margin-right: 0px; }
	.pointList li h5 { text-align: center; font-weight: bold; font-size: 1.1em; color: var(--base-color); margin-bottom: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
	.pointList li div { margin-bottom: 20px;}
	.pointList li p { font-size: 0.9em; }
	
	.useList li { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dotted #dedede; font-size: 0.9em; }
	.useList li sup { position: relative; font-size: 0.5em; top: -5px; left: 5px;   }
	.useList li:before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 5px; color:var(--base-color); }
	
	.opeFlex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
	.opeFlexL { width: 26%; background: #fff; border: 1px solid #dedede; padding: 2%; }
	.opeFlexC { width: 30%; display: flex; justify-content: center; flex-direction: column; align-items: center; background: #f4f4f4; border-radius: 8px; padding: 20px; }
	.opeFlexR { width: 26%; background: #fff; border: 1px solid #dedede; padding: 2%; }
	.opeFlex h5 { text-align: center; color: var(--base-color); }
	.opeFlex ul li { font-size: 0.9em; margin-bottom: 10px; padding-left: 1em; text-indent: -1.5em; }
	.opeFlex ul li:before { content: "・"; margin-right: 0.5em; }
	.opeFlexC .mode { width: 60%; margin: 0 auto 20px;; }
	.opeFlexC .arrow { width: 80%; margin: 0 auto 20px;; }
}

@media screen and (min-width: 767px) and (max-width: 1089px) {
	.opeFlex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
	.opeFlexL { width: 26%; background: #fff; border: 1px solid #dedede; padding: 2%; }
	.opeFlexC { width: 30%; display: flex; justify-content: center; flex-direction: column; align-items: center; background: #f4f4f4; border-radius: 8px;}
	.opeFlexR { width: 26%; background: #fff; border: 1px solid #dedede; padding: 2%; }
	.opeFlex h5 { text-align: center; color: var(--base-color); }
	.opeFlex ul li { font-size: 0.9em; margin-bottom: 10px; padding-left: 1em; text-indent: -1.5em; }
	.opeFlex ul li:before { content: "・"; margin-right: 0.5em; }
	
	.opeFlexC .mode { width: 60%; margin: 0 auto 20px;; }
	.opeFlexC .arrow { width: 80%; margin: 0 auto 20px;; }
}
/*-- faq -------------------------------------------------------------*/
@media screen and (max-width: 767px) {	
	.faqDl { }
	.faqDl dt { background:#f4f4f4; margin-bottom: 10px; font-size: 0.9em; padding:10px 15px; position: relative; cursor: pointer; }
	.faqDl dt:before { content: "Q."; margin-right: 10px; font-family:'Roboto Condensed', sans-serif; font-weight:bold;　font-size:1.2em; color: var(--base-color); }
	.faqDl dt:after { position: absolute; top: 18%; right: 2%; content: "\f067"; font-family: "Font AweSome 5 Free"; font-weight: 900; color: var(--base-color); }
	.faqDl dt.active:after { position: absolute; top: 18%; right: 2%; content: "\f068"; font-family: "Font AweSome 5 Free"; font-weight: 900;  color: var(--base-color); }
	.faqDl dd { padding: 0 20px 20px; font-size: 1.0rem; }
}
@media screen and (min-width: 768px) {	
	.faqDl { }
	.faqDl dt { background:#f4f4f4; margin-bottom: 10px; font-size: 0.9em; padding:10px 15px; position: relative; cursor: pointer; }
	.faqDl dt:before { content: "Q."; margin-right: 10px; font-family:'Roboto Condensed', sans-serif; font-weight:bold;　font-size:1.2em; color: var(--base-color); }
	.faqDl dt:after { position: absolute; top: 18%; right: 2%; content: "\f067"; font-family: "Font AweSome 5 Free"; font-weight: 900; color: var(--base-color); }
	.faqDl dt.active:after { position: absolute; top: 18%; right: 2%; content: "\f068"; font-family: "Font AweSome 5 Free"; font-weight: 900;  color: var(--base-color); }
	.faqDl dd { padding: 0 20px 20px; font-size: 1.0rem; }
}

/*-- list  -------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.about h4 { color: #2f5597; }
	.strongList { width: 90%; margin: 0 auto;}
	.strongList li { margin: 0 0 40px; position: relative; }
	.listTtl { text-align: center; font-size: 1.4em; margin-bottom: 10px; font-weight: 700; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; line-height: 1.7; position: relative; z-index: 1; color: #2f5597; }
	.listTtl span { display: contents; }
	.strongList li div { margin-bottom: 20px; }
	.sublistTtl { text-align: center; }
}
@media screen and (min-width: 768px) {
	.about h4 { color: #2f5597; }
	.strongList { display: flex; justify-content: center; flex-wrap: wrap; }
	.strongList li { width: 29%; margin: 0 2% 40px; position: relative; }
	.listTtl { text-align: center; font-size: 1.2em; margin-bottom: 20px; font-weight: 700; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; position: relative; z-index: 1; color: #2f5597; }
	.listTtl span { display: contents; }
	.strongList li div { margin-bottom: 20px; }	
	.sublistTtl { text-align: center; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	.strongList li { width: 40%; margin: 0 2% 40px; }
	.strongList li:nth-child(3) { width: 40%; margin: 0 30% 40px; }
	.listTtl { font-size: 1.1em; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.strongList li { width: 40%; margin: 0 2% 40px; }
	.strongList li:nth-child(3) { width: 40%; margin: 0 30% 40px; }
	.listTtl { font-size: 1.1em; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.listTtl { font-size: 1.1em; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.listTtl { font-size: 1.1em; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.listTtl { font-size: 1.1em; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}
@media screen and (min-width: 1490px) {
}

/*-- Corporate Tbl  -------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.corpoTbl { width: 100%; }
	.corpoTbl th { background: #2F5597; color: #fff; vertical-align: middle; font-size: 1.1rem; display: block; padding: 6%; }
	.corpoTbl th span { opacity: 0.5; font-family:'Roboto Condensed', sans-serif; display: block; font-size: 0.5em;}
	.corpoTbl td { padding: 6%; display: block; font-size: 0.9rem; }
	.corpoTbl td dl { font-size: 0.9rem; }
	.corpoTbl td dl dt { text-align: center; padding: 4%; background: #f4f4f4; }
	.corpoTbl td dl dd { padding: 4%; }
}
@media screen and (min-width: 768px) {
	.corpoTbl { width: 100%; }
	.corpoTbl th { background: #2F5597; color: #fff; vertical-align: middle; font-size: 1.5rem; width: 24%; }
	.corpoTbl th span { opacity: 0.5; font-family:'Roboto Condensed', sans-serif; display: block; font-size: 0.5em;}
	.corpoTbl td { padding: 0px 20px; }
	.corpoTbl td dl { display: flex; justify-content: flex-start; padding: 5px 0; font-size: 0.9rem; }
	.corpoTbl td dl dt { width: 20%; text-align: center }
	.corpoTbl td dl:nth-child(odd) { background: #f4f4f4; }
}