@charset "utf-8";

/* --------------------
 base settings
-------------------- */

#app1911 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color:#000;
    line-height:1.4;
    -webkit-text-size-adjust: 100%;
}

#app1911 * {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

/* Bugfix for Android font-size
#app1911 * {max-height: 999999px;}
*/

#app1911 ol, #app1911 ul {
	list-style: none;
}

#app1911 img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
}


/* --------------------
 Class
-------------------- */

.center {text-align:center;}
.nw {display:inline-block;}
.keepall{
  word-break: keep-all;
}

.mincho {
    font-family: Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.gothic{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", "Original Yu Gothic", "游ゴシック", "Yu Gothic", YuGothic, Verdana, "Meiryo UI", "メイリオ", Meiryo, sans-serif;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* --------------------
 Content
-------------------- */
#app1911 {}

#app1911 #mainImg {
	margin-bottom:8vw;
}
#app1911 #mainImg .title {
	padding:6vw 4vw;
}
#app1911 #mainImg .photo {}

/* アプリダウンロード　上 */
#app1911 #DL-section {
	margin:0 10px 8vw;
	text-align:center;
}
#app1911 .DL-section__title {
	color:#008837;
	font-size:5vw;
	text-align:center;
	line-height: 1.3;
	padding:0.1em 1.5em;
	border:1px solid #008837;
	border-radius: 0.8em;
	margin-bottom:1em;
	display: inline-block;
}

	
#app1911 .DL__list li {
	float:left;
	margin-right:2%;
	width:49%;
}
#app1911 .DL__list li:last-child {
	margin-right:0;
}
#app1911 .DL-QR {display:none;}
#app1911 .DL-link {
}
#app1911 .DL-link dt {
	font-weight:bold;
	font-size:4vw;
	line-height: 1.2;
	margin-bottom:0.5em;
}

/* nanaco　paypay */
#app1911 #Func-section {
	margin:0 10px 8vw;
	text-align:center;
}

/* 汎用 */
#app1911 .section {
	border:2px solid #008837;
	border-top:none;
	padding:6vw 2vw 4vw;
	margin:0 10px 8vw;
}
#app1911 .subTTL {
	font-size:5vw;
	line-height: 1.3;
	text-align:center;
	color:#FFF;
	padding:0.4em 0.5em;
	background-color:#008837;
	margin:0 10px;
}

/* キャンペーン情報 */
#app1911 #camInfo {
}

/* 新しくなった */
#app1911 #introduction {}
#app1911 .introList {
	width:85%;
	margin:3vw auto 0;}
#app1911 .introList li {
	text-align:center;
	margin-bottom:9vw;}
#app1911 .introList li:last-child {
	margin-bottom:3vw;
}

/* アプリの使い方 */
#app1911 #howto {}
#app1911 .howtoList {
	width:60vw;
	margin:3vw auto 0;
}
#app1911 .howtoList li {
	text-align:center;
	padding:3vw 6vw;
	background-color:#a5d4ad;
	position: relative;
	margin-bottom:11vw;
}
#app1911 .howtoList li:after {
	position: absolute;
	left:0;
	bottom:-8vw;
	width:0;
	height:0;
	content:"";
	border-top:8.3vw solid #a5d4ad;
	border-right:30vw solid transparent;
	border-left:30vw solid transparent;
}
#app1911 .howtoList li a {
	position: relative;
	display:block;
}
#app1911 .howtoList li a:after {
	position:absolute;
	left:50%;
	bottom:0;
	width:0;
	height:0;
	content:"";
	border-left:6vw solid #FFF;
	border-top:3.5vw solid transparent;
	border-bottom:3.5vw solid transparent;
	transform: translate(-50%, 0);
}
#app1911 .howtoList li:last-child:after {
	display:none;
}
#app1911 .howtoList li:last-child {
	margin-bottom:3vw;
}

/* YouTube */
#app1911 #TVCM .YT {
	position: relative;
	width:100%;
	padding-top: 56.25%;}
#app1911 #TVCM .YT iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;}

/* アプリダウンロード　下 */
#app1911 #AppDL {}

