@charset "utf-8";

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 400;
	src:
		local('NotoSansJP-Regular.otf'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }

 @font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 500;
	src:
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }

 @font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: bold;
	src:
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }

 @font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 100;
	src:
		url(//fonts.gstatic.com/s/catamaran/v3/ilWHBiy0krUPdlmYxDuqC6CWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }
 @font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: normal;
	src:
		url(//fonts.gstatic.com/s/catamaran/v3/MdNkM-DU8f6R-25Nxpr_XA.ttf) format('truetype');
 }
 @font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 500;
	src:
		url(//fonts.gstatic.com/s/catamaran/v3/83WSX3F86qsvj1Z4EI0tQi3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
 }

/*
https://codepen.io/pribilinskiy/details/dPyaQM
{
	"kind": "webfonts#webfont",
	"family": "Catamaran",
	"category": "sans-serif",
	"variants": [
		"100",
		"200",
		"300",
		"regular",
		"500",
		"600",
		"700",
		"800",
		"900"
	],
	"subsets": [
		"latin",
		"tamil",
		"latin-ext"
	],
	"version": "v3",
	"lastModified": "2017-08-31",
	"files": {
		"100": "http://fonts.gstatic.com/s/catamaran/v3/ilWHBiy0krUPdlmYxDuqC6CWcynf_cDxXwCLxiixG1c.ttf",
		"200": "http://fonts.gstatic.com/s/catamaran/v3/hFc-HKSsGk6M-psujei1MC3USBnSvpkopQaUR-2r7iU.ttf",
		"300": "http://fonts.gstatic.com/s/catamaran/v3/Aaag4ccR7Oh_4eai-jbrYC3USBnSvpkopQaUR-2r7iU.ttf",
		"500": "http://fonts.gstatic.com/s/catamaran/v3/83WSX3F86qsvj1Z4EI0tQi3USBnSvpkopQaUR-2r7iU.ttf",
		"600": "http://fonts.gstatic.com/s/catamaran/v3/a9PlHHnuBWiGGk0TwuFKTi3USBnSvpkopQaUR-2r7iU.ttf",
		"700": "http://fonts.gstatic.com/s/catamaran/v3/PpgVtUHUdnBZYNpnzGbScy3USBnSvpkopQaUR-2r7iU.ttf",
		"800": "http://fonts.gstatic.com/s/catamaran/v3/6VjB_uSfn3DZ93IQv58CmC3USBnSvpkopQaUR-2r7iU.ttf",
		"900": "http://fonts.gstatic.com/s/catamaran/v3/5ys9TqpQc9Q6gHqbSox6py3USBnSvpkopQaUR-2r7iU.ttf",
		"regular": "http://fonts.gstatic.com/s/catamaran/v3/MdNkM-DU8f6R-25Nxpr_XA.ttf"
	}
},
*/


/* common
==========================================*/
body {
	color: #333;
	font-family: 'Noto Sans Japanese', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
	letter-spacing: .04em;
	word-wrap : break-word;
	overflow-wrap : break-word;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	     -o-text-size-adjust: 100%;
	        text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
}
.modePC.modeSP {
	opacity: 0;
}
.modePC {
	min-width: 1280px;
}
.closePage {
	opacity: 0;
	-webkit-transition: opacity .3s;
	        transition: opacity .3s;
}
.en { font-family: Catamaran, 'Noto Sans Japanese', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif; }
.en i {
	font-family: 'Noto Sans Japanese', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
}

.modePC.modeSP {
	opacity: 0;
}
.modePC {
	font-size: 16px;
	line-height: 27px;
	padding-top: 100px;
}
.modeSP {
	font-size: 26px;
	line-height: 1.8;
	padding-top: 90px;
}

.androidUA * {
	max-height: 999999px;
}

:hover{} /* Fixes for IE10 */

a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #666;
}
a.txt {
	text-decoration: underline;
}
a.txt:hover {
	text-decoration: none;
}

/* clearfix */
.clear:after {
	content: "";
	display: block;
	clear: both;
}

.modePC .hiddenPC,
.modeSP .hiddenSP {
	display: none !important;
}

.modePC .wrapper {
	width: 1200px;
	margin: 0 auto;
}
.modeSP .wrapper {
	width: 100%;
	overflow: hidden;
}
.modePC .container {
	width: 1200px;
	margin: 0 auto;
}
.modeSP .container {
	width: 100%;
	overflow: hidden;
}
svg {
	color: #333;
	fill: #333;
}
.svgs {
	display: none;
}
.modePC h2 {
	font-size: 30px;
}
.modeSP h2 {
	font-size: 50px;
}

.c_red {
	color: #f00;
}

