@charset "shift_jis";
/* ======================================================
 * /common-files/css/appli/appli.css
 * ------------------------------------------------------
====================================================== */
/* /appli/index.html
------------------------------------------------------ */
body#appli {
}
body#appli #mainContents {
	width: 100% !important;
	font-family: 'Noto Sans CJK JP';
	color: #333;
}

/* ----- appliheading1 ----- */
body#appli .appliheading1 {
	width: 1200px;
	margin: 0px auto 70px;
}
body#appli .appliheading1 .heading1inner {
	text-align: center;
}
body#appli .appliheading1 .heading1inner > .title {
	font-size: 44px;
	font-size: 4.4rem;
	font-weight: bold;
}
body#appli .appliheading1 .heading1inner > .subtitle {
	font-size: 34px;
	font-size: 3.4rem;
	font-weight: bold;
}
body#appli .appliheading1 .heading1inner > .subtitle > .dotted {
	display: inline-block;
	border-bottom: 4px dotted #dc322c;
}

/* ----- appliVisualarea ----- */
body#appli .appliVisualarea .Visuaimg {
	text-align: center;
}
body#appli .appliVisualarea .appliiconBox {
	display: flex;
	display: -ms-flexbox;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 75px auto 0;
}
body#appli .appliVisualarea .appliiconBox > .iconImg {
	margin-right: 30px;
	margin-left: 85px;
	width: 62px;
}
body#appli .appliVisualarea .appliiconBox > .textbox {
	max-width: 670px;
}
body#appli .appliVisualarea .appliiconBox > .textbox > .text {
	font-size: 22px;
	font-size: 2.2rem;
}
body#appli .appliVisualarea .appliiconBox > .textbox > .applNote {
	position: relative;
	margin-top: 15px;
	padding-left: 1.1em;
	font-size: 16px;
	font-size: 1.6rem;
}
body#appli .appliVisualarea .appliiconBox > .textbox > .applNote > .ast {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

/* ----- appliDLBox ----- */

body#appli .appliDLBox {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 60px;
}
body#appli .appliDLBox > .col:nth-child(2) {
	margin-left: 76px;
}
body#appli .appliDLBox > .col .appliDLBoxlink > img {
	height: 74px;
}
body#appli .appliDLBox > .col .appliDLBoxlink:hover {
	opacity: 0.7;
}
body#appli .appliDLLead {
	margin-top: 60px;
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}
body#appli .appliDLLead + .appliDLBox {
	margin: 30px 0 100px;
}

/* ----- appliPointBox ----- */
body#appli .appliPointBox {
	border-radius: 20px;
	background-color: #fff;
	text-align: center;
}
body#appli .appliPointBoxinner {
	padding: 60px;
}
body#appli .appliPointBox + .appliPointBox {
	margin-top: 60px;
}

/* ----- appliheading2 ----- */
body#appli .appliheading2 .heading2inner > .subtitle {
	display: inline-block;
	padding: 0 50px;
	border: 2px solid #45a2b0;
	border-radius: 30px;
	color: #45a2b0;
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
}
body#appli .appliheading2 .heading2inner > .title {
	margin-top: 30px;
	font-size: 32px;
	font-size: 3.2rem;
	font-weight: bold;
}

/* ----- appliHuman ----- */
body#appli .appliHuman {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 50px;
	padding-right: 88px;
}
body#appli .appliHuman .appliHumanImg {
	margin-right: 30px;
}
body#appli .appliHuman .appliHumanTextbox > .text {
	position: relative;
	width: 384px;
	padding: 32px 10px;
	border: 2px solid #45a2b0;
	border-radius: 20px;
	font-size: 20px;
	font-size: 2rem;
}
body#appli .appliHuman .appliHumanTextbox > .text::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 26px;
	height: 16px;
	top: 80px;
	left: -26px;
	background: url(/appli/img-files/index_bg01-pc.png) no-repeat 0 50%;
}
body#appli .appliHuman.type01 .appliHumanTextbox {
	margin-top: 10px;
}
body#appli .appliHuman.type02 .appliHumanTextbox {
	margin-top: 6px;
}
body#appli .appliHuman.type03 .appliHumanTextbox {
	margin-top: 13px;
}
body#appli .appliHuman.type04 .appliHumanTextbox  {
	margin-top: 34px;
}

