@charset "shift_jis";
@media screen and (max-width: 750px) {
/* ======================================================
 * /common-files/css/appli/appli_sp.css
 * ------------------------------------------------------
====================================================== */
	/* /appli/index.html
	------------------------------------------------------ */
	body#appli {
	}
	body#appli #mainContents {
		width: 100% !important;
		padding: 0;
	}

	/* ----- appliheading1 ----- */
	body#appli .appliheading1 {
		width: 100%;
		margin-bottom: 44px;
		padding: 0 5px;
	}
	body#appli .appliheading1 .heading1inner > .title {
		font-size: 20px;
		font-size: 2.0rem;
	}
	body#appli .appliheading1 .heading1inner > .subtitle {
		font-size: 16px;
		font-size: 1.6rem;
	}
	body#appli .appliheading1 .heading1inner > .subtitle > .dotted {
		border-bottom: 2px dotted #dc322c;
	}

	/* ----- appliVisualarea ----- */
	body#appli .appliVisualarea .Visuaimg {
		margin-left: 18px;
	}
	body#appli .appliVisualarea .Visuaimg > img {
		width: 272px;
	}
	body#appli .appliVisualarea .appliiconBox {
		align-items: center;
		margin-top: 25px;
		padding-left: 16px;
	}
	body#appli .appliVisualarea .appliiconBox > .iconImg {
		margin: 0 25px 0 0;
		width: 55px;
		flex-shrink: 0;
	}
	body#appli .appliVisualarea .appliiconBox > .textbox {
		max-width: none;
	}
	body#appli .appliVisualarea .appliiconBox > .textbox > .text {
		font-size: 15px;
		font-size: 1.5rem;
	}
	body#appli .appliVisualarea .appliiconBox > .textbox > .applNote {
		margin-top: 0;
		font-size: 12px;
		font-size: 1.2rem;
	}
	
	/* ----- appliDLBox ----- */
	body#appli .appliDLBox {
		margin-top: 20px;
	}
	body#appli .appliDLBox > .col:nth-child(2) {
		margin-left: 12px;
	}
	body#appli .appliDLBox > .col .appliDLBoxlink > img {
		max-height: 52px;
		height: auto;
	}
	body#appli .appliDLBox > .col .appliDLBoxlink:hover {
		opacity: 1;
	}
	body#appli .appliDLLead {
		margin-top: 50px;
		font-size: 20px;
		font-size: 2rem;
	}
	body#appli .appliDLLead + .appliDLBox {
		margin: 30px 0 50px;
	}
	
	/* ----- appliPointBox ----- */
	body#appli .appliPointBox {
		border-radius: 10px;
	}
	body#appli .appliPointBoxinner {
		padding: 30px 0 ;
	}
	body#appli .appliPointBox + .appliPointBox {
		margin-top: 35px;
	}
	
	/* ----- appliheading2 ----- */
	body#appli .appliheading2 .heading2inner > .subtitle {
		display: inline-block;
		padding: 2px 35px;
		border: 2px solid #45a2b0;
		font-size: 17px;
		font-size: 1.7rem;
	}
	body#appli .appliheading2 .heading2inner > .title {
		margin-top: 15px;
		font-size: 22px;
		font-size: 2.2rem;
	}
	
	/* ----- appliHuman ----- */
	body#appli .appliHuman {
		margin: 18px auto 0;
		padding: 0 7px;
	}
	body#appli .appliHuman .appliHumanImg {
		margin-right: 15px;
		width: 75px;
	}
	body#appli .appliHuman .appliHumanTextbox {
		width: calc(100% - 100px);
	}
	body#appli .appliHuman .appliHumanTextbox > .text {
		width: 100%;
		padding: 18px 10px;
		border: 2px solid #45a2b0;
		border-radius: 10px;
		font-size: 13px;
		font-size: 1.3rem;
	}
	body#appli .appliHuman .appliHumanTextbox > .text::before {
		width: 11px;
		height: 10px;
		top: 65%;
		left: -11px;
		background: url(/appli/img-files/index_bg01-sp.png) no-repeat 0 50%;
		background-size: 11px auto;
	}
	body#appli .appliHuman.type01 .appliHumanTextbox {
		margin-top: 3px;
	}
	body#appli .appliHuman.type02 .appliHumanTextbox {
		margin-top: 0 ;
	}
	body#appli .appliHuman.type03 .appliHumanTextbox {
		margin-top: 4px;
	}
	body#appli .appliHuman.type04 .appliHumanTextbox  {
		margin-top: 9px;
	}
	
	/* ----- appliAd ----- */
	body#appli .appliAd {
		margin-top: 60px;
	}
	body#appli .appliAd .lead {
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 1.3;
	}
	body#appli .appliAd .text {
		margin-top: 15px;
		font-size: 13px;
		font-size: 1.3rem;
	}
	body#appli .appliAd::after {
		border-width: 20px;
		top: -37px;
		left: calc(50% - 20px);
	}
	
	/* ----- appliAnimationLayout ----- */
	body#appli .appliAnimationLayout {
		margin-top: 22px;
		margin-left: 15px;
		margin-right: 15px;
	}
	body#appli .appliAnimationLayout.type01 > .appliAnimationInner,
	body#appli .appliAnimationLayout.type02 > .appliAnimationInner,
	body#appli .appliAnimationLayout.type03 > .appliAnimationInner,
	body#appli .appliAnimationLayout.type04 > .appliAnimationInner{
		width: 100%;
		max-width: 620px;
	}
	/* ----- appliAnimationLayout type04 ----- */
	body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .meterImg .meterImginner {
	width: 67.42%;
	}
	body#appli .appliAnimationLayout.type04 > .appliAnimationInner > .meterImg .meterImginner > img {
	width: 148.32%;
	transform: translateX(-67.42%);
	}
	body#appli .appliAnimationLayout.type04.is-active > .appliAnimationInner > .meterImg .meterImginner > img {
	transform: translateX(-32.58%);
	}
	
	/* ----- appliUseButton ----- */
	body#appli .appliUseButton {
		width: 100%;
	}
	body#appli .appliUseButton .appliUseButtonType {
		padding: 10px;
		border: 1px solid #d6d6d6;
		border-radius: 5px;
		font-size: 17px;
		font-size: 1.7rem;
	}
	body#appli .appliUseButton .appliUseButtonType:hover{
		opacity: 1;
	}
	body#appli .appliUseButton .appliUseButtonType::after {
		background-size: 8px 13px;
		width: 8px;
		height: 13px;
		top: calc(50% - 6px);
		right: 13px;
	}
	
	/* ----- appliNoteList ----- */
	body#appli .appliNoteList {
		margin-bottom: 40px;
	}
	body#appli .appliNoteList > li {
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1.6;
	}
	
	/* ----- appliWidelayout ----- */
	body#appli .appliWidelayout {
		margin-top: 30px;
	}
	body#appli .appliWidelayout .appliWidelayoutWrap .appliWidelayoutInner {
		width: 100%;
		margin: 0 auto;
		padding: 35px 10px;
	}
	
	/* ----- appliWrap ----- */
	body#appli .appliWrap {
		width: 100%;
		margin: 44px auto 0;
		padding: 0 10px;
	}
	/* ----- appliheading3 ----- */
	body#appli .appliheading3 {
		margin-top: 25px;
	}
	body#appli .appliheading3 .heading3inner > .subtitle {
		display: inline-block;
		padding: 2px 35px;
		background: #4599b1;
		font-size: 17px;
		font-size: 1.7rem;
	}
	body#appli .appliheading3 .heading3inner > .title {
		margin-top: 15px;
		font-size: 16px;
		font-size: 1.6rem;
	}

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

	/* ----- movieContents ----- */
	body#appli .movieContents {
		margin-top: 17px;
		padding: 0 10px;
	}
	body#appli .movieContents iframe{
		width: 100%;
		height: calc((100vw - 40px) * .5625);
	}

	/* ----- toggleButton ----- */
	body#appli .applitoggleButton01{
		margin-top: 30px;
		text-align: center;
	}
	body#appli .applitoggleButton01 a{
		position: relative;
		display: inline-block;
		padding: 0 0 15px;
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.2;
		color: inherit;
	}
	body#appli .applitoggleButton01 a.open{
		padding: 15px 0 0;
	}
	body#appli .applitoggleButton01 a:before{
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 13px;
		height: 8px;
		margin-left: -7px;
		background: url("/appli/img-files/index_ic03.png") 0 0 no-repeat;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		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;
	}

	/* modal */
	body#appli #cboxClose, 
	body#appli #cboxClose:hover {
		position: absolute;
		bottom: auto;
		top: -12px;
		right: -14px;
		width: 36px;
		height: 36px;
		background: url(/newcard/img/index_ic07.png) 0 0 no-repeat;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
	}
	body#appli #cboxContent{
		overflow: visible !important;
	}
	body#appli #colorbox.cb-ytWrap .cb_close a:after{
		-webkit-background-size: 14px 14px;
		background-size: 14px 14px;
	}
	body#appli .cboxIframe{
		max-height: 190px;
	}

}