/* バナーエリア */
#app1911 #Bnr-section {
	margin:10vw 10px 15vw;
}
#app1911 #Bnr-section ul {}
#app1911 #Bnr-section li {
	margin-bottom:5vw;
}
#app1911 .btn-normal a {
	display: block;
	text-align:center;
	font-size:4.5vw;
	color:#FFF;
	line-height: 1.3;
	text-decoration: none;
	background: #50a974; /* Old browsers */
	background: -moz-linear-gradient(top, #50a974 0%, #40a167 4%, #228349 94%, #1b663a 98%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #50a974 0%,#40a167 4%,#228349 94%,#1b663a 98%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #50a974 0%,#40a167 4%,#228349 94%,#1b663a 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: relative;
	padding:1.1em 1em;
	border-radius: 0.3em;
	box-shadow:1px 1px 3px #666;
}
#app1911 .btn-normal a:after {
	position: absolute;
	top:50%;
	right:0.5em;
	width:0;
	height:0;
	content:"";
	border-left:0.6em solid #FFF;
	border-top:0.4em solid transparent;
	border-bottom:0.4em solid transparent;
	transform: translate(0, -50%);
}
#app1911 .btn-normal a:hover {
	opacity: 0.8;
}

/* お問い合わせ */
#app1911 #contact {
	margin:0 0;
	text-align:center;
}
#app1911 .contact__title {
	font-size:5vw;
	text-align:center;
	font-weight:normal;
	margin-bottom:1em;
}

#app1911 .contact__dl {
	margin-bottom:5vw;
}
#app1911 .contact__dl dt {
	font-size:4vw;
	background:#a5d4ad;
	padding:0.7em 0 0.3em;
	position: relative;
	margin:0 auto 7vw;
	width:90vw;
}
#app1911 .contact__dl dt:after {
	position:absolute;
	left:0;
	bottom:-4vw;
	width:0;
	height:0;
	content:"";
	border-top:4.2vw solid #a5d4ad;
	border-left:45vw solid transparent;
	border-right:45vw solid transparent;
}
#app1911 .contact__dl dd {
	margin:0 10px;
	font-size:0.85rem;
}
#app1911 .contact__dl dd.linktxt {
	text-align:center;
}
#app1911 .contact__dl dd.linktxt a {
	font-size:4.3vw;
	color:#000;
	display: inline-block;
	padding-left:1em;
	position: relative;
}
#app1911 .contact__dl dd.linktxt a:after {
	position: absolute;
	left:0;
	top:50%;
	width:0.5em;
	height:0.5em;
	content:"";
	border-top:1px solid #000;
	border-right:1px solid #000;
	transform: rotate(45deg) translate(-50%, -50%);
}
#app1911 .contact__dl dd.tel {
	font-size:8.5vw;
	font-weight:bold;
	color:#ff6600;
}
#app1911 .contact__dl dd .contact__hedge {
	display: block;
	font-size:0.85rem;
	font-weight:normal;
	color:#000;
	line-height: 1.3;
}
#app1911 .contact__attention {
	font-size:0.75rem;
	color:#FFF;
	background-color:#ff6600;
	padding:0.5rem;
	margin:0 10px;
}

/* nanacoを登録バナー */
#app1911 .bnr-nanaco {
	margin:8vw 0;
	border-radius: 0.5rem;
	overflow: hidden;
}
#app1911 .bnr-function {margin:8vw 0;}
#app1911 .bnr-function li {
	margin-bottom: 4vw;
	border-radius: 0.5rem;
	overflow: hidden;
	}
#app1911 .bnr-function li a {}

/* 中バナー挿入プラグイン */
#app1911 #camInfo.section {
	padding: 6vw 2vw 2vw;
}
#app1911 .top-layout01.img-310 .block {
	padding: 0 5px;
	margin-bottom:1em;
}
#app1911 .top-layout01 .block .txt-box {
	padding:0.5em 0;
}
#app1911 .top-layout01 .block .txt-box p {
	font-size:0.8rem;}