/* ----- appliAd ----- */
body#appli .appliAd {
	position: relative;
	margin-top: 100px;
}
body#appli .appliAd .lead {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: bold;
}
body#appli .appliAd .text {
	margin-top: 15px;
	font-size: 20px;
	font-size: 2rem;
}
body#appli .appliAd::after {
	content: "";
	display: inline-block;
	position: absolute;
	border-top: 35px solid #45a2b0;
	border-right: 30px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid transparent;
	top: -68px;
	left: calc(50% - 30px);
}

/* ----- appliAnimationLayout ----- */
body#appli .appliAnimationLayout {
	margin-top: 55px;
}
body#appli .appliAnimationLayout > .appliAnimationInner {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

/* ----- appliAnimationLayout type01 ----- */
body#appli .appliAnimationLayout.type01 > .appliAnimationInner {
	width: 620px;
}
body#appli .appliAnimationLayout.type01 > .appliAnimationInner > .onpImg {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(25px);
}
body#appli .appliAnimationLayout.type01.is-active > .appliAnimationInner > .onpImg {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity,transform;
	transition-duration: 400ms;
	transition-delay: 0s;
	transition-timing-function: ease-in;
}
body#appli .appliAnimationLayout.type01 > .appliAnimationInner > .balloonImg {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(50px);
}
body#appli .appliAnimationLayout.type01.is-active > .appliAnimationInner > .balloonImg {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity,transform;
	transition-duration: 500ms;
	transition-delay: 400ms;
	transition-timing-function: ease-in;
}

/* ----- appliAnimationLayout type02 ----- */
body#appli .appliAnimationLayout.type02 > .appliAnimationInner {
	width: 502px;
}
body#appli .appliAnimationLayout.type02 > .appliAnimationInner > .balloonImg {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(50px);
}
body#appli .appliAnimationLayout.type02.is-active > .appliAnimationInner > .balloonImg {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity,transform;
	transition-duration: 500ms;
	transition-delay: 0s;
	transition-timing-function: ease-in;
}

/* ----- appliAnimationLayout type03 ----- */
body#appli .appliAnimationLayout.type03 > .appliAnimationInner {
	width: 654px;
}
body#appli .appliAnimationLayout.type03 > .appliAnimationInner > .balloonImg01 {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(50px);
}
body#appli .appliAnimationLayout.type03.is-active > .appliAnimationInner > .balloonImg01 {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity,transform;
	transition-duration: 500ms;
	transition-delay: 0;
	transition-timing-function: ease-in;
}
body#appli .appliAnimationLayout.type03 > .appliAnimationInner > .balloonImg02 {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(50px);
}
body#appli .appliAnimationLayout.type03.is-active > .appliAnimationInner > .balloonImg02 {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity,transform;
	transition-duration: 500ms;
	transition-delay: 600ms;
	transition-timing-function: ease-in;
}

/* ----- appliAnimationLayout type04 ----- */
body#appli .appliAnimationLayout.type04 > .appliAnimationInner {
	width: 600px;
}
body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .balloonImg {
	position: absolute;
	top: 0;
	opacity: 0;
	transform: translateY(50px);
}
body#appli .appliAnimationLayout.type04.is-active > .appliAnimationInner > .balloonImg {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity,transform;
	transition-duration: 500ms;
	transition-delay: 0s;
	transition-timing-function: ease-in;
}
body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .meterImg {
	position: absolute;
	top: 0;
	z-index: 1;
}
body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .meterImg .meterImginner {
	width: 68%;
	overflow: hidden;
	margin: 0 0 0 auto;
}
body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .meterImg .meterImginner > img {
	width: 147%;
	max-width: none;
	transform: translateX(-68%);
}
body#appli .appliAnimationLayout.type04.is-active > .appliAnimationInner > .meterImg .meterImginner > img {
	transform: translateX(-32%);
	transition-property: opacity,transform;
	transition-duration: 600ms;
	transition-delay: 1000ms;
	transition-timing-function: ease-in;
}
body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .percentImg{
	position: absolute;
	top: 0;
	z-index: 2;
	opacity: 0;
}
body#appli .appliAnimationLayout.type04.is-active > .appliAnimationInner > .percentImg{
	opacity: 1;
	transition-property: opacity;
	transition-duration: 400ms;
	transition-delay: 1800ms;
	transition-timing-function: ease;
}