/* button
==========================================*/
.btnA {
	background-color: #333;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btnA:hover {
	background-color: #666;
	color: #fff;
}
.modePC .btnA {
	width: 180px;
	height: 50px;
	font-size: 13px;
}
.modeSP .btnA {
	width: 241px;
	height: 66px;
	font-size: 22px;
}
.modePC .btnA svg {
	fill: #fff;
	width: 8px;
	height: 11px;
	margin-top: 3px;
}
.modeSP .btnA svg {
	fill: #fff;
	width: 14px;
	height: 20px;
	margin-top: -2px;
	margin-top: 3px;
}
.btnA svg:nth-child(1) {
	margin-right: 16px;
}
.btnA svg:nth-child(2) {
	margin-left: 16px;
}
img {
	object-fit: cover;
}
* {
	box-sizing: border-box;
}


/* header
==========================================*/
header .bar {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #fff;
}
.modePC header .bar {
	min-width: 1280px;
	height: 100px;
}
.modeSP header .bar {
	height: 90px;
}
.modePC header .bar .container {
	width: calc( 100vw - 80px );
	min-width: 1200px;
	height: 60px;
	margin-top: 40px;
	position: relative;
}
.modeSP header .bar .container {
	width: 100%;
	height: 100%;
}
.modePC header .bar img {
	width: 326px;
	height: 38px;
	position: absolute;
	top: 2px;
	left: 20px;
}
.modeSP header .bar img {
	width: 326px;
	height: 38px;
	position: absolute;
	top: 18px;
	left: 20px;
}
.modePC header .bar a:nth-of-type(2) {
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	right: 0;
}
.modePC header .bar svg {
	width: 25px;
	height: 21px;
	height: 100%;
	position: absolute;
	right: 17px;
}
.modeSP header .bar svg {
	width: 37px;
	height: 32px;
	position: absolute;
	right: 26px;
	top: 29px;
}


/* header menu
==========================================*/
header .p01 {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
	background-color: transparent;
		z-index: 10;
		display: none;
}
header .p02 {
	width: 0;
	position: fixed;
	top: 40px;
	z-index: 11;
	max-height: 100vh;
	-webkit-transition: width .3s;
			transition: width .3s;
	white-space: nowrap;
}
.modePC header .p02 {
	background-color: #f2f2f2;
	height: calc( 100vh - 80px );
	right: 40px;
	overflow: auto;
}
@media all and (-ms-high-contrast: none){ /* IE10~ */
	.modePC header .p02 {
		overflow: hidden;
	}
	.modePC header.open .p02 {
		overflow-y: scroll;
	}
}
@supports (-ms-ime-align:auto) { /* Edge */
	.modePC header .p02 {
		overflow: hidden;
	}
	.modePC header.open .p02 {
		overflow-y: scroll;
	}
}
.modeSP header .p02 {
	background-color: transparent;
	height: 100vh;
	right: 0;
	top: 0;
	z-index: 11;
	overflow-y: scroll;
}
header.open .p01 {
	display: block;
}
.modePC header.open .p01 {
	background-color: rgba(0,0,0,.3);
}

.modePC header.open .p02 { width: 455px; }
.modeSP header.open .p02 { width: 640px; }
.modePC header .p02 .toggle {
	background-size: 12px 12px !important;
}
.modePC header .p02 .open {
	background-size: 12px 2px !important;
}
.modeSP header .p02 .toggle {
	background-size: 24px 24px;
}
.modeSP header .p02 .open {
	background-size: 24px 4px;
}
.modePC header .p02 .toggle { background: url(/img/head/plus.png)  300px center no-repeat; }
.modePC header .p02 .open	{ background: url(/img/head/minus.png) 300px center no-repeat; }
.modeSP header .p02 .toggle { background: url(/img/head/plus.png)  586px center no-repeat; }
.modeSP header .p02 .open	{ background: url(/img/head/minus.png) 586px center no-repeat; }
header .p02 dt a {
	display: block;
	border-bottom:none;
}
header .p02 dd a {
	display: block;
	border-bottom:none;
}

.modePC header .p02 dt a svg {
	margin-top: 4px;
	margin-left: 8px;
	width: 16px;
	height: 16px;
}
.modeSP header .p02 dt a svg {
	margin-left: 10px;
	width: 26px;
	height: 26px;
}

header .p02 dd ul { display: none;}
header .p02 .b1 {
	height: 80px;
	box-sizing: border-box;
	overflow: hidden;
}
.modePC header .p02 .b1 {
	height: 50px;
}
.modeSP header .p02 .b1 {
	position: relative;
}
.modeSP header .p02 .b1 a {
	background-color: #fff;
	width: 80px;
	height: 80px;
	position: absolute;
	right: 0;
}