/* 期間限定QR 202109 */
#app1911 ul.DL-separate {
	text-align:center;
}
#app1911 ul.DL-separate.bdr {
	border-bottom:1px solid #E9E6E6;
}
#app1911 li.DL-separate_QR {
	display: none;
}
#app1911 li.DL-separate_Btn {
	padding:0 0 6vw;
}
#app1911 li.DL-separate_Btn a {
	display: block;
	text-align:center;
	text-decoration: none;
	color:#FFF;
	
	font-size:1.25rem;
	font-weight:bold;
	background-color:#000;
	padding:1.1rem 0.5vw 1.1rem 7vw;
	border-radius: 1.9vw;
	border:2px solid #656565;
	position: relative;
}
#app1911 li.DL-separate_Btn a span {
	font-size:1.5rem;
	font-weight:bold;
}
#app1911 li.DL-separate_Btn a:hover {
	background-color:#3F3F3F;
}
#app1911 li.DL-separate_Btn a:after {
	position: absolute;
	left:4vw;
	top:50%;
	width:6vw;
	height:6vw;
	content:"";
	background:url("/library/contents/products/app1911/icon_dl.svg") no-repeat center center;
	background-size: 100% auto;
	transform:translate(0,-50%);
}

/* --------------------
 Smart device
-------------------- */
@media screen and (max-width: 768px) {
	/* PC-SP Switch */
	.dispPC {display:none;}
}

/* --------------------
 PC and Print
-------------------- */
@media screen and (min-width:769px), print {
    /* PC-SP Switch */
    .dispSP { display:none;}

/* ----- Content ----- */
#app1911 {}

#app1911 #mainImg {
	margin-bottom:50px;
}
#app1911 #mainImg .title {
	padding:0 0 36px;
	text-align:center;
}
#app1911 #mainImg .photo {}

/* アプリダウンロード　上 */
#app1911 #DL-section {
	margin:0 110px 50px;
}
#app1911 .DL-section__title {
	font-size:1.4rem;
	font-weight:normal;
	padding:0.15em 5em;
	border:2px solid #008837;
	border-radius: 0.9em;
	margin-bottom:0;
}
#app1911 .DL__ttl {
	font-size:1.7rem;
	padding:0.2em 3rem;
	margin-bottom:25px;
	display: inline-block;
}
#app1911 .DL__list {
	margin:0 auto;
	width:750px;
}
	
#app1911 .DL__list li {
	margin-right:35px;
	width:357px;
	letter-spacing: -.40em;
}
#app1911 .DL__list li:last-child {
	margin-right:0;
}
#app1911 .DL-QR, #app1911 .DL-link {
	display:inline-block;
	*display: inline;  
    *zoom: 1;
	letter-spacing: normal;
	vertical-align: middle;
}
#app1911 .DL-QR {
	width:135px;
	margin-right:13px;}
#app1911 .DL-link {
	width:208px;
}
#app1911 .DL-link dt {
	font-size:1.2rem;
	font-weight:normal;
	line-height: 1.3;
	margin-bottom:0.5rem;
	text-align:left;
}

/* nanaco　paypay */
#app1911 #Func-section {
	margin:0 60px 80px;
	text-align:center;
}

/* 汎用 */
#app1911 .section {
	border:5px solid #008837;
	border-top:none;
	padding:20px;
	margin:0 0 50px;
}
#app1911 .subTTL {
	font-size:1.5rem;
	font-weight:normal;
	padding:0.25em 0.5em;
	margin:0;
}

/* キャンペーン情報 */
#app1911 #camInfo {
	padding:3vw;
}

/* 新しくなった */
#app1911 #introduction {}
#app1911 .introList {
	width:700px;
	margin:5px auto 0;}
#app1911 .introList li {
	width:213px;
	float:left;
	margin-bottom:0;
	margin-right:30px;}
#app1911 .introList li:last-child {
	margin-bottom:0;
	margin-right:0;
}

/* アプリの使い方 */
#app1911 #howto {}
#app1911 .howtoList {
	width:745px;
	margin:25px auto;
}
#app1911 .howtoList li {
	width:140px;
	height:152px;
	padding:15px 0 0 10px;
	margin-bottom:0;
	margin-right:53px;
	float:left;
}
#app1911 .howtoList li:after {
	position: absolute;
	left:140px;
	bottom:0;
	width:0;
	height:0;
	content:"";
	border-top:76px solid transparent;
	border-bottom:76px solid transparent;
	border-right:none;
	border-left:22px solid #a5d4ad;
}
#app1911 .howtoList li:last-child:after {
	display:block;
}
#app1911 .howtoList li:last-child {
	margin-bottom:0;
	margin-right:22px;
}
#app1911 .howtoList li a:after {
	position:absolute;
	left:50%;
	bottom:-0.2em;
	width:0;
	height:0;
	content:"";
	border-left:1em solid #FFF;
	border-top:0.6em solid transparent;
	border-bottom:0.6em solid transparent;
	transform: translate(-50%, 0);
}
/* YouTube */
#app1911 #TVCM .YT-Box {
	width:480px;
	margin:20px auto;}