/* ----- appliUseButton ----- */
body#appli .appliUseButton {
	width: 900px;
	margin: 0 auto;
	text-align: center
}
body#appli .appliUseButton .appliUseButtonType {
	display: block;
	position: relative;
	padding: 15px;
	border: 2px solid #d6d6d6;
	border-radius: 10px;
	font-size: 24px;
	font-size: 2.4rem;
	text-decoration: none;
	color: #333;
}
body#appli .appliUseButton .appliUseButtonType:hover{
	opacity: 0.7;
}
body#appli .appliUseButton .appliUseButtonType::after {
	content: "";
	display: inline-block;
	position: absolute;
	background: url(/appli/img-files/index_ic02.png) no-repeat 0 50%;
	background-size: 15px 26px;
	width: 15px;
	height: 26px;
	top: calc(50% - 13px);
	right: 22px;
}

/* ----- appliNoteList ----- */
body#appli .appliNoteList {
	margin-bottom: 40px;
}
body#appli .appliNoteList > li {
	position: relative;
	padding-left: 1.2em;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 2.1;
}
body#appli .appliNoteList > li > .ast {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

/* ----- appliWidelayout ----- */
body#appli .appliWidelayout {
	margin-top: 70px;
}
body#appli .appliWidelayout .appliWidelayoutWrap {
	background: #c8eafa;
}
body#appli .appliWidelayout .appliWidelayoutWrap .appliWidelayoutInner {
	width: 1200px;
	margin: 0 auto;
	padding: 50px 0 60px;
	text-align: center;
}

/* ----- appliWrap ----- */
body#appli .appliWrap {
	width: 1200px;
	margin: 70px auto 0;
}

/* ----- appliheading3 ----- */
body#appli .appliheading3 {
	margin-top: 50px;
}
body#appli .appliheading3 .heading3inner > .subtitle {
	display: inline-block;
	padding: 3px 50px;
	border-radius: 30px;
	background: #4599b1;
	color: #ffffff;
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
}
body#appli .appliheading3 .heading3inner > .title {
	margin-top: 12px;
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
}

/* ----- appliEpisodeBox ----- */
body#appli .appliEpisodeBox {
	font-size: 20px;
	font-size: 2.0rem;
}

/* ----- movieContents ----- */
body#appli .movieContents {
	margin-top: 22px;
}

/* ----- toggleButton ----- */
body#appli .applitoggleButton01{
	margin-top: 30px;
	text-align: center;
}
body#appli .applitoggleButton01 a{
	position: relative;
	display: inline-block;
	padding: 0 0 22px;
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.2;
	color: inherit;
}
body#appli .applitoggleButton01 a.open{
	padding: 22px 0 0;
}
body#appli .applitoggleButton01 a:before{
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 20px;
	height: 12px;
	margin-left: -10px;
	background: url("/appli/img-files/index_ic03.png") 0 0 no-repeat;
	transform: rotateZ(180deg);
	content: '';
}
body#appli .applitoggleButton01 a.open:before{
	top: 0;
	bottom: auto;
	transform: rotateZ(0);
}
body#appli .applitoggleButton01 a:not(.open) .closeText,
body#appli .applitoggleButton01 a.open .openText{
	display: none;
}