@charset "utf-8";

/*
  File Name   : style.css
  Description : MEMBEページ /japanese/member/ のスタイル
*/

:root {
	--keyColor: #014290;
	--keyColor2: #109cd0;
	--keyColor3: #3f9c8e;
}

body {
	font-size: 1.6em;
	line-height: 1.8;
	padding-bottom: 11.5em;/* for fixedFooter */
}

#main {
	padding-top: 0 !important;
}

.fixedFooter {
	position: fixed;
	left:0;
	bottom: 0;
	padding: 2em 0;
	width: 100%;
	background: #fff;
	text-align: center;
	transform: translateY(100%);
	transition: all .35s ease-out;
	z-index: 99;
}

.fixedFooter.open {
	transform: translateY(0);
	box-shadow: 0 -1px 5px rgba(0,0,0,.1);
}

.fixedFooter .btn {
	margin: 0 auto;
}

.fixedFooter .btn + .btn {
	margin-top: 10px;
}

@media print,screen and (min-width: 480px) {
	.fixedFooter {
		padding: 1.25em 0 2em;
	}

	.fixedFooter .btn {
		display: inline-block;
		margin: 0;
		width: 28%;
	}

	.fixedFooter .btn + .btn {
		margin-left: 4%;
	}

	body {
		padding-bottom: 7em;/* for fixedFooter */
	}
}

.section {
	padding: 4em 0;
}

.colWrap {
	margin-bottom: 0;
}

.ttl {
	margin: 0 0 .55em;
	font-size: 2em;
	font-weight: bold;
	color: var(--keyColor);
	letter-spacing: .04em;
	line-height: 1.4;
}

.ttl_m {
	margin: 0 0 .7em;
	font-size: 1.8em;
	font-weight: bold;
	color: var(--keyColor2);
	letter-spacing: .04em;
	line-height: 1.4;
}

.ttl_m .sub {
	display: block;
	font-size: .72em;
	margin: .35em 0 0;
}

a.btn {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 0.85em 0.5em;
	width: 100%;
	min-width: 13em;
	max-width: 17em;
	line-height: 1.3;
	color: #fff !important;
	font-size: 1.15em;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
}

.btn + .btn {
	margin-top: 1.25em;
}

.btn.reverse {
	border: 1px solid var(--keyColor3);
	color: var(--keyColor3) !important;
	cursor: pointer;
	transition: all .3s ease-out;
}

.btn.reverse:after {
	background: none;
	position: absolute;
	top: 50%;
	right: 1em;
	margin: 0;
	width: .35em;
	height: 0.35em;
	border-top: 2px solid var(--keyColor3) !important;
	border-right: 2px solid var(--keyColor3) !important;
	transform: translateY(-50%) rotate(45deg);
}

.btn.reverse:hover {
	background:var(--keyColor3);
	color: #fff !important;
}

.btn.reverse:hover:after {
	border-color: #fff !important;
}

/* --------------------
  introSection
  --------------------- */
.introSection {
	position: relative;
	margin-top: -30px;
	padding: 0;
}

.introSection:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	/*padding: 7% 0 0;*/
	padding: 90px 0 0;
	background: #3aafdb;
}

@media print,screen and (max-width: 1200px) {
	.introSection:before {
		padding: 12% 0 0;
	}
}

.introSection .intro {
	position: relative;
	padding: 2.5em 2.5em;
	max-width: -80px;
	background: rgba(255, 255, 255, .7);
}

.btn_login {
	background: var(--keyColor);
}

.btn_registration {
	background: var(--keyColor2);
}

@media print, screen and (min-width: 768px) {
	.introSection .colWrap .textFrame {
		padding-right: 2.5em;
		flex: 0 1 66%;
	}

	.introSection .colWrap .loginFrame {
		flex: 0 1 auto;
		max-width: 34%;
	}
}

/* --------------------
  serviceSection
  --------------------- */
.serviceSection  {
	padding-top: 1.5em;
}

.serviceSection .ttl {
	position: relative;
	margin-bottom: 1.5em;
	padding-top: .855em;
	font-size: 1.75em;
	color: inherit;
	text-align: center;
}

.serviceSection .ttl:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 2.25em;
	height: 2px;
	background: var(--keyColor2);
	transform: translateX(-50%);
}

.serviceSection .article + .article {
	margin-top: 3em;
}

.serviceSection .imgFrame img {
	display: block;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 50%;
	transform: scale(.935);
	transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1);
}

.serviceSection .imgFrame .active img {
	transform: scale(1);
}

.serviceSection .btn_modal_open {
	margin: 1.75em 0 0;
}

.serviceSection .subBox {
    margin: 1.5em 0 0;
}

.serviceSection .subBox .head {
    position: relative;
    font-size: 1.15em;
    font-weight: bold;
    margin-bottom: .85em;
    padding-bottom: .35em;
    border-bottom: 1px solid rgb(1 66 144 / 35%);
    position: relative;
    /* color: var(--keyColor); */
}