.modePC header .p02 .b1 > a svg {
	width: 20px;
	height: 20px;
	float: right;
	margin-right: 20px;
	margin-top: 20px;
}
.modeSP header .p02 .b1 > a svg {
	width: 37px;
	height: 90px;
	margin-left: 17px;
}
.modeSP header .p02 .b2 {
	background-color: #f2f2f2;
	height: calc( 100vh - 80px );
	overflow: scroll;
	padding-top: 30px;
	padding-bottom: 100px;
}
header .p02 dt {
	font-weight: 500;
}
.modePC header .p02 dt {
	font-size: 20px;
	height: 48px;
	line-height: 48px;
	padding-left: 80px;
}
.modeSP header .p02 dt {
	font-size: 30px;
	padding-left: 100px;
	height: 67px;
	line-height: 80px;
}
.modePC header .p02 dd {
	font-size: 14px;

	padding-left: 100px;
	line-height: 30px;
}
.modeSP header .p02 dd {
	font-size: 24px;
	padding-left: 140px;
	line-height: 60px;
}
header .p02 dd ul {
	padding-bottom: 10px;
}
footer .sns svg,
header .sns svg {
	fill: #333;
}
footer .sns a:hover svg,
header .sns a:hover svg {
	fill: #666;
}
.modePC header .p02 .sns svg {
	width: 30px;
	height: 30px;
}
.modeSP header .p02 .sns svg {
	width: 55px;
	height: 55px;
}
header .p02 .sns {
	display: flex;
	justify-content: flex-start;
}
.modePC header .p02 .sns {
	padding-left: 80px;
	margin-top: 32px;
}
.modeSP header .p02 .sns {
	margin-top: -1px;
	position: relative;
	padding-top: 50px;
	padding-left: 100px;
	padding-bottom: 60px;
}
header .p02 .sns li:nth-of-type(n+2) {
	margin-left: 30px;
}




body.menuStop {
	overflow: hidden;
}
body.modeSP.menuStop {
	position: fixed;
}
header .headerNav dt {
	position: relative;
}
header .headerNav .current:not(.toggle) a {
	/*pointer-events: none;*/
}
header .headerNav .current:before {
	content: "";
	display: block;
	border-radius: 50%;
	background-color: #333;
	position: absolute;
}
.modePC header .headerNav .current:before {
	width: 10px;
	height: 10px;
	left: 40px;
	top: 17px;
}
.modeSP header .headerNav .current:before {
	width: 20px;
	height: 20px;
	left: 50px;
	top: 29px;
}

header .official{}
.modePC header .official{
	margin-top: 30px;
	padding-left: 80px;
}
.modeSP header .official{
	margin-top: 50px;
	padding-left: 100px;
}

header .official p:nth-of-type(1){
	font-weight: bold;
	color: #999;
}
.modePC header .official p:nth-of-type(1){
	font-size:  15px;
	margin-bottom: 10px;
}
.modeSP header .official p:nth-of-type(1){
	font-size:  24px;
	margin-bottom: 15px;
}

header .official a{
	font-weight: bold;
	color: #777;
}
.modePC header .official a{
	line-height: 30px;
	font-size: 14px;
}
.modeSP header .official a{
	line-height: 50px;
	font-size: 24px;
}

header .official a svg{
	fill:#999;
}
.modePC header .official a svg{
	width: 12px;
	height: 12px;
	margin-left: 7px;
	padding-top: 2px;
}
.modeSP header .official a svg{
	width: 24px;
	height: 24px;
	margin-left: 10px;
	padding-top: 3px;
}




/* footer
==========================================*/
footer {
	background-color: #f2f2f2;
}
.modePC footer {
	min-width: 1280px;
	padding: 50px 0;
}
.modeSP footer {
	padding: 70px 0;
}
.modePC footer .container {
	width: 1024px;
}
.modeSP footer .container {
	width: 520px;
	margin: 0 auto;
}
.modePC footer .u1 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.modePC footer .u1 svg {
	width: 231px;
	height: 20px;
}
.modeSP footer .u1 svg {
	width: 500px;
	height: 45px;
}
.modeSP footer .u1 > li:nth-of-type(2) {
	margin-top: 60px;
}
.modeSP footer .u1 > li:nth-of-type(3) {
	margin-top: 60px;
}
.modePC footer .u1 h2 {
	width: 314px;
	border-bottom: 1px solid #ccc;
	font-size: 18px;
	line-height: 50px;
	margin-bottom: 20px;
}
.modeSP footer .u1 h2 {
	font-size: 33px;
	border-bottom: 2px solid #ccc;
	line-height: 80px;
	margin-bottom: 30px;
}
footer .sns {
	display: flex;
	justify-content: flex-start;
}
.modePC footer .sns li:nth-of-type(n+2) {
	margin-left: 20px;
}
.modeSP footer .sns li:nth-of-type(n+2) {
	margin-left: 30px;
}
.modeSP footer li:nth-of-type(3) p:nth-of-type(1){
	font-size: 30px;
	line-height: 40px;
}
.modeSP footer li:nth-of-type(3) p:nth-of-type(n+2){
	font-size: 22px;
	margin: 40px 0 60px;
}
.modeSP footer li:nth-of-type(3) p:nth-of-type(3){
	letter-spacing: 0px;
}
.modePC footer .sns svg {
	width: 30px;
	height: 30px;
}
.modeSP footer .sns svg {
	width: 55px;
	height: 55px;
}
.modeSP footer .u2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.modePC footer .u2 svg {
	width: 6px;
	height: 8px;
	margin-right: 10px;
}
.modeSP footer .u2 svg {
	width: 9px;
	height: 13px;
	margin-right: 20px;
}
.modePC footer svg.tab {
	width: 13px !important;
	height: 13px !important;
	margin-left: 7px;
}
.modeSP footer svg.tab {
	width: 22px !important;
	height: 22px !important;
	margin-left: 12px;
}
.modePC footer .u2 li {
	height: 32px;
}
.modeSP footer .u2 li {
	width: 260px;
	height: 68px;
}
footer .u2 li a {
	display: block;
	color: #333;
	padding-left: 1em;
	text-indent: -1em;
}
.modePC footer li p:nth-of-type(n+2) {
	font-size: 13px !important;
	margin: 15px 0 30px;
}
.modePC footer .u2 a {
	font-size: 14px;
}
.modePC footer .copy{position: relative;}