/* アプリダウンロード　下 */
#app1911 #AppDL {}
#app1911 .DL__list {
	margin:25px auto;
	}

/* バナーエリア */
#app1911 #Bnr-section {
	margin:60px 10px;
}
#app1911 #Bnr-section ul {}
#app1911 #Bnr-section li {
	margin-bottom:40px;
}
#app1911 .btn-normal a {
	width:740px;
	margin:0 auto;
	font-size:1.6rem;
	padding:0.8em 1em;
	border-radius: 0.4em;
}
#app1911 .btn-normal a:after {
	border-left:0.5em solid #FFF;
}

/* お問い合わせ */
#app1911 #contact {
	margin:0 0;
}
#app1911 .contact__title {
	font-size:1.5rem;
	margin-bottom:1em;
}

#app1911 .contact__dl {
	margin-bottom:25px;
}
#app1911 .contact__dl dt {
	font-size:1.1rem;
	padding:0.8em 0 0.3em;
	position: relative;
	margin:0 auto 25px;
	width:20em;
}
#app1911 .contact__dl dt:after {
	position:absolute;
	left:0;
	bottom:-15px;
	width:0;
	height:0;
	content:"";
	border-top:15px solid #a5d4ad;
	border-left:10em solid transparent;
	border-right:10em solid transparent;
}
#app1911 .contact__dl dd {
	margin:0 10px;
	font-size:1.05rem;
}
#app1911 .contact__dl dd.linktxt a {
	font-size:1.25rem;
}
#app1911 .contact__dl dd.linktxt a:after {
	position: absolute;
	left:0;
	top:50%;
	width:0.5em;
	height:0.5em;
	content:"";
	border-top:1px solid #000;
	border-right:1px solid #000;
	transform: rotate(45deg) translate(-50%, -50%);
}
#app1911 .contact__dl dd.tel {
	font-size:2.6rem;
}
#app1911 .contact__dl dd .contact__hedge {
	font-size:0.95rem;
}
#app1911 .contact__attention {
	font-size:0.75rem;
	padding:0.6rem 1rem;
	margin:0 auto;
	display: inline-block;
}
	
/* nanacoを登録バナー */
#app1911 .bnr-nanaco {
	margin:50px auto;
	width:400px;
	border-radius: 0.5rem;
	overflow: hidden;
}
#app1911 .bnr-function {
	margin:50px auto;
	-js-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;/* 折り返し禁止はflex-wrap: nowrap; */
	justify-content:space-between;}
#app1911 .bnr-function li {
	margin:0;
	width:400px;
	position: relative;
	}

	/* 中バナー挿入プラグイン */
#app1911 #camInfo {
	padding: 10px 60px 0;
}
#app1911 .top-layout01.img-310 .block {
	padding: 0 30px;
	width: 400px;
}
#app1911 .top-layout01 .block .txt-box {
	padding:0.8em 0;
}
#app1911 .top-layout01 .block .txt-box p {
	font-size:0.85rem;}

	
/* 期間限定QR 202109 */
#app1911 ul.DL-separate {
	text-align:center;
}
#app1911 ul.DL-separate.bdr {
	border:none;
}
#app1911 li.DL-separate_QR {
	display: block;
	width:135px;
	margin:20px 0;
}
#app1911 li.DL-separate_Btn {
	padding:0 0 0 40px;
	width:450px;
}
#app1911 li.DL-separate_QR, #app1911 li.DL-separate_Btn {
	
	display:inline-block;
	*display: inline;  
    *zoom: 1;
	letter-spacing: normal;
	vertical-align: middle;
	}

#app1911 li.DL-separate_Btn a {
	display: block;
	text-align:center;
	font-size:1.2rem;
	background-color:#000;
	padding:1.2rem 10px 1.2rem 30px;
	border-radius: 8px;
}
#app1911 li.DL-separate_Btn a span {
	font-size:1.5rem;
	}
#app1911 li.DL-separate_Btn a:after {
	position: absolute;
	left:25px;
	top:50%;
	width:25px;
	height:25px;
	content:"";
	background:url("/library/contents/products/app1911/icon_dl.svg") no-repeat center center;
	background-size: 100% auto;
	transform:translate(0,-50%);
}
}