h4.head:before {
    content: "";
    position: relative;
    top: -2px;
    display: inline-block;
    margin: 0 .75em 0 0;
    width: 3px;
    height: 1em;
    opacity: .7;
    background: var(--keyColor);
    vertical-align: middle;
}

.list_arrow li {
    position: relative;
    padding-left: 1.5em;
}

.list_arrow li:before {
    content: "";
    display: block;
    position: absolute;
    left: .35em;
    top: .725em;
    width: .275em;
    height: .275em;
    border-top: 2px solid var(--keyColor);
    border-right: 2px solid var(--keyColor);
    transform : rotate(45deg);
    opacity: .7;
}
/* usageFrame */
.usageFrame {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 100;
	background: rgba(0,0,0,.5);
}

.usageFrame.active {
	opacity: 1;
	pointer-events: visible;
}

.usageFrame  .container {
	position: relative;
}

.usageFrame .btn_modal_close {
	position: absolute;
	right: .5em;
	top: -.25em;
	width: 1.35em;
	height: 1.35em;
	line-height: 1.3em;
	font-size: 2.35em;
	color: #fff !important;
	background: #aaa;
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	cursor: pointer;
	transition: all .3s ease-out;
	text-decoration: none !important;
	text-align: center;
}

.usageFrame .btn_modal_close:hover {
	background: var(--keyColor2);
	transform: rotate(90deg);
}

.usageFrame .inner {
	padding: 3em 4em;
	background: #f8f8f8;
}


.usageFrame .title {
	margin: 0 0 1.25em;
	font-size: 1.8em;
	font-weight: bold;
	color: var(--keyColor2);
	letter-spacing: .04em;
	line-height: 1.3;
	text-align: center;
}

.usageFrame .box {
	margin: 0 auto 2.5em;
}

.usageFrame .box:last-child {
	margin-bottom: 0;
}

.usageFrame .box img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
}

.usageFrame .box .txt {
	margin: 1.4em 0 0;
	font-size: 1.1em;
	font-weight: bold;
}

@media print, screen and (min-width: 768px) {
	.serviceSection .textFrame {
		flex: 1 1 65%;
		padding: 0 5% 0 0;
	}

	.serviceSection .textFrame,
	.serviceSection .imgFrame {
		display: flex;
		align-items: center;
		align-content: center;
	}

	.serviceSection .rtl .textFrame {
		padding: 0 0 0 5%;
	}

	.serviceSection .imgFrame {
		flex: 0 1 35%;
	}

	.usageFrame .colWrap > .box {
		margin: 0;
		width: calc(50% - 2.5em);
	}
}


/* ---------------------------------------------
  991px以下
 ----------------------------------------------  */
@media print, screen and (max-width: 991px) {
	.ttl {
		font-size: 1.7em;
	}

	.introSection:before {
		padding: 15% 0 0;
	}
}

/* ---------------------------------------------
  767px以下
 ----------------------------------------------  */
@media print, screen and (max-width: 767px) {
	body {
		font-size: 1.4em;
	}

	.ttl {
		font-size: 1.5em;
	}

	.ttl_m {
		font-size: 1.35em;
		text-align: center;
	}

	.introSection:before {
		padding: 0;
		height: 110px;
	}

	.introSection .intro {
		margin: 1em auto 0;
		padding: 2em 1.7em;
	}

	.introSection .loginFrame {
		margin-top: 2.5em;
	}

	/* --------------------
	  serviceSection
	  --------------------- */
	.serviceSection .ttl {
		font-size: 1.4em;
	}

	.serviceSection .imgFrame {
		margin-top: 2.5em;
	}

	.serviceSection .btn_modal_open  {
		margin: 1.5em auto;
	}

	.usageFrame {
		/*margin: 3em 0;
		padding: 3em 0;*/
		align-items: flex-start;
		overflow: auto;
	}

	.usageFrame .container {
		margin-top: 70px;
	}

	.usageFrame .title {
		font-size: 1.4em;
	}

	.serviceSection .imgFrame img,
	.usageFrame .box img {
		max-width: 300px;
	}

}

/* ---------------------------------------------
  360px以下
 ----------------------------------------------  */
@media print, screen and (max-width: 360px) {

}




/* ================================
  animation
  ================================ */
.fadeIn {
  position: relative;
  opacity: 0;
}

.fadeIn_in-row .animItem {
  position: relative;
  opacity: 0;
}

.fadeIn.active,
.fadeIn_in-row .animItem.active {
  opacity: 1;
  -webkit-transition: all 2.75s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 2.75s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 2.75s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 2.75s cubic-bezier(0.23, 1, 0.32, 1);
}

.fadeInUp {
  position: relative;
  opacity: 0;
  -webkit-transform: translate(0, .5em);
  -moz-transform: translate(0, .5em);
  -o-transform: translate(0, .5em);
  transform: translate(0, .5em);
}

.fadeInUp.active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}