.modePC footer .copy span {
	color: #8a8a8a;
	font-size: 9px;
	margin-left: 30px;
}
.modeSP footer .copy {
	display: block;
	text-align: center;
}
.modeSP footer .copy span {
	margin-top: 45px;
}
.modePC footer .copy img {
	width: 141px;
	height: 38px;
}


.modePC footer .u1 .officialSns {
	margin-top: 53px;
}
.modeSP footer .u1 .officialSns {
	margin-top: 60px;
}

footer .u1 .official li {}
.modePC footer .u1 .official li {
	height: 32px;
}
.modeSP footer .u1 .official li {
	width: 400px;
	height: 68px;
}

footer .u1 .official li a {}
.modePC footer .u1 .official li a {
	font-size: 14px;
}
.modeSP footer .u1 .official li a {}

footer .u1 .official li a svg {}
.modePC footer .u1 .official li a svg {
	width: 6px;
	height: 8px;
	margin-right: 10px;
}
.modeSP footer .u1 .official li a svg {
	width: 9px;
	height: 13px;
	margin-right: 20px;
}



.modePC .under_link{
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 11px;
}
.modeSP .under_link{
	text-align: center;
	font-size: 22px;
	margin-bottom: 70px;
}
.under_link ul{}

.modePC .under_link li{
	float: left;
}

.modeSP .under_link li{
	text-align: left;
	width: 50% ;
}
.modeSP .under_link li:nth-child(odd){
	float: left;
}
.modeSP .under_link li:nth-child(even){
	float: right;
}

.under_link a{
	color: #8a8a8a;
}
.modePC .under_link a{
	margin-left: 30px;
}
.modePC .under_link a{
	margin-left: 30px;
}

.w01 {
	background-color: rgba(255, 255, 255, .9);
}
.fcc {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.fcr {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}
.fcs {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.fsb {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* mainVisual
==========================================*/
.mainVisual {
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 120px;
	position: relative;
	display: flex;
	align-items: center;
}
.modePC .mainVisual {
	justify-content: center;
}
.modeSP .mainVisual {
	justify-content: flex-start;
}
.modePC .mainVisual {
	width: calc( 100vw - 80px );
	margin-left: 40px;
	height: calc( 100vh - 140px );
}/*
.modePC.touchUA .mainVisual {
	height: calc( 100vh - 800px );
}*/
@media (max-width: 1280px) {
	.modePC .mainVisual {
		width: 1200px;
	}
}
.modeSP .mainVisual {
	width: 100%;
	height: calc( 100vh - 90px ); /* header 90px */
}
.mainVisual > .an-move,
.mainVisual > .an-move > img,
.mainVisual > img {
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.modePC .mainVisual > .an-move > img,
.modePC .mainVisual > img {
	width: calc( 100vw - 80px );
	min-width: 1200px;
}
.modeSP .mainVisual > .an-move > img,
.modeSP .mainVisual > img {
	width: 640px;
}
.mainVisual .t01 {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
}
.modeSP .mainVisual .w01.v2,
.modeSP .mainVisual h1.v2 {
	position: absolute;
	width: 600px;
	margin-left: 20px;
	height: 378px;
	top: calc( 50vh - 189px - 50px );
}
.modePC .mainVisual h1 .en {
	font-size: 48px;
	line-height: 60px;
}
.modeSP .mainVisual h1 .en {
	font-size: 60px;
	line-height: 80px;
}
.modePC .mainVisual h1 .jp {
	font-size: 16px;
}
.modeSP .mainVisual h1 .jp {
	font-size: 26px;
}

/* onepage scroll
==========================================*/
.onepage.container {
	height: 100vh;
}

/* breadcrumb
==========================================*/
.breadcrumb {
	height: 50px;
	line-height: 50px;
	font-size: 13px;
	color: #666;
}
.modeSP .breadcrumb {
	display: none;
}
.breadcrumb li {
	float: left;
}
.breadcrumb li a {
	color: #666;
	border-bottom: 1px solid #666;
}
.breadcrumb li a:hover {
	border: none;
}
.breadcrumb li:last-child a {
	pointer-events: none;
	color: #333;
}
.modePC .breadcrumb {
	margin-top: 100px;
}
.modePC .breadcrumb li:nth-of-type(n+2) {
	margin-left: 15px;
}
.modePC .breadcrumb li:nth-of-type(n+2):before {
	content: ">";
	display: inline-block;
	margin-right: 15px;
	color: #666;
}
.breadcrumb .container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
}
.breadcrumb a {
	height: 100%;
	font-size: 12px;
}
/* toTop
==========================================*/
.modePC .toTop {
	font-size: 12px;
	height: 50px;
	margin-top: -50px;
}
.modeSP .toTop {
	height: 70px;
}
.toTop .container {
	display: flex;
	align-items: center;
	height: 100%;
}
.modePC .toTop .container {
	justify-content: flex-end;
}
.modeSP .toTop .container {
	justify-content: center;
}
.modePC .toTop svg {
	width: 8px;
	height: 5px;
	margin: 0 10px;
}
.modeSP .toTop svg {
	width: 20px;
	height: 14px;
	margin: 0 10px;
}
/* service
==========================================*/
.service-counter * { border-color: rgba(242, 150, 203, 9); }
.service-hoken * { border-color: rgba(195, 225, 164, .9); }
.service-enmusubi * { border-color: rgba(164, 197, 228, .9); }

/* box21  banner inner link
==========================================*/
.modePC .box21 {
	margin-bottom: 100px;
}
.modeSP .box21 {
/*	margin-bottom: 150px;*/
}
.modePC .box21 ul {
	width: 1200px;
}
.box21 li {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.modePC .box21 li .an-lr {
	height: 340px;
}
.modePC .box21 li {
	padding: 0 120px;
	height: 340px;
}
.modeSP .box21 li .an-lr {
	width: 640px;
	height: 755px;
}
.modeSP .box21 li {
	height: 840px;
	padding: 0;
}
.modePC .box21 li:nth-of-type(odd) {
	justify-content: flex-end;
}
.modePC .box21 li:nth-of-type(even) {
	justify-content: flex-start;
}
.box21 li .an-lr,
.box21 li img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.modePC .box21 li .an-lr,
.modePC .box21 li img {
	width: 1200px;
}
.modeSP .box21 li img {
	width: 740px;
	height: 350px;
	object-position: -50px -40px;
}
.modePC .box21 li {
	margin-top: 40px;
}
.box21 .tt01 {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.modePC .box21 .tt01 {
	width: 500px !important;
	height: 260px !important;
	position: relative;
	z-index: 2;
	opacity: 0.8;
}
.modeSP .box21 .tt01 {
	width: 600px !important;
	height: 470px !important;
	position: absolute;
	top: 275px;
	left: 20px;
	z-index: 2;
}
.box21 .tt01 p {
	text-align: center;
}
.modePC .box21 .tt01 p {
	margin: 18px 0;
	font-size: 14px;
	line-height: 1.8;
}
.modeSP .box21 .tt01 p {
	margin: 20px 0 40px 0;
	font-size: 24px;
}
/* box31
==========================================*/
.modePC .box31 {
	margin-bottom: 100px;
	margin-top: 0px;
}
.modeSP .box31 {
	margin: 30px 0;
}
.box31 li {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	background-color: #333;
}
.modePC .box31 li {
	height: 340px;
	padding: 0 120px;
}
.modeSP .box31 li {
	height: 560px;
	padding: 0;
	justify-content: center;
}
/* .modePC .box31 li:nth-of-type(odd) {
	justify-content: flex-end;
} */
.modePC .box31 li:nth-of-type(even) {
	justify-content: flex-start;
}
.box31 li img {
	position: absolute;
	top: 0;
	left:0;
	z-index: 1;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	opacity: .6;
}
.modePC .box31 li img {
	width: 1200px;
	height: 340px;
}
.modeSP .box31 li img {
	left:-60%;
	width: 1600px;
	height: 560px;
	object-fit: none;
	font-family: 'object-fit: none;';
}
.modePC .box31 li {
	margin-top: 40px;
}
.box31 .t01 {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	color: #fff;
}
.modePC .box31 .t01 {
	width: 450px;
	height: 260px;
	position: relative;
	z-index: 2;
}
.modeSP .box31 .t01 {
	width: 600px;
	height: 400px;
	z-index: 2;
}
.box31 .t01 p {
	text-align: center;
}
.modePC .box31 .t01 p {
	margin: 25px 0;
	font-size: 14px;
	line-height: 1.8;
}
.modeSP .box31 .t01 p {
	margin: 40px 0;
	font-size: 24px;
}
.box21 .w02 {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	color: #fff;
}
.modePC .box21 .w02 {
	width: 450px;
	height: 260px;
	position: relative;
	z-index: 2;
}
.modeSP .box21 .w02 {
	width: 600px;
	height: 400px;
	position: absolute;
	top: 275px;
	left: 20px;
	z-index: 2;
}
.box21 .w02 p {
	text-align: center;
}
.modePC .box21 .w02 p {
	margin: 25px 0;
}
.modeSP .box21 .w02 p {
	margin: 40px 0;
}

/* member-list
==========================================*/
.modePC .member-list {
	align-items: center;
	height: 220px;
}
.modePC .member-list li {
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modePC .member-list li:hover {
	/* height: 220px !important; */
	transition: height .6s;
}
.modePC .member-list li img {
	height: 220px !important;
}
.modePC .member-list li:hover img {
	transform: scale(1.1);
	transition-property: transform;
	transition-duration: 4s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

}
.modePC .member-list li div {
	opacity: 0;
	transition: opacity .6s;
}
.modePC .member-list li:hover div {
	opacity: 1;
}
.modePC .member-list li div p {
	transform: translate( -200px, 0 );
	transition: transform .6s;
}
.modePC .member-list li:hover div p {
	transform: translate( 0, 0 );
}


/* orientationNtoice
==========================================*/
.orientationNtoice,
.modePC.modeSP .orientationNtoice {
	display: none;
}
@media all and (orientation: landscape) {
	.modeSP {
		overflow: hidden;
		height: 100%
	}
	.modeSP .orientationNtoice {
		background: #000;
		background-size: 60px 60px;
		background-position: 50% 63% ;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		color: #fff;
		height: 100%;
		width: 100%;
	display: table;
	}
	.modeSP .orientationNtoice p.text{
		text-align: center;
		width: 350px;
		position: absolute;
		top: 20%;
		left: 50%;
		margin-left: -175px;
		font-size: 20px;
		line-height: 2;
	}

	@keyframes rz_arrow{
		25%{transform:rotateZ(90deg);}
		50%{transform:rotateZ(180deg);}
		75%{transform:rotateZ(270deg);}
		100%{transform:rotateZ(360deg);}
	}
	.rz_arrow{
		display: block;
		width: 140px;
		height: 140px;
		animation-name:rz_arrow;
		animation-duration:6s;
		animation-iteration-count : infinite;
	}

	@keyframes rz_device{
		0%{transform:rotateZ(-90deg);}
		50%{transform:rotateZ(0deg);}
		100%{transform:rotateZ(0deg);}
	}
	.rz_device{
		display: block;
		width: 140px;
		height: 140px;
		animation-name:rz_device;
		animation-duration:3s;
		animation-iteration-count : infinite;
	}

	.position{
		position: absolute;
		top: 52%;
		left: 50%;
		margin-left: -70px;
	}

	.position svg{
		width: 140px;
		height: 140px;
		fill:#fff;
		color: #fff;
	}
}
/* animation
==========================================*/
.JS-anime.an-fin,
.JS-anime .an-fin {
	transition-property: opacity;
	transition-duration: .6s;
}
.modePC .an-wait:not(.an-sp).an-fin:not(.an-sp),
.modeSP .an-wait:not(.an-pc).an-fin:not(.an-pc),
.modePC .an-wait:not(.an-sp) .an-fin:not(.an-sp),
.modeSP .an-wait:not(.an-pc) .an-fin:not(.an-pc) {
	opacity: 0;
}
.an-lr {
	overf-flow: hidden;
}
.JS-anime .an-lr,
.JS-anime.an-lr {
	transition-property: width;
	transition-duration: .9s;
	transition-timing-function: cubic-bezier(0, .58, .19, 1);
	overflow: hidden;
	/** / transition-duration: 10s; /* debug */
}
.an-move{
	max-width: 100%;
	height: 100%;
}
.JS-anime .an-lr .an-move,
.JS-anime.an-lr .an-move{
	transform: translate(0, 0);
	transition-property: transform;
	transition-duration: .9s;
	transition-timing-function: cubic-bezier(0, .58, .19, 1);
}
.modePC .an-wait:not(.an-sp).an-lr:not(.an-sp),
.modePC .an-wait:not(.an-sp) .an-lr:not(.an-sp),
.modeSP .an-wait:not(.an-pc).an-lr:not(.an-pc),
.modeSP .an-wait:not(.an-pc) .an-lr:not(.an-pc) {
	width: 0 !important;
}
.modePC .an-wait:not(.an-sp).an-lr:not(.an-sp) .an-move,
.modePC .an-wait:not(.an-sp) .an-lr:not(.an-sp) .an-move,
.modeSP .an-wait:not(.an-pc).an-lr:not(.an-pc) .an-move,
.modeSP .an-wait:not(.an-pc) .an-lr:not(.an-pc) .an-move {
	transform: translate(-100px, 0);
}
.modeSP .box21 li .imgTopMessage {
	background-image: url("/img/top-message/top-message.jpg");
	background-size: 100%;
	background-position-y: -170px;
	width: 100%;
	height: 100%;
}
.JS-anime .an-up {
	transform: translate(0, 0);
	transition-duration: .6s;
	transition-property: transform;
}
.modePC .an-wait:not(.an-sp).an-up:not(.an-sp),
.modePC .an-wait:not(.an-sp) .an-up:not(.an-sp){
	transform: translate(0, 10px);
}
.modeSP .an-wait:not(.an-pc).an-up:not(.an-pc),
.modeSP .an-wait:not(.an-pc) .an-up:not(.an-pc) {
	transform: translate(0, 20px);
}

.JS-anime.an-fin.an-up,
.JS-anime .an-fin.an-up {
	transition-property: transform, opacity;
}
.an-not.an-up,
.an-not.an-fin,
.an-not.an-lr {
	transition-property: none !important;
	transition-duration: 0 !important;
	transition-delay: 0 !important;
}
.an-up,
.an-fin,
.an-lr {
	/*** / transition-duration: 2 !important; /* slow debug */
}
.an-w0 { transition-delay: 0; }
.an-w1 { transition-delay: .2s; }
.an-w2 { transition-delay: .4s; }
.an-w3 { transition-delay: .6s; }
.an-w4 { transition-delay: .8s; }
.an-w5 { transition-delay: 1s; }
.an-w6 { transition-delay: 1.2s; }
.an-w7 { transition-delay: 1.4s; }
.an-w8 { transition-delay: 1.6s; }
.an-w9 { transition-delay: 1.8s; }
.an-w10 { transition-delay: 2s; }

/* slow debug **/
/*.an-w0 { transition-delay: 0; }
.an-w1 { transition-delay: 1s; }
.an-w2 { transition-delay: 2s; }
.an-w3 { transition-delay: 3s; }
.an-w4 { transition-delay: 4s; }
.an-w5 { transition-delay: 5s; }
.an-w6 { transition-delay: 6s; }
.an-w7 { transition-delay: 7s; }
.an-w8 { transition-delay: 8s; }
.an-w9 { transition-delay: 9s; }
.an-w10 { transition-delay: 10s; }
*//* */
.modePC .an-w4.underline {
  justify-content: flex-start;
}
.modePC .box03 .an-w4.underline dt {
  padding: 30px 0 0;
  border-bottom: 1px solid #ccc;
}
.modePC .box03 .an-w4.underline dd {
  padding: 30px 10px 30px 0;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
  width: calc(100% - 171px);
}
.modeSP .box03 .an-w4.underline dd {
  border-bottom: 1px solid #ccc;
  padding-bottom: 40px;
}

/* debug
==========================================*/
.debug-font {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
}
.debugHost {
	width: 100%;
	height: 0;
	text-align: center;
	position: fixed;
	z-index: 100;
	top: 15px;
	left: 50%;
	margin-left: -50%;
}
.modeSP .debugHost {
	top: -10px;
}

.debugHost span {
	color: #fff;
	text-shadow: 2px solid #000;
	font-size: 8px;
	line-height: 10px;
	font-weight: bold;
	padding: 4px 10px;
}
/*.w01 { background-color: rgba( 255, 0, 0, .5);} /* debug */

/* 20171220 top-message underline */
.important-message {
	background: -webkit-linear-gradient(transparent 50%, #ffb4f0 0%);
    background: linear-gradient(transparent 50%, #ffb4f0 0%);
}

/* 20171220 toMemberTop btn */
.modePC .toMemberTop {
	font-size:18px;
	margin: 60px 0 20px;
	height: 0;
}
.modePC .toMemberTop .container {
	justify-content: center;
}
.modePC .toMemberTop svg {
	width: 15px;
	height: 12px;
	margin: 0px 8px;
}
.modeSP .toMemberTop {
	font-family: 'Noto Sans Japanese', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
}

/* 相談カウンター　オリコン第1位ロゴ */
@media screen and (min-width:760px) { 
	.soudan_oricon_logo_pc{
		width: 100px;
		position: absolute;
		right: 0;
		top: -40px;
	}
	.soudan_oricon_logo_sp{
		display: none;
	}
	.oricon_note_pc{
		font-size:13px !important;
		margin-top: -10px;
		letter-spacing: normal;
	}
	.oricon_note_sp{
		display: none;
	}
}

@media screen and (max-width:760px) { 
	.soudan_oricon_logo_sp{
		width: 100px;
		position: absolute;
		right: 50px;
	}
	.soudan_oricon_logo_pc{
		display: none;
	}
	.oricon_note_sp{
		font-size:17px !important;
		margin-top: -20px;
		letter-spacing: normal;
	}
	.oricon_note_pc{
		display: none;
	}
}


.modeSP .height760 {
	height: 760px!important
}
@media screen and (min-width:760px) { 
	.movie__tit{
		text-align: center;
		font-size: 48px;
		margin-top: 20px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	.movie__sub{
		text-align: center;
		font-size: 20px;
		margin-bottom: 60px;
	}
	.movie__txt{
		font-size: 28px;
		margin-bottom: 25px;
		font-weight: bold;
	}
	.movie__inner{
		text-align: center;
		margin-bottom: 60px;
	}
	.movie__inner:last-child{
		margin-bottom: 60px;
	}
	.movie__inner iframe{
		width: 1080px;
		height: 608px;
	}
}
@media screen and (max-width:760px) { 
	.movie__tit{
		text-align: center;
		font-size: 54px;
		margin-top: 20px;
		font-weight: bold;
	}
	.movie__sub{
		text-align: center;
		font-size: 24px;
		margin-bottom: 40px;
	}
	.movie__txt{
		font-size: 26px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	.movie__inner{
		text-align: center;
		margin: 0 20px 40px;
	}
	.movie__inner:last-child{
		margin-bottom: 80px;
	}
	.movie__inner iframe{
		width: 560px;
		height: 315px;
	}
}


.mov__txt {
	margin-bottom: 40px;
}
.video-img img {
	width: 480px;
	height: 270px;
	margin-bottom: 12px;
	transition: 0.3s;
}
.video-img-main {
	width: 600px;
	height: 337px;
	margin: 0 auto;
	cursor: pointer;
}
.video-img-main img {
	width: 100%;
	margin-bottom: 12px;
	transition: 0.3s;
}
.video-img:hover img {
	opacity: 0.8;
	cursor:pointer;
}
.video-img-main:hover img {
	opacity: 0.8;
	cursor:pointer;
}
.title__img {
	width: 100%;
	max-width: 270px;
	margin: 0 auto 40px;
}
.title__img img {
	width: 100%;
}
.video__inner {
	display: flex;
	max-width: 1080px;
	width: 100%;
	margin: 0 auto 60px;
    justify-content: space-between;
}
.video__block {
	width: 100%;
	max-width: 480px;
}
.video__block p {
	font-size: 14px;
	text-align: justify;
	line-height: 2;
}
@media screen and (max-width:760px) {
	.video-img img {
		width: 100%;
		height: 100%;
	}
	.video-img-main {
		width: 100%;
		height: 100%;
	}
	.title__img {
		max-width: 320px;
	}
	.video__inner {
		display: block;
		max-width: 760px;
		width: 100%;
	}
	.video__block {
		max-width: 600px;
		margin: 0 auto 40px;
	}
	.video__block p {
		font-size: 26px;
	}
}


.modal-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000000;
	cursor: pointer;
	opacity: 1;
	animation-name:fadeInAnime;
	animation-duration:.3s;
	animation-fill-mode:forwards;
}
@keyframes fadeInAnime{
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}
.modal-video-close {
	opacity: 0
}
.modal-video-close .modal-video-movie-wrap {
	animation-name:fadeOutAnime;
	animation-duration:.2s;
	animation-fill-mode:forwards;
}
@keyframes fadeOutAnime{
	from {
	  opacity: 1;
	}
  
	to {
	  opacity: 0;
	}
}
.modal-video-body {
	max-width: 960px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0 10px;
	display: flex;
	justify-content: center;
	box-sizing: border-box
}
.modal-video-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%
}
@media (orientation: landscape) {
	.modal-video-inner {
		padding: 10px 60px;
		box-sizing: border-box
	}
} 
.modal-video-movie-wrap {
	width: 100%;
	height: 0;
	position: relative;
	padding-bottom: 56.25%;
	background-color: #333;
}
.modal-video-movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.modal-video-close-btn {
	position: absolute;
	z-index: 2;
	top: -45px;
	right: -30px;
	display: inline-block;
	width: 35px;
	height: 35px;
	overflow: hidden;
	border: none;
	background: transparent
}  
@media (orientation: landscape) {
	.modal-video-close-btn {
		top: -30px;
		right: -45px
	}
}
.modal-video-close-btn:before {
	transform: rotate(45deg)
}
.modal-video-close-btn:after {
	transform: rotate(-45deg)
}
.modal-video-close-btn:before, .modal-video-close-btn:after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background: #fff;
	border-radius: 5px;
	margin-top: -6px
}

@media screen and (max-width:760px) {
	.modal-video-close-btn {
		top: -55px;
		right: 0px;
		width: 50px;
		height: 50px;
	}
}

.an-w4 img {
	object-position: -65px 0px;
}

.an-w5 img {
	object-position: 70px 0px;
}