app.layout['inc__expansion_footer'] = 'inc__expansion_footer';
vueApp.component('inc__expansion_footer', {
	mixins: [baseIncludeComponent],
	data() {
		return {
			floatBannerTag: null
		};
	},
	template: `
<div class="expansion" v-if="page_info.expansion">
	<template v-for="(item,key) in page_info.expansion">
		<a v-if="key == 'floatTopBtn' && item.useFlg" id="page-top" href="#top">
			<img v-if="item.image" :src="item.image" alt="">
			<span v-if="item.title">{{ item.title }}</span>
			<i v-if="!item.image && !item.title" class="fas fa-chevron-up"></i>
		</a>
		<div v-if="key == 'search' && item.useFlg && item.useFloat" id="right-search-box"><div class="right-search-box-in">
			<div class="upperRight btn-close"></div>
			<div class="right-search-in">
				<a :href="item.linkurl" data-name="top" data-value="hidden"><img :src="item.image" alt=""></a>
			</div>
		</div></div>
	</template>
</div>
`
});
app.layout['inc__hero'] = 'inc__hero';
vueApp.component('inc__hero', {
	mixins: [baseIncludeComponent],
	data() {
		return {
			StyleSheet: null
		};
	},
	template: `
<div class="hero-container" v-if="page_info.header && page_info.header.items">
	<template v-if="page_info.header.items.length > 1">
		<div class="swiper-wrapper">
			<component v-for="(item, index) in page_info.header.items" :is="layout[item.block_type]" :page_info="page_info" :layout="layout" :block="item" :blockid="index" :key="index"></component>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</template>
	<template v-else>
		<component v-for="(item, index) in page_info.header.items" :is="layout[item.block_type]" :page_info="page_info" :layout="layout" :block="item" :blockid="index" :key="index"></component>
	</template>
</div>
`,
	created: function(){
		if(this.page_info.header && this.page_info.header.styles){
			this.StyleSheet = this.getStylesCss('.l-hero-wrapper', this.page_info.header.styles);
		}
	}
});
app.layout['inc__hero_clip'] = 'inc__hero_clip';
vueApp.component('inc__hero_clip', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-hero-clip" :class="[getClipType()]">
	<svg v-if="getClipType() == 'shape001'" class="pos-bottom" xmlns="http://www.w3.org/2000/svg" width="1920" height="208.405" viewBox="0 0 1920 208.405">
		<path d="M0,1920H187.857s25.51-47.764,19.683-354.849S134.987,1085.692,130.066,694.4,187.857,0,187.857,0H0Z" transform="translate(0 208.405) rotate(-90)" style="fill:var(--bgshape-color);"/>
	</svg>
	<svg v-if="getClipType() == 'shape002'" class="pos-bottom" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="436" viewBox="0 0 1920 436">
		<defs>
			<clipPath id="clip-path">
				<rect width="1920" height="436" transform="translate(0 534)" fill="#fff"/>
			</clipPath>
		</defs>
		<g transform="translate(0 -534)" clip-path="url(#clip-path)">
			<g>
				<path d="M.1,456.573h0c48.565-52.182,123.693-127.312,205.808-188.9,65.3-48.975,129.66-89.051,196.759-122.516,28.5-14.216,57.613-27.326,88.993-40.079,25.688-10.44,52.782-20.605,85.266-31.992,38.408-12.41,64.564-20.47,87.459-26.951C691.338,38.506,715.1,32.712,739.159,27.9c24.892-4.976,50.866-9.062,81.745-12.86C849.695,11.5,884.131,8.06,929.278,4.211,962.716,1.418,997.26,0,1031.95,0a1369.883,1369.883,0,0,1,154.9,8.955c46.332,5.294,92.469,12.888,137.13,22.571,29.089,6.307,58.46,13.665,87.3,21.869,23.07,6.564,45.851,13.681,67.711,21.154,37.315,12.757,59.144,22.193,59.36,22.287l.025,53.316-.025-49.664c-.21-.09-22.14-9.477-59.38-22.094-21.866-7.408-44.655-14.464-67.734-20.972-28.848-8.134-58.229-15.429-87.328-21.681-44.671-9.6-90.824-17.127-137.179-22.377a1382.55,1382.55,0,0,0-154.953-8.879c-34.7,0-69.255,1.4-102.706,4.173-45.157,3.815-79.6,7.228-108.41,10.739-30.89,3.765-56.873,7.816-81.772,12.749-24.069,4.768-47.836,10.512-74.8,18.076-22.9,6.424-49.065,14.415-87.489,26.719-32.5,11.289-59.6,21.367-85.295,31.716C459.915,121.3,430.8,134.3,402.284,148.393c-67.121,33.178-131.5,72.908-196.826,121.461C123.529,330.751,48.564,405.005.1,456.573Z" transform="translate(689.281 546.875)" style="fill:var(--bgshape-color);"/>
				<path d="M.1,456.573h0c48.565-52.182,123.693-127.312,205.808-188.9,65.3-48.975,129.66-89.051,196.759-122.516,28.5-14.216,57.613-27.326,88.993-40.079,25.688-10.44,52.782-20.605,85.266-31.992,38.408-12.41,64.564-20.47,87.459-26.951C691.338,38.506,715.1,32.712,739.159,27.9c24.892-4.976,50.866-9.062,81.745-12.86C849.695,11.5,884.131,8.06,929.278,4.211,962.716,1.418,997.26,0,1031.95,0a1369.883,1369.883,0,0,1,154.9,8.955c46.332,5.294,92.469,12.888,137.13,22.571,29.089,6.307,58.46,13.665,87.3,21.869,23.07,6.564,45.851,13.681,67.711,21.154,37.315,12.757,59.144,22.193,59.36,22.287l.025,53.316-.025-49.664c-.21-.09-22.14-9.477-59.38-22.094-21.866-7.408-44.655-14.464-67.734-20.972-28.848-8.134-58.229-15.429-87.328-21.681-44.671-9.6-90.824-17.127-137.179-22.377a1382.55,1382.55,0,0,0-154.953-8.879c-34.7,0-69.255,1.4-102.706,4.173-45.157,3.815-79.6,7.228-108.41,10.739-30.89,3.765-56.873,7.816-81.772,12.749-24.069,4.768-47.836,10.512-74.8,18.076-22.9,6.424-49.065,14.415-87.489,26.719-32.5,11.289-59.6,21.367-85.295,31.716C459.915,121.3,430.8,134.3,402.284,148.393c-67.121,33.178-131.5,72.908-196.826,121.461C123.529,330.751,48.564,405.005.1,456.573Z" transform="translate(514.678 611.428)" style="fill:var(--bgshape-color);" opacity="0.3"/>
			</g>
		</g>
	</svg>
	<svg v-if="getClipType() == 'shape003'" class="pos-bottom" xmlns="http://www.w3.org/2000/svg" width="1920" height="303" viewBox="0 0 1920 303">
		<path d="M0,286.663,1920,37V340H0Z" transform="translate(0 -37)" style="fill:var(--bgshape-color);"/>
	</svg>
	<svg v-if="getClipType() == 'shape004'" style="width: 180%;height: 180%;top: -40%;left: -40%;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="873" viewBox="0 0 1920 873">
		<defs>
			<clipPath id="clip-path">
				<rect width="1920" height="873" transform="translate(0 95)" fill="#fff"/>
			</clipPath>
		</defs>
		<g transform="translate(0 -95)" clip-path="url(#clip-path)">
			<circle cx="408.5" cy="408.5" r="408.5" transform="translate(552 126)" style="fill:var(--bgshape-color);" opacity="0.9"/>
		</g>
	</svg>

	<svg v-if="page_info.styles['s-align'] == 's-align-left' && getClipType() == 'shape005'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="961" viewBox="0 0 1920 961">
		<defs>
			<clipPath id="clip-path">
				<rect id="長方形_7769" data-name="長方形 7769" width="1920" height="961" fill="#fff"/>
			</clipPath>
		</defs>
		<g id="マスクグループ_1000" data-name="マスクグループ 1000" clip-path="url(#clip-path)">
			<path id="パス_1506" data-name="パス 1506" d="M613.631-60.583,0-123.363V520.466l613.631,62.781Z" transform="translate(20 300)" style="fill:var(--bgshape-color);"/>
		</g>
	</svg>
	<svg v-if="page_info.styles['s-align'] == 's-align-center' && getClipType() == 'shape005'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="961" viewBox="0 0 1920 961">
		<defs>
			<clipPath id="clip-path">
				<rect id="長方形_7768" data-name="長方形 7768" width="1920" height="961" fill="none"/>
			</clipPath>
		</defs>
		<g id="マスクグループ_999" data-name="マスクグループ 999" clip-path="url(#clip-path)">
			<path id="パス_1506" data-name="パス 1506" d="M613.631-60.583,0-123.363V520.466l613.631,62.781Z" transform="translate(653.185 281.184)" style="fill:var(--bgshape-color);"/>
		</g>
	</svg>

	<svg v-if="getClipType() == 'shape006'" class="bg-fixed" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="300" viewBox="0 0 1920 300">
		<g id="グループ_1725" data-name="グループ 1725" transform="translate(0 -104)">
			<path id="パス_1739" data-name="パス 1739" d="M1920,300s-835.712-15.442-1315.712-90.442S0,0,0,0V300Z" transform="translate(0 104)" opacity="0.7" style="fill:var(--bgshape-color);"/>
			<path id="パス_1740" data-name="パス 1740" d="M1920,181.8s-835.712-9.357-1315.712-54.807S0,0,0,0V181.8Z" transform="translate(0 222.203)" opacity="0.7" style="fill:var(--bgshape-color);"/>
			<path id="パス_1741" data-name="パス 1741" d="M1920,79.3S1084.288,75.218,604.288,55.393,0,0,0,0V79.3Z" transform="translate(0 324.699)" style="fill:var(--bgshape-color);" opacity="1"/>
			<path id="パス_1746" data-name="パス 1746" d="M0,0S835.712,15.442,1315.712,90.442,1920,300,1920,300V0Z" transform="translate(0 104)" opacity="0.7" style="fill:var(--bgshape-color);"/>
			<path id="パス_1747" data-name="パス 1747" d="M0,0S835.712,9.357,1315.712,54.807,1920,181.8,1920,181.8V0Z" transform="translate(0 104.001)" opacity="0.7" style="fill:var(--bgshape-color);"/>
			<path id="パス_1748" data-name="パス 1748" d="M0,0S835.712,4.082,1315.712,23.907,1920,79.3,1920,79.3V0Z" transform="translate(0 104.001)" style="fill:var(--bgshape-color);" opacity="1"/>
		</g>
	</svg>
	<svg v-if="getClipType() == 'shape007'" class="bg-fixed-width" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="970" viewBox="0 0 1920 970">
		<defs>
			<clipPath id="clip-path">
				<rect id="長方形_8087" data-name="長方形 8087" width="1920" height="970" style="fill:var(--bgshape-color);" stroke="#707070" stroke-width="1"/>
			</clipPath>
		</defs>
		<g id="マスクグループ_1077" data-name="マスクグループ 1077" clip-path="url(#clip-path)">
			<circle id="楕円形_903" data-name="楕円形 903" cx="240" cy="240" r="240" transform="translate(880 698)" style="fill:var(--bgshape-color);"/>
			<circle id="楕円形_904" data-name="楕円形 904" cx="305" cy="305" r="305" transform="translate(1233 -36)" style="fill:var(--bgshape-color);"/>
			<circle id="楕円形_905" data-name="楕円形 905" cx="138.5" cy="138.5" r="138.5" transform="translate(-117 356)" style="fill:var(--bgshape-color);"/>
		</g>
	</svg>
	<svg v-if="getClipType() == 'shape009'" class="bg-fixed-height" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1599.999" height="1192.882" viewBox="0 0 1599.999 1192.882">
		<defs>
			<clipPath id="clip-path">
				<path id="パス_1512" data-name="パス 1512" d="M185.555-5.465C327.5-6.356,651.21,26.292,651.292,210.863S483.187,578.354,310.23,581.189c-93.57,1.534-154.78-95.914-223.995-188.553C12.6,292.251-97.983,276.656-96.565,174.583-94.722,31.279,43.606-4.573,185.555-5.465Z" transform="translate(950.875 49.627)" style="fill:var(--bgshape-color);"/>
			</clipPath>
			<clipPath id="clip-path-2">
				<path id="パス_1513" data-name="パス 1513" d="M225.023-5.461C386.828-6.527,755.815,32.476,755.908,252.968s-191.62,439.011-388.771,442.4C260.478,697.2,190.706,580.785,111.809,470.117c-22.244-31.779-72.635-77.969-72.635-77.969S-96.441,321.4-96.562,209.626C-94.461,38.433,63.217-4.4,225.023-5.461Z" transform="translate(96.579 5.482)" fill="#fff" stroke="#707070" stroke-width="1"/>
			</clipPath>
		</defs>
		<g id="グループ_1634" data-name="グループ 1634" transform="translate(-160 156.898)">
			<path id="パス_1510" data-name="パス 1510" d="M268.222,0c118.3,0,249.667,86.494,249.667,192.31s-85.532,218.565-195.333,220.1c-66.72,0-94.112-41.168-163.985-125.631C86.394,194.64,3.374,241.233,0,141.7.461,99.61,27.446,47.583,68.142,24.549,114.541,1.594,193.695,0,268.222,0Z" transform="matrix(-0.966, -0.259, 0.259, -0.966, 1117.422, 375.5)" style="fill:var(--bgshape-color);" opacity="0.1"/>
			<path id="パス_1509" data-name="パス 1509" d="M214.276-60.361c79.952,0,101.7,48.078,201.549,146.078,54.491,47.8,75.522,59.381,98,81.359,20.578,20.118,44.378,50.983,44.378,83.208,0,140.529-132.927,216.341-271.814,216.341S19,334.848,19,202.206,53.407-60.361,214.276-60.361Z" transform="translate(141 544.076)" style="fill:var(--bgshape-color);" opacity="0.1"/>
			<g id="マスクグループ_30" data-name="マスクグループ 30" transform="translate(157.832 271.855)" clip-path="url(#clip-path)">
				<rect id="長方形_930" data-name="長方形 930" width="899.275" height="685.985" transform="translate(746.482 -23.087)" style="fill:var(--bgshape-color);" opacity="0.1"/>
			</g>
			<g id="マスクグループ_31" data-name="マスクグループ 31" transform="translate(826.086 160.35)" clip-path="url(#clip-path-2)">
				<image :href="block.settings.bgimage" style="width: 100%;height: 130%;transform: translate(-25%, -35%);"/>
			</g>
			<path id="パス_1514" data-name="パス 1514" d="M118.757-21.434c32.236,0,70.308,10.771,98.4,43.332,27.051,34.264,32.073,65.915,32.073,94.591,0,59.247-6.535,103.456-69.008,103.456-38.546,0-51.918-17.774-91.506-42.035C61.261,161.31,36.169,149,23.475,136.7,15.847,129.32-.521,98.438.22,70.517.22,11.269,56.284-21.434,118.757-21.434Z" transform="translate(558.288 816.039)" style="fill:var(--bgshape-color);" opacity="0.1"/>
		</g>
	</svg>
	<!-- s-align == s-align-left -->
	<svg v-if="getClipType() == 'shape011'" class="bg-fixed-width" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="1920" height="1000" viewBox="0 0 1949.416 1000">
		<path d="M-989.416,0H518.7L960,999.9l-1949.416.1Z" transform="translate(110 0)" style="fill:var(--bgshape-color)"/>
	</svg>
	<svg v-if="getClipType() == 'shape012'" class="bg-fixed-width" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="1920" height="1000" viewBox="0 0 1968.018 1000">
		<path d="M-1008.018,1000,518.7,999.9,960,0-1008.018.511Z" transform="translate(110 0)" style="fill:var(--bgshape-color)"/>
	</svg>
	<svg v-if="getClipType() == 'shape013'" class="bg-fixed-width" xmlns="http://www.w3.org/2000/svg" width="1920" height="1000" viewBox="0 0 1628.957 1000">
		<path d="M-316.785,0H1032.172l280,500-280,500H-316.785Z" transform="translate(-490)" style="fill:var(--bgshape-color)"/>
	</svg>
	<svg v-if="getClipType() == 'shape014'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1080" height="998" viewBox="0 0 1080 998" preserveAspectRatio="none">
		<defs>
			<clipPath id="clip-path"><rect width="1080" height="998" fill="#fff" stroke="#707070" stroke-width="1"/></clipPath>
		</defs>
		<g clip-path="url(#clip-path)">
			<path d="M306.95,1016.17s54.108-23.507,135.777,28.052S559.3,1187.117,559.3,1187.117l847.149-395.032s-32.08-109.289-136.478-245.673c-87.088-100.961-173.438-110.925-283.854-162.87-93.791-36.679-187.137-58.034-247.2-178.1C694.143,105.961,726.364,0,726.364,0L0,342.649,162.631,691.412Z" transform="translate(135.509 -312.524) rotate(25)" style="fill:var(--bgshape-color);opacity:1"/>
		</g>
	</svg>
	<svg v-if="getClipType() == 'shape015'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" width="1247" height="1247" viewBox="0 0 1247 1247" preserveAspectRatio="xMaxYMax">
		<circle cx="623.5" cy="623.5" r="623.5" style="fill:var(--bgshape-color)"/>
	</svg>

	<!-- s-align == s-align-center -->
	<svg  v-if="getClipType() == 'shape016'" class="bg-fixed" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="1511.994" height="1112.429" viewBox="0 0 1511.994 1112.429">
		<path data-name="合体 21" d="M14648,10818.212h-1.14L14156,9706h632v.11h389.137l490.862,1112.212-1019.992.106Z" transform="translate(-14156 -9705.999)" style="fill:var(--des-main-defColor)" />
		<path data-name="合体 21" d="M14648,10818.212h-1.14L14156,9706h632v.11h389.137l490.862,1112.212-1019.992.106Z" transform="translate(-14156 -9705.999)" style="fill:var(--bgshape-color);opacity:0.5" />
	</svg>
	<svg v-if="getClipType() == 'shape017'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" width="1247" height="1247" viewBox="0 0 1247 1247">
		<circle data-name="楕円形 16" cx="623.5" cy="623.5" r="623.5" style="fill:var(--des-main-defColor)"/>
		<circle data-name="楕円形 16" cx="623.5" cy="623.5" r="623.5" style="fill:var(--bgshape-color);opacity:0.5"/>
	</svg>

	<!-- s-align == s-align-left -->
	<svg v-if="getClipType() == 'shape018'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" width="600" height="970" viewBox="0 0 600 970">
		<rect id="長方形_1193" data-name="長方形 1193" width="600" height="970" fill="#fff" opacity="0.9"/>
	</svg>
	<svg v-if="getClipType() == 'shape019'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" width="729" height="970" viewBox="0 0 729 970">
		<g id="グループ_1713" data-name="グループ 1713" transform="translate(-7043 20208)">
			<rect id="長方形_7718" data-name="長方形 7718" width="729" height="970" transform="translate(7043 -20208)" fill="#fff" opacity="0"/>
			<path id="パス_2113" data-name="パス 2113" d="M30.932,0H697.38c17.083,0,30.932,16.949,30.932,37.857V812.194c0,20.908-13.849,37.856-30.932,37.856H30.932C13.849,850.051,0,833.1,0,812.194V37.857C0,16.949,13.849,0,30.932,0Z" transform="translate(7043.688 -20208)" fill="#fff"/>
			<rect id="長方形_7720" data-name="長方形 7720" width="729" height="161" transform="translate(7043 -20208)" fill="#fff"/>
		</g>
	</svg>
	<svg v-if="getClipType() == 'shape020'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" width="636" height="970" viewBox="0 0 636 970">
		<rect id="長方形_1193" data-name="長方形 1193" width="636" height="970" fill="#fff" opacity="0.9"/>
	</svg>
	<svg v-if="getClipType() == 'shape021'" class="bg-fixed" xmlns="http://www.w3.org/2000/svg" width="777" height="970" viewBox="0 0 777 970">
		<g id="グループ_1713" data-name="グループ 1713" transform="translate(-7034 20208)">
			<rect id="長方形_7718" data-name="長方形 7718" width="729" height="970" transform="translate(7043 -20208)" fill="#fff" opacity="0"/>
			<rect id="長方形_7721" data-name="長方形 7721" width="777" height="903" rx="33" transform="translate(7034 -20208)" fill="#fff"/>
			<rect id="長方形_7720" data-name="長方形 7720" width="777" height="161" transform="translate(7034 -20208)" fill="#fff"/>
		</g>
	</svg>

</div>
`,
	methods: {
		getClipType: function(){
			if(this.block && this.block.settings && this.block.settings.bgshape){ return this.block.settings.bgshape; }
			if(this.page_info.styles['s-bgshape']){
				return this.page_info.styles['s-bgshape'].replace('s-bgshape-', '');
			}
			return null;
		}
	}
});
app.layout['inc__item_body'] = 'inc__item_body';
vueApp.component('inc__item_body', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="item[name]" class="l-item-body p-body" v-html="getTextContents(item, name)"></div>
`});
app.layout['inc__item_figure'] = 'inc__item_figure';
vueApp.component('inc__item_figure', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-figure-container">
	<div class="p-figure-body" v-if="get_array_block(item, name).length > 0">
		<figure class="l-item-figure p-figure" v-for="image in get_array_block(item, name)">
			<div class="image" :style="getItemBgstyle(image)"><img :src="image" :alt="getKeyValue(item, name, 'alt')"></div>
			<figcaption v-if="getKeyValue(item, name, 'caption')" v-html="getTextContents(item, name, 'caption')"></figcaption>
		</figure>
	</div>
	<template v-else>
		<figure v-if="item[name]" class="l-item-figure p-figure">
			<div class="image" :style="getItemBgstyle(item[name])"><img :src="item[name]" :alt="getKeyValue(item, name, 'alt')"></div>
			<figcaption v-if="getKeyValue(item, name, 'caption')" v-html="getTextContents(item, name, 'caption')"></figcaption>
		</figure>
	</template>
</div>
`,
	methods: {
		getItemBgstyle: (image) => {
			return 'background-image:url('+image+');'
		}
	}
});
app.layout['inc__item_span'] = 'inc__item_span';
vueApp.component('inc__item_span', {
	mixins: [baseIncludeComponent],
	template: `
<span v-if="item[name]" :class="classes" v-html="getTextContents(item, name)"></span>
`});
app.layout['inc__item_subtitle'] = 'inc__item_subtitle';
vueApp.component('inc__item_subtitle', {
	mixins: [baseIncludeComponent],
	template: `
<h4 v-if="item[name]" class="l-item-subtitle p-subtitle" v-html="getTextContents(item, name)"></h4>
`});
app.layout['inc__item_title'] = 'inc__item_title';
vueApp.component('inc__item_title', {
	mixins: [baseIncludeComponent],
	template: `
<h3 v-if="item[name]" class="l-item-title p-title" v-html="getTextContents(item, name)"></h3>
`});
app.layout['inc__main_footer'] = 'inc__main_footer';
vueApp.component('inc__main_footer', {
	mixins: [baseIncludeComponent],
	template: `
<footer id="footer">
	<component v-if="page_info.footer && page_info.footer.type" :is="layout[page_info.footer.type]" :page_info="page_info" :layout="layout"></component>
	<component v-if="page_info.footer && page_info.footer.sp_type" :is="layout[page_info.footer.sp_type]" :page_info="page_info" :layout="layout"></component>
</footer>
`});
app.layout['inc__main_header'] = 'inc__main_header';
vueApp.component('inc__main_header', {
	mixins: [baseIncludeComponent],
	template: `
<div></div>
`});
app.layout['inc__main_header_complogo'] = 'inc__main_header_complogo';
vueApp.component('inc__main_header_complogo', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-header-complogo-container" v-if="page_info.info.company_logo && page_info.info.company_logo.image">
	<div class="p-company-logo">
		<template v-if="page_info.info.company_logo && page_info.info.company_logo.type">
			<component :is="getComponentLayout(page_info.info.company_logo.type)" :page_info="page_info" :layout="layout" :block="block" :item="page_info.info.company_logo"></component>
		</template>
		<template v-else>
			<a :href="page_info.info.company_linkurl" target="_blank" class="p-image" :class="getLogoClasses()">
				<img :src="page_info.info.company_logo" :alt="page_info.info.company_name" class="p-image-def">
				<img v-if="page_info.info.company_logo_wh" :src="page_info.info.company_logo_wh" alt="" class="p-image-wh">
			</a>
		</template>
	</div>
</div>`,
	methods: {
		getLogoClasses: function(item){
			var res = [];
			if(this.page_info.info['company_logo_wh']){ res.push('p-image-wh-juge'); }
			return res;
		}
	}
});
app.layout['inc__main_header_logo'] = 'inc__main_header_logo';
vueApp.component('inc__main_header_logo', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-header-logo-container" v-if="page_info.info.site_logo && page_info.info.site_name">
	<div class="p-title">
		<template v-if="page_info.info.site_logo && page_info.info.site_logo.type">
			<component :is="getComponentLayout(page_info.info.site_logo.type)" :page_info="page_info" :layout="layout" :block="block" :item="page_info.info.site_logo"></component>
		</template>
		<template v-else>
			<a v-if="page_info.info.site_logo" :href="page_info.info.site_linkurl || '/'" class="p-image" :class="getLogoClasses()">
				<img :src="page_info.info.site_logo" :alt="page_info.info.site_name" class="p-image-def">
				<img v-if="page_info.info.site_logo_wh" :src="page_info.info.site_logo_wh" alt="" class="p-image-wh">
			</a>
			<a v-else :href="page_info.info.site_linkurl || '/'" class="p-image">{{ page_info.info.site_name }}</a>
			<span v-if="page_info.info.subtitle" v-html="getTextContents(page_info.info, 'subtitle')" class="p-subtitle"></span>
		</template>
	</div>
</div>`,
	methods: {
		getLogoClasses: function(item){
			var res = [];
			if(this.page_info.info['site_logo_wh']){ res.push('p-image-wh-juge'); }
			return res;
		}
	}
});
app.layout['inc__section_bg'] = 'inc__section_bg';
vueApp.component('inc__section_bg', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-section-bg" :style="style"></div>
`,
	computed: {
		style() {
			var result = '';
			if(this.block['settings']){
				if(this.block.settings.bgimage){ result+= 'background-image: url(\''+this.block.settings.bgimage+'\');background-position: center;background-size: cover;'; }
			}
			return result;
		}
	}
});
app.layout['comp__accordion'] = 'comp__accordion';
vueApp.component('comp__accordion', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-accordion" :class="[item.classes]" v-if="item.header || item.items || item.footer">
	<input v-if="item.id" :id="item.id" class="p-accordion-check" :type="getCheckType()" name="block.id" :checked="item.checked">
	<label class="p-contatiner-header" v-if="item.header" :for="item.id">
		<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
	</label>
	<div class="p-contatiner-items" v-if="item.items">
		<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
	</div>
	<div class="p-contatiner-footer" v-if="item.footer">
		<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
	</div>
</div>`,
	methods: {
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getCheckType: function(){
			if(this.item['checkType']){ return this.item['checkType']; }
			return 'checkbox';
		}
	}
});
app.layout['comp__article'] = 'comp__article';
vueApp.component('comp__article', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-article" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-article-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-article-items">
		<div class="p-article-wrapper" v-for="(item2,index2) in item.items" v-if="item.items">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item)" class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="p-article-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.page_info.styles){
				var value = this.page_info.styles['s-article'];
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__attention'] = 'comp__attention';
vueApp.component('comp__attention', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-attention" v-if="item.header || item.items || item.footer" :class="[getComponentClass(item)]">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="item"></component>
	<div class="p-attention-container">
		<div class="p-attention-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="attention" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-attention-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="attention" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-attention-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="attention" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.page_info.styles){
				var value = this.page_info.styles['s-container-horizontal'];
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			if(this.page_info.styles && result.indexOf(this.page_info.styles['frame-container']) === -1){
				result.push('frame-container');
				result.push(this.page_info.styles['frame-container']);
			}
			return result;
		}
	}
});
app.layout['comp__badge'] = 'comp__badge';
vueApp.component('comp__badge', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-badge" v-if="item.value" :class="[getComponentClass(item)]">
	<component :is="getComponentLayout('inlinetext')" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
</div>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-badge'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('s-badge-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('badge-position', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		}
	}
});
app.layout['comp__bgimage'] = 'comp__bgimage';
vueApp.component('comp__bgimage', {
	mixins: [baseIncludeComponent],
	template: `<div class="p-bgimage" :class="[item.classes]">
	<div class="p-bgimage-before" :style="style_before_color"></div>
	<div class="p-bgimage-inner pc_only" :style="style_image_pc()"></div>
	<div class="p-bgimage-inner sp_only" :style="style_image_sp()"></div>
	<div class="p-bgimage-after" :style="style_after_color()"></div>
</div>
`,
	methods: {
		style_image_pc() {
			var result = '';
			if(this.item.bgcolor){ result+= 'background-color: '+this.item.bgcolor+';'; }
			if(this.item.image){ result+= 'background-image: url(\''+this.item.image+'\');'; }
			return result;
		},
		style_image_sp() {
			var result = '';
			// if(this.item.bgcolor){ result+= 'background-color: '+this.item.bgcolor+';'; }
			if(this.item.image_sp){ result+= 'background-image: url(\''+this.item.image_sp+'\');'; }
			else if(this.item.image){ result+= 'background-image: url(\''+this.item.image+'\');'; }
			return result;
		},
		style_before_color() {
			var result = '';
			if(this.item.bgcolor){ result+= 'background-color: '+this.item.bgcolor+';'; }
			return result;
		},
		style_after_color() {
			var result = '';
			if(this.item.bgcolor){ result+= 'background-color: '+this.item.bgcolor+';'; }
			return result;
		}
	}
});
app.layout['comp__bgmovie'] = 'comp__bgmovie';
vueApp.component('comp__bgmovie', {
	mixins: [baseIncludeComponent],
	template: `<div class="l-hero-bg-container" :class="[item.classes]" v-if="block.settings.bgmovie">
	<video class="cover pc_only" :src="block.settings.bgmovie" autoplay loop muted style="position: absolute;top: 0;left: 0;width: 100%;">
		<img v-if="block.settings.bgimage" :src="block.settings.bgimage" alt="Placeholder">
	</video>
	<div class="bgmovie-cover-filter"></div>
	<video class="bgmovie-main pc_only" :src="block.settings.bgmovie" autoplay loop muted style="position: absolute;display: none;"></video>
	<div class="l-hero-bg" :style="style_color"></div>
	<div class="l-hero-bg-image pc_only" :style="style_image_pc"></div>
	<div class="l-hero-bg-image sp_only" :style="style_image_sp"></div>
</div>`,
	methods: {
		style_image_pc() {
			var result = 'overflow:hidden;width: 100%;height: 100%;top: 0;position: absolute;background-repeat: repeat;background-color: rgb(0 0 0 / 50%);';
			if(this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
			if(this.block.settings.bgimage){ result+= 'background-image: url(\''+this.block.settings.bgimage+'\'),var(--header-gradation);'; }
			return result;
		},
		style_image_sp() {
			var result = 'overflow:hidden;width: 100%;height: 100%;top: 0;position: absolute;background-repeat: repeat;background-color: rgb(0 0 0 / 50%);';
			// if(this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
			if(this.block.settings.bgimage_sp){ result+= 'background-image: url(\''+this.block.settings.bgimage_sp+'\'),var(--header-gradation);'; }
			return result;
		},
		style_before_color() {
			var result = '';
			if(this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
			return result;
		},
		style_after_color() {
			var result = '';
			if(this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
			return result;
		}
	}
});
app.layout['comp__blockquote'] = 'comp__blockquote';
vueApp.component('comp__blockquote', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-blockquote" v-if="item.header || item.items || item.footer" :class="[getComponentClass(item), getStyle(page_info, item, 's-box-radius s-box-shadow')]">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="item"></component>
	<blockquote class="p-blockquote-container">
		<div class="p-blockquote-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="blockquote" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-blockquote-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="blockquote" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-blockquote-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="blockquote" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
	</blockquote>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-blockquote-info' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['blockquote']){
				this.item.header = this.item.header || [];
				this.item.header.push(JSON.parse(JSON.stringify({
					"type": "headline",
					"title":this.block['contents']['blockquote']['itemtitle']
				})));
				this.item.items = this.item.items || [];
				this.item.items.push(JSON.parse(JSON.stringify(
					this.block['contents']['blockquote']['overview']
				)));
			}
		}
		if(this.item.value){
			this.item.items = this.item.items || [];
			this.item.items.push({"type": "text", "workflow": "public", "value":this.item.value});
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-blockquote'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		}
	}
});
app.layout['comp__breadcrumb'] = 'comp__breadcrumb';
vueApp.component('comp__breadcrumb', {
	mixins: [baseIncludeComponent],
	template: `
<nav v-if="page_info.contents && page_info.contents.breadcrumb && page_info.contents.breadcrumb.items && page_info.contents.breadcrumb.items.length>0" :class="getComponentClass(page_info.contents.breadcrumb)"><ul>
	<li v-for="item in page_info.contents.breadcrumb.items">
		<template v-if="getLinkHref(item)"><a :href="getLinkHref(item)" v-html="item.title"></a></template>
		<template v-else><span v-html="item.title"></span></template>
	</li>
</ul></nav>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			result.push('comp__breadcrumb');
			result.push('breadcrumb');
			var commponentKey = 's-breadcrumb'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['context']){
				var context = item['context'];
				if(result.indexOf(context) === -1){ result.push(context); }
				if(this.page_info.styles && this.page_info.styles[context] && result.indexOf(this.page_info.styles[context]) === -1){ result.push(this.page_info.styles[context]); }
			}
			else if(this.context && result.indexOf(this.context) === -1){ result.push(this.context); }
			return result;
		}
	}
});
app.layout['comp__button'] = 'comp__button';
vueApp.component('comp__button', {
	mixins: [baseIncludeComponent],
	template: `
<a :href="getLinkHref(item)" :target="getTarget(item)" :rel="getLinkRel(item)" :onclick="getLinkOnClick(item)" :class="[getComponentClass(item)]">
	<i v-if="item.icon" :class="[item.icon]"></i>
	<img v-if="item.iconImage" :src="item.iconImage" class="icon-image" alt="" />
	<img v-if="item.image" :src="item.image" class="image" alt="item.alt" />
	<span v-html="getTextContents(item, 'value')"></span>
</a>`,
	created: function(){
		if(this.item.title && !this.item.value){ this.item.value = this.item.title; }
		if(this.item.linkurl && !this.item.linkUrl){ this.item.linkUrl = this.item.linkurl; }
	},
	methods: {
		getDefaultComponentClass: function(){ return ['p-btn','s-btn']; },
		getComponentClass: function(item){
			var result = item.classes || [];
			var defClasses = this.getDefaultComponentClass();
			for(var i=0; i<defClasses.length; i++){ if(result.indexOf(defClasses[i]) === -1){ result.push(defClasses[i]); } }
			if(item['context']){
				var context = item['context'];
				if(result.indexOf(context) === -1){ result.push(context); }
				if(this.page_info.styles && this.page_info.styles[context] && result.indexOf(this.page_info.styles[context]) === -1){ result.push(this.page_info.styles[context]); }
			}
			else if(this.context && result.indexOf(this.context) === -1){ result.push(this.context); }
			if(item['priority'] && result.indexOf('s-btn-'+item['priority']) === -1){ result.push('s-btn-'+item['priority']); }
			else if(result.indexOf('s-btn-default') === -1){ result.push('s-btn-default'); }
			if(item['disabled']){ result.push('s-btn-disabled'); }
			var commponentKey = 's-button'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(result.indexOf('link-btn') === -1){ result.push('link-btn'); }
			if(this.getTarget(item)){
				var styleid = this.getStyleid('link-external'); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				result.push('externalLinkIcon');
			}
			if(['header'].indexOf(this.parentType) !== -1){
				var styleid = this.getStyleid('link-header-btn', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-header-btn-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-header-icon-btn', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			else if(['footer'].indexOf(this.parentType) !== -1){
				var styleid = this.getStyleid('link-footer-btn', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-footer-btn-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-footer-icon-btn', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			else{
				var styleid = this.getStyleid('link-btn', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-btn-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-icon-btn', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			var styleid = this.getStyleid('frame-btn', null, commponentKey, commponentId); 
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		}
	}
});
app.layout['comp__buttons'] = 'comp__buttons';
vueApp.component('comp__buttons', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-buttons" :class="[getComponentClass(item)]" :style="getStyles(item)">
	<div class="p-buttons-header" v-if="item.header">
		<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
	</div>
	<div class="p-btn-container">
		<component v-for="item2 in item.items" :is="getComponentLayout(item2.type || 'button')" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
	</div>
	<div class="p-buttons-footer" v-if="item.footer">
		<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
	</div>
</div>
`,
	created() {
		if(this.item['context'] == 'cx-link-buttons'){
			if(this.block['contents'] && this.block['contents']['link_buttons']){
				this.item['items'] = this.block['contents']['link_buttons'];
			}
		}
	},
	methods: {
		getStyles: function(item){
			var result = '';
			if(item['position'] && item['position'] == 'center'){ result+= 'text-align:center;'; }
			if(item['position'] && item['position'] == 'right'){ result+= 'text-align:right;'; }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-buttons'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(this.page_info.styles){
				var value = this.page_info.styles['s-buttons'];
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		}
	}
});
app.layout['comp__container-2col-horizontal'] = 'comp__container-2col-horizontal';
vueApp.component('comp__container-2col-horizontal', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-2col-horizontal" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-2col-horizontal-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div v-if="getStyleid() == 's-container-2col-horizontal-3point'" class="p-container-2col-horizontal-items">
		<div class="p-container-2col-horizontal-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<div class="p-container-header" v-if="item2.header">
				<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
			</div>
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div v-else class="p-container-2col-horizontal-items">
		<div class="p-container-2col-horizontal-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-2col-horizontal-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getStyleid: function(){
			if(this.item['styleid']){ return this.item['styleid']; }
			if(this.page_info.styles){
				return this.page_info.styles['s-container-2col-horizontal'];
			}
			return null;
		},
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('comp__container-2col-horizontal__bg-color'); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.getStyleid()){
				var value = this.getStyleid();
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			return result;
		},
		getContainerClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.page_info.styles && result.indexOf(this.page_info.styles['frame-container']) === -1){
				result.push('frame-container');
				result.push(this.page_info.styles['frame-container']);
			}
			return result;
		},
		getLinkClass: function(item){
			var result = ['link-container'];
			if(this.getTarget(item)){ result.push('externalLinkIcon'); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['link-container']) === -1){ result.push(this.page_info.styles['link-container']); }
			var styleid = this.getStyleid('frame-container-link');
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover');
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-3col-horizontal'] = 'comp__container-3col-horizontal';
vueApp.component('comp__container-3col-horizontal', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-3col-horizontal" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-3col-horizontal-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div v-if="getStyleid() == 's-container-3col-horizontal-3point'" class="p-container-3col-horizontal-items">
		<div class="p-container-3col-horizontal-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<div class="p-container-header" v-if="item2.header">
				<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
			</div>
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div v-else class="p-container-3col-horizontal-items">
		<div class="p-container-3col-horizontal-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-3col-horizontal-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getStyleid: function(){
			if(this.item['styleid']){ return this.item['styleid']; }
			if(this.page_info.styles){
				return this.page_info.styles['s-container-3col-horizontal'];
			}
			return null;
		},
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('comp__container-3col-horizontal__bg-color'); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.getStyleid()){
				var value = this.getStyleid();
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			return result;
		},
		getContainerClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.page_info.styles && result.indexOf(this.page_info.styles['frame-container']) === -1){
				result.push('frame-container');
				result.push(this.page_info.styles['frame-container']);
			}
			return result;
		},
		getLinkClass: function(item){
			var result = ['link-container'];
			if(this.getTarget(item)){ result.push('externalLinkIcon'); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['link-container']) === -1){ result.push(this.page_info.styles['link-container']); }
			var styleid = this.getStyleid('frame-container-link');
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover');
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-faq-001'] = 'comp__container-faq-001';
vueApp.component('comp__container-faq-001', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-faq-001" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-faq-001-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-faq-001-items">
		<div class="p-container-faq-001-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-faq-001-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-faq-001' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-header';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-header-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-faq'] = 'comp__container-faq';
vueApp.component('comp__container-faq', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-faq" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-faq-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-faq-items">
		<div class="p-container-faq-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div v-if="item2.items" class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" v-if="item2.items" :class="getItemsClass(item)">
					<div class="p-container-items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-faq-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-faq' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-header';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-header-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-faq';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-flow-001'] = 'comp__container-flow-001';
vueApp.component('comp__container-flow-001', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-flow-001" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-flow-001-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-flow-001-items">
		<div class="p-container-flow-001-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-flow-001-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-badge-container' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-flow-001'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-shadow']) === -1){ result.push(this.page_info.styles['s-shadow']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-grid-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getFooterClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-footer', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-footer-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-flow-002'] = 'comp__container-flow-002';
vueApp.component('comp__container-flow-002', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-flow-002" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-flow-002-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-flow-002-items">
		<div class="p-container-flow-002-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-flow-002-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-flow-002' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-002'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-flow-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-flow-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-flow-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-flow-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-001'] = 'comp__container-horizontal-001';
vueApp.component('comp__container-horizontal-001', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-001" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-001-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-001-items">
		<div class="p-container-horizontal-001-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-001-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal-001' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-001'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-002'] = 'comp__container-horizontal-002';
vueApp.component('comp__container-horizontal-002', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-002" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-002-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-002-items">
		<div class="p-container-horizontal-002-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-002-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal-002' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-002'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-003'] = 'comp__container-horizontal-003';
vueApp.component('comp__container-horizontal-003', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-003" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-003-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-003-items">
		<div class="p-container-horizontal-003-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-003-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal-003' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-003'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-004'] = 'comp__container-horizontal-004';
vueApp.component('comp__container-horizontal-004', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-004" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-004-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-004-items">
		<div class="p-container-horizontal-004-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-004-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal-004' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-004'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-005'] = 'comp__container-horizontal-005';
vueApp.component('comp__container-horizontal-005', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-005" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-005-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-005-items">
		<div class="p-container-horizontal-005-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-005-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal-005' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-005'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-005';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-005';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-005';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-005';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-005';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-005';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-006'] = 'comp__container-horizontal-006';
vueApp.component('comp__container-horizontal-006', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-006" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-006-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-006-items">
		<div class="p-container-horizontal-006-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-006-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal-006' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-006'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-006';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-006';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-006';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-006';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-006';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-006';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-horizontal-article'] = 'comp__container-horizontal-article';
vueApp.component('comp__container-horizontal-article', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal-article" :class="getComponentClass(item)" v-if="articleItems">
	<div class="p-container-horizontal-article-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div v-if="!articleLoading" class="p-container-horizontal-article-items">
		<div class="p-container-horizontal-article-wrapper" v-for="(item2,index2) in articleItems" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-article-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	data() {
		return {
			articleLoading: true,
			articles: {
				items: []
			},
			articleItems: [],
			message: "読み込み中...",
			articleGroupData: {}
		};
	},
	created() {
		var self = this;
		if(this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			self.articleLoading = true;
			if(this.block && this.block['loadArticleList']){
				this.loadLinkPages((articleList) => {
					self.block.contents = self.block.contents || {};
					self.block.contents.items = self.block.contents.items || [];
					if(articleList && articleList['items']){
						for(var i=0; i<articleList['items'].length; i++){
							console.log(articleList['items'][i]);
							var item = {
								'title': {'value':articleList['items'][i]['title']},
								'summary': {'value':this.getSummaryText(articleList['items'][i]['contents']['summary'])},
								'date': {'value':this.getDateStr(articleList['items'][i]['publicdt'])},
								'image': {'image':articleList['items'][i]['contents']['mainimage']},
								'contents': articleList['items'][i]['contents'],
								'linkUrl': null
							};
							if(self.block.settings.categoryView){
								item['category'] = [{'value':self.getCategoryValue(articleList['items'][i]['category'])}];
							}
							if(articleList['items'][i]['contents']['body'] && articleList['items'][i]['contents']['body']['items'] && articleList['items'][i]['contents']['body']['items'].length > 0){
								item['linkUrl'] = self.getArticleDetailUrl(self.block['detailUrl'], articleList['items'][i]);
							}
							item['category'] = '募集中';
							item['place'] = 'ハイブリッド開催会場&オンライン配信';
							var contents = {
								"header": [
									{"type": "label", "workflow": "public", "value":item['category']},
								],
								"items": [
									{
										"type": "headline","workflow": "public","context": "cx-headline-h4",
										"title": {"type": "inlinetext", "workflow": "public", "linkUrl":item['linkUrl'], "value":item['title']['value']}
									},
									{"type": "text", "workflow": "public", 'value':item['summary']['value']}
								],
								"footer": [
									{
										"type": "dl","workflow": "public","label": "定義リスト",
										"items": [
											{"title":{"value":"日程"},"items":[{"type":"text", "value":item['date']['value']}]},
											{"title":{"value":"会場"},"items":[{"type":"text", "value":item['place']}]}
										]
									}
								]
							};
							console.log(contents);
							self.articleItems.push(contents);
						}
					}
					if(articleList && articleList['pagenation']){
						self.block.contents.pagenation = self.block.contents.pagenation || [];
						self.block.contents.pagenation = articleList['pagenation'];
						self.block.contents.pagenation.usePagenation = this.block.settings.usePagenation;
					}
					// console.log(self.articleItems);
					self.articleLoading = false;
				});
			}else{
				var articleList = self.block['loadArticleList'];
				if(articleList && articleList['pagenation']){
					self.block.contents.pagenation = self.block.contents.pagenation || [];
					self.block.contents.pagenation = articleList['pagenation'];
					self.block.contents.pagenation.usePagenation = this.block.settings.usePagenation;
				}
				self.articleLoading = false;
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-article'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal-article';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal-article';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal-article';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-article';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-article';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal-article';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		},
		getDateStr: function(date){
			var dt = new Date(date);
			var y = dt.getFullYear();
			var m = ("00" + (dt.getMonth()+1)).slice(-2);
			var d = ("00" + (dt.getDate())).slice(-2);
			var result = y + '/' + m + '/' + d;
			return result;
		},
		getTagValue: function(tagid){
			for(var i=0; i<this.articleGroupData.contents.tags.items.length; i++){
				if(this.articleGroupData.contents.tags.items[i].id == tagid){
					return this.articleGroupData.contents.tags.items[i].value;
				}
			}
			return null;
		},
		getCategoryValue: function(categoryid){
			// console.log(this.block);
			if(!this.block['loadArticleGroupData']){ return null; }
			if(!this.block['loadArticleGroupData'].contents){ return null; }
			if(!this.block['loadArticleGroupData'].contents.categories){ return null; }
			for(var i=0; i<this.block['loadArticleGroupData'].contents.categories.items.length; i++){
				if(this.block['loadArticleGroupData'].contents.categories.items[i].id == categoryid){
					return this.block['loadArticleGroupData'].contents.categories.items[i].value;
				}
			}
			return categoryid;
		},
		getCategoryStyle: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return 'background-color:'+this.articleGroupData.contents.categories.items[i].color;
				}
			}
			return null;
		},
		getSummaryText: function(result){
			if(result && result.length > 200){
				result = result.substr(0, 200) + '...'
			}
			return result;
		},
		formatDate(date){
			var dt = new Date(date);
			var y = dt.getFullYear();
			var m = ("00" + (dt.getMonth()+1)).slice(-2);
			var d = ("00" + (dt.getDate())).slice(-2);
			return y +'.'+ m +'.'+ d;
		}
	}
});
app.layout['comp__container-horizontal'] = 'comp__container-horizontal';
vueApp.component('comp__container-horizontal', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-horizontal" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-horizontal-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-horizontal-items">
		<div class="p-container-horizontal-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-horizontal-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-list'] = 'comp__container-list';
vueApp.component('comp__container-list', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-list" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-list-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-list-items">
		<div class="p-container-list-wrapper" v-for="(item2,index2) in item.items">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-list-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var commponentKey = 's-container-list'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('bg-container'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-list';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-text'];
			if(this.getTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-text', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-text-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-price'] = 'comp__container-price';
vueApp.component('comp__container-price', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-price" :class="getComponentClass(item)" v-if="block.contents && block.contents.items">
  <div class="p-container-price-header" v-if="block.contents.header">
    <component v-for="(item2,index2) in block.contents.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
  </div>
  <div class="p-container-price-items">
    <div class="p-container-price-wrapper" v-for="(item2,index2) in block.contents.items" :class="getContainerClass(item2)">
      <template v-if="getLinkHref(item2)">
        <a class="p-container-container" :href="getLinkHref(item2)" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" :class="getLinkClass(item2)" v-bind="getAttribute(item2['containerAttrib'])">
					<component v-if="item2.headline" :is="getComponentLayout('headline')" type="headline" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.headline"></component>
          <component v-if="item2.bodytext" :is="getComponentLayout('bodytext')" type="text" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.bodytext"></component>
          <component v-if="item2.dl" :is="getComponentLayout('dl')" type="dl" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.dl"></component>
          <component v-if="item2.ul" :is="getComponentLayout('ul')" type="ul" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.ul"></component>
          <component v-if="item2.buttons" :is="getComponentLayout('buttons')" type="buttons" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.buttons"></component>
        </a>
      </template>
      <template v-else>
        <div class="p-container-container" v-bind="getAttribute(item2['containerAttrib'])">
          <component v-if="item2.headline" :is="getComponentLayout('headline')" type="headline" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.headline"></component>
          <component v-if="item2.bodytext" :is="getComponentLayout('bodytext')" type="text" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.bodytext"></component>
          <component v-if="item2.dl" :is="getComponentLayout('dl')" type="dl" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.dl"></component>
          <component v-if="item2.ul" :is="getComponentLayout('ul')" type="ul" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.ul"></component>
          <component v-if="item2.buttons" :is="getComponentLayout('buttons')" type="buttons" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2.buttons"></component>
				</div>
			</template>
		</div>
	</div>
	<div class="p-container-price-footer" v-if="block.contents.footer">
		<component v-for="(item2,index2) in block.contents.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-price'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-price';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-price';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-ticker'] = 'comp__container-ticker';
vueApp.component('comp__container-ticker', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-ticker" :class="getComponentClass(item)" v-if="articleItems">
	<component v-if="item.title" :is="getComponentLayout(item.title.type || 'headline')" :item="item.title" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
	<div class="p-container-ticker-wrapper">
		<div class="p-container-ticker-items swiper">
			<div class="swiper-wrapper">
				<div class="p-container-ticker-wrapper swiper-slide" v-for="(item2,index2) in articleItems">
					<a v-if="getLinkHref(item2)" :href="getLinkHref(item2)" :target="getLinkTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
						<div class="p-container-header" v-if="item2.date">
							<component :is="getComponentLayout(item2.date.type || 'text')" :item="item2.date" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
						</div>
						<div class="p-container-items">
							<component v-if="item2.category" :is="getComponentLayout(item2.category.type || 'labels')" :item="item2.category" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
							<component v-if="item2.title" :is="getComponentLayout(item2.title.type || 'text')" :item="item2.title" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
						</div>
					</a>
					<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
						<div class="p-container-header" v-if="item2.date">
							<component :is="getComponentLayout(item2.date.type || 'text')" :item="item2.date" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
						</div>
						<div class="p-container-items">
							<component v-if="item2.category" :is="getComponentLayout(item2.category.type || 'labels')" :item="item2.category" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
							<component v-if="item2.title" :is="getComponentLayout(item2.title.type || 'text')" :item="item2.title" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
	<component v-if="item.buttons"  :is="getComponentLayout(item.buttons.type || 'buttons')" :item="item.buttons" parent-type="container" :page_info="page_info" :layout="layout" :block="block"></component>
</div>`,
	data() {
		return {
			articleLoading: true,
			articles: {
				items: []
			},
			articleItems: [],
			message: "読み込み中...",
			articleGroupData: {}
		};
	},
	created: function(){
		var self = this;
		if(this.item['context'] == 'cx-section-ticker' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			self.articleLoading = true;
			if(this.block && this.block['loadArticleList']){
				this.loadLinkPages((articleList) => {
					self.block.contents = self.block.contents || {};
					self.block.contents.items = self.block.contents.items || [];
					if(articleList && articleList['items']){
						for(var i=0; i<articleList['items'].length; i++){
							var item = {
								'title': {'value':articleList['items'][i]['title']},
								'summary': {'value':this.getSummaryText(articleList['items'][i]['contents']['summary'])},
								'date': {'value':this.getDateStr(articleList['items'][i]['publicdt'])},
								'image': {'image':articleList['items'][i]['contents']['mainimage']},
								'contents': articleList['items'][i]['contents'],
								'linkUrl': null
							};
							if(self.block.settings.categoryView){
								item['category'] = [{'value':self.getCategoryValue(articleList['items'][i]['category'])}];
							}
							if(articleList['items'][i]['contents']['body'] && articleList['items'][i]['contents']['body']['items'] && articleList['items'][i]['contents']['body']['items'].length > 0){
								item['linkUrl'] = self.getArticleDetailUrl(self.block['detailUrl'], articleList['items'][i]);
							}
							self.articleItems.push(item);
						}
					}
					if(articleList && articleList['pagenation']){
						self.block.contents.pagenation = self.block.contents.pagenation || [];
						self.block.contents.pagenation = articleList['pagenation'];
						self.block.contents.pagenation.usePagenation = this.block.settings.usePagenation;
					}
					self.articleLoading = false;
				});
			}else{
				var articleList = self.block['loadArticleList'];
				if(articleList && articleList['pagenation']){
					self.block.contents.pagenation = self.block.contents.pagenation || [];
					self.block.contents.pagenation = articleList['pagenation'];
					self.block.contents.pagenation.usePagenation = this.block.settings.usePagenation;
				}
				self.articleLoading = false;
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var commponentKey = 's-container-ticker'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('bg-container'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-ticker';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-text'];
			if(this.getTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-text', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-text-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getDateStr: function(date){
			var dt = new Date(date);
			var y = dt.getFullYear();
			var m = ("00" + (dt.getMonth()+1)).slice(-2);
			var d = ("00" + (dt.getDate())).slice(-2);
			var result = y + '/' + m + '/' + d;
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		},
		getSummaryText: function(result){
			if(result && result.length > 200){
				result = result.substr(0, 200) + '...'
			}
			return result;
		},
		getCategoryValue: function(categoryid){
			// console.log(this.block);
			if(!this.block['loadArticleGroupData']){ return null; }
			if(!this.block['loadArticleGroupData'].contents){ return null; }
			if(!this.block['loadArticleGroupData'].contents.categories){ return null; }
			if(!this.block['loadArticleGroupData'].contents.categories.items){ return null; }
			for(var i=0; i<this.block['loadArticleGroupData'].contents.categories.items.length; i++){
				if(this.block['loadArticleGroupData'].contents.categories.items[i].id == categoryid){
					return this.block['loadArticleGroupData'].contents.categories.items[i].value;
				}
			}
			return categoryid;
		},
		getCategoryStyle: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return 'background-color:'+this.articleGroupData.contents.categories.items[i].color;
				}
			}
			return null;
		},
		getDetailUrl: function(item){
			if(!item.contents.body || !item.contents.body.items || item.contents.body.items.length == 0){ return null; }
			var detailUrl = null;
			if(this.page_info.info.linkPageInfo && this.page_info.info.linkPageInfo['detailUrl']){
				detailUrl = this.page_info.info.linkPageInfo['detailUrl'];
			}
			if(this.block.settings.linkProjectInfo && this.block.settings.linkProjectInfo['locationInfo']){
				detailUrl = this.block.settings.linkProjectInfo['locationInfo']['detail'];
			}
			if(!detailUrl && this.block.settings.linkPageInfo && this.block.settings.linkPageInfo['detailUrl']){
				detailUrl = this.block.settings.linkPageInfo['detailUrl'];
			}
			if(!detailUrl && this.block.settings['detailUrl']){
				detailUrl = this.block.settings['detailUrl'];
			}
			if(!detailUrl && this.page_info.locationInfo && this.page_info.locationInfo["detail"]){
				detailUrl = this.page_info.locationInfo["detail"];
			}
			return this.getArticleDetailUrl(detailUrl, item);
		},
	}
});
app.layout['comp__container-vertical-001'] = 'comp__container-vertical-001';
vueApp.component('comp__container-vertical-001', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-vertical-001" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-vertical-001-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-vertical-001-items">
		<div class="p-container-vertical-001-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-vertical-001-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-badge-container' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-vertical-001'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-shadow']) === -1){ result.push(this.page_info.styles['s-shadow']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-grid-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getFooterClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-footer', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-footer-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-001';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-vertical-002'] = 'comp__container-vertical-002';
vueApp.component('comp__container-vertical-002', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-vertical-002" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-vertical-002-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-vertical-002-items">
		<div class="p-container-vertical-002-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-vertical-002-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-badge-container' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-vertical-002'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-shadow']) === -1){ result.push(this.page_info.styles['s-shadow']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-grid-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getFooterClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-footer', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-footer-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-002';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-vertical-003'] = 'comp__container-vertical-003';
vueApp.component('comp__container-vertical-003', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-vertical-003" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-vertical-003-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-vertical-003-items">
		<div class="p-container-vertical-003-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-vertical-003-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-badge-container' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-vertical-003'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-shadow']) === -1){ result.push(this.page_info.styles['s-shadow']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-grid-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getFooterClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-footer', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-footer-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-003';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-vertical-004'] = 'comp__container-vertical-004';
vueApp.component('comp__container-vertical-004', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-vertical-004" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-container-vertical-004-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-vertical-004-items">
		<div class="p-container-vertical-004-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-vertical-004-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-badge-container' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-vertical-004'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-shadow']) === -1){ result.push(this.page_info.styles['s-shadow']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-grid-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getFooterClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-footer', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-footer-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical-004';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container-vertical'] = 'comp__container-vertical';
vueApp.component('comp__container-vertical', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container-vertical" :class="getComponentClass(item)" v-if="itemItems">
	<div class="p-container-vertical-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-container-vertical-items">
		<div class="p-container-vertical-wrapper" v-for="(item2,index2) in itemItems" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header" :class="getHeaderClass(item)">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-items" v-if="item2.items" :class="getItemsClass(item)">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer" :class="getFooterClass(item)">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-container-vertical-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	data() {
		return {
			itemItems: []
		};
	},
	created() {
		this.itemItems = this.item.items;
		if(this.item && this.item['context'] == 'cx-badge-container' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.itemItems = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']}))).items;
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-container-vertical'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-shadow']) === -1){ result.push(this.page_info.styles['s-shadow']); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-grid-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getHeaderClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getFooterClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-footer', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-footer-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-vertical';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__container'] = 'comp__container';
vueApp.component('comp__container', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-container" :class="getComponentClass(item)" v-if="item.header || item.items || item.footer">
	<a v-if="item.linkUrl" :href="item.linkUrl" :target="getTarget(item)" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
		<div class="p-container-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
		<div class="p-container-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
		<div class="p-container-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
	</a>
	<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
		<div class="p-container-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
		<div class="p-container-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
		<div class="p-container-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__conversion-horizontal'] = 'comp__conversion-horizontal';
vueApp.component('comp__conversion-horizontal', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-conversion-horizontal" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-conversion-horizontal-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-conversion-horizontal-items">
		<div class="p-conversion-horizontal-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :rel="getLinkRel(item2)" :onclick="getLinkOnClick(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-footer" v-if="item2.footer">
						<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-conversion-horizontal-footer" v-if="item.footer && item.footer.length>0">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var commponentKey = 's-conversion-horizontal'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-conversion-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			// console.log(styleid);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var result = ['link-container'];
			if(this.getTarget(item)){ result.push('externalLinkIcon'); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['link-container']) === -1){ result.push(this.page_info.styles['link-container']); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__dl'] = 'comp__dl';
vueApp.component('comp__dl', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-dl" :class="[getComponentClass(item)]">
	<div class="p-dl-horizontal-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-dl-horizontal-items">
		<dl class="p-dl-container" v-if="item.items" v-for="(item2,index2) in item.items" :class="[getItemClass(item2)]">
			<dt class="p-dl-header" :class="[getTheadClass(item2)]" v-if="item2.title"><component :is="getComponentLayout(item2.title.type || 'text')" :page_info="page_info" :layout="layout" :block="block" :item="item2.title"></component></dt>
			<dt class="p-dl-header" :class="[getTheadClass(item2)]" v-if="item2.header"><component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component></dt>
			<dd class="p-dl-items" :class="[getBodyClass(item2)]" v-if="item2.body"><component :is="getComponentLayout(item2.body.type || 'text')" :page_info="page_info" :layout="layout" :block="block" :item="item2.body"></component></dd>
			<dd class="p-dl-items" :class="[getBodyClass(item2)]" v-if="item2.items"><component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component></dd>
		</dl>
	</div>
	<div class="p-dl-horizontal-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-dl'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('dl-size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var styleid = this.getStyleid('dl-grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf('grid-'+styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getTheadClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-dl';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('block-bg-container-header-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-header', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getBodyClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-dl';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getItemClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			return result;
		},
	}
});
app.layout['comp__embed'] = 'comp__embed';
vueApp.component('comp__embed', {
	mixins: [baseIncludeComponent],
	template: `<div class="p-embed" :class="[getClasses(item), item.classes]">
	<div class="p-embed-container" v-if="item.value" v-html="item.value"></div>
</div>`,
	methods: {
		getClasses: function(item){
			var result = [];
			if(!item['priority'] || item['priority'] == ''){
				result.push('color-default');
			}
			else{
				result.push('s-text-'+item['priority']);
				result.push('color-'+item['priority']);
			}
			return result;
		}
	}
});
app.layout['comp__emphasis'] = 'comp__emphasis';
vueApp.component('comp__emphasis', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-emphasis" v-if="item.header || item.items || item.footer" :class="[getComponentClass(item), getStyle(page_info, item, 's-box-radius s-box-shadow')]">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="item"></component>
	<div class="p-emphasis-container">
		<div class="p-emphasis-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="emphasis" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-emphasis-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="emphasis" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-emphasis-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="emphasis" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-emphasis-section' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['emphasis']){
				this.item.items = this.item.items || [];
				this.item.items.push(JSON.parse(JSON.stringify(this.block['contents']['emphasis'])));
			}
		}
		if(this.item.value){
			this.item.items = this.item.items || [];
			this.item.items.push({"type": "text", "workflow": "public", "value":this.item.value});
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }

			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}

			if(this.page_info.styles){
				var value = this.page_info.styles['s-emphasis'];
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			return result;
		}
	}
});
app.layout['comp__entry'] = 'comp__entry';
vueApp.component('comp__entry', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-entry" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-entry-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-entry-items">
		<div class="p-entry-wrapper" v-for="(item2,index2) in item.items" v-if="item.items">
			<div class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-images" v-if="item2.images">
						<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-entry-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	created: function(){
		if(this.item['context'] == 'cx-section-entry' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-entry'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__entryimage'] = 'comp__entryimage';
vueApp.component('comp__entryimage', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-entryimage" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-entryimage-header" v-if="item.header">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-entryimage-items">
		<div class="p-entryimage-wrapper" v-for="(item2,index2) in item.items" v-if="item.items">
			<div class="p-container-container" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-navi" v-if="item2.navi">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-header" v-if="item2.header">
					<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper">
				<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-footer" v-if="item2.footer">
					<component v-for="(item3,index3) in item2.footer" :is="getComponentLayout(item3.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
	<div class="p-entryimage-footer" v-if="item.footer">
		<component v-for="(item2,index2) in item.footer" :is="getComponentLayout(item2.type)" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
</div>`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-entry'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__file'] = 'comp__file';
vueApp.component('comp__file', {
	mixins: [baseIncludeComponent],
	template: `<div class="p-file">
	<a :href="item.file" target="_blank" :rel="getLinkRel(item)" :onclick="getLinkOnClick(item)" :class="[getComponentClasses(item), getLinkClass(item)]"><div v-if="!item.caption" class="p-file-name">{{ item.file }}</div><div v-if="item.caption" class="p-file-caption" v-html="getTextContents(item, 'caption')"></div></a>
</div>`,
	// render(_ctx) {
	// 	console.log(_ctx);
	// 	return _ctx(
	// 		'h3',
	// 		{},
	// 		this.$slots.default
	// 	)
	// },
	methods: {
		getComponentClasses: function(item){
			if(item.classes && !Array.isArray(item.classes)){ item.classes = [item.classes]; }
			var result = item.classes || [];
			var commponentKey = 'p-file'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['priority'] && result.indexOf('s-text-'+item['priority']) === -1){ result.push('s-text-'+item['priority']); }
			if(this.getLinkHref(item)){
				if(result.indexOf('p-link') === -1){ result.push('p-link'); }
				if(result.indexOf('s-link') === -1){ result.push('s-link'); }
				if(item['external'] && result.indexOf('s-link-external') === -1){ result.push('s-link-external'); }
			}
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 'p-file';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-text'];
			var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			result.push('externalLinkIcon');
			var styleid = this.getStyleid('link-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getClasses: function(item){
			var result = [];
			if(!item['priority'] || item['priority'] == ''){
				result.push('color-default');
			}
			else{
				result.push('s-text-'+item['priority']);
				result.push('color-'+item['priority']);
			}
			return result;
		}
	}
});
app.layout['comp__form'] = 'comp__form';
vueApp.component('comp__form', {
	mixins: [baseIncludeComponent],
	template: `
<div class="form-control">
	<input v-if="item.inputType=='text'" type="text" class="p-inputtext" :name="item.name">
	<textarea v-if="item.inputType=='textarea'" class="p-textarea" :name="item.name"></textarea>
	<template v-if="item.inputType=='radio'">
		<label v-for="item2 in item.items" class="p-radio"><input type="radio" :name="item.name"><span>{{ item2.label }}</span></label>
	</template>
	<template v-if="item.inputType=='checkbox'">
		<label v-for="item2 in item.items" class="p-checkbox"><input type="checkbox" :name="item.name"><span>{{ item2.label }}</span></label>
	</template>
	<select v-if="item.inputType=='select'" class="p-select" :name="item.name">
		<option v-for="item2 in item.items">{{ item2.text }}</option>
	</select>
</div>`,
	created: function(){
	},
	methods: {
	}
});
app.layout['comp__group'] = 'comp__group';
vueApp.component('comp__group', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-group" v-if="item.header || item.items || item.settings || item.footer" :class="[getStyle(page_info, item, 's-box-radius s-box-shadow'),item.classes,getLinkClass()]" v-bind="getAttribute(item['attrib'])">
	<div class="p-group-bg" :style="bgstyle"></div>
	<a v-if="item.linkUrl" :href="item.linkUrl" :target="getTarget(item)" class="p-group-container" v-bind="getAttribute(item['containerAttrib'])">
		<div class="p-group-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-group-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-group-settings" v-if="item.settings">
			<component v-for="(item2,index) in item.settings" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-group-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<template v-if="item.html" v-html="item.html"></template>
	</a>
	<div v-else class="p-group-container" v-bind="getAttribute(item['containerAttrib'])">
		<div class="p-group-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-group-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-group-settings" v-if="item.settings">
			<component v-for="(item2,index) in item.settings" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-group-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div v-if="item.html" v-html="item.html"></div>
	</div>
</div>`,
	methods: {
		getLinkClass() {
			if(this.item['linkUrl']){ return 'p-group-linkActive' }
			return '';
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		},
		bgstyle() {
			var result = '';
			if(this.block['settings']){
				if(this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
				if(this.block.settings.bgimage){ result+= 'background-image: url(\''+this.block.settings.bgimage+'\'),var(--color-gradation);'; }
			}
			return result;
		}
	}
});
app.layout['comp__headline'] = 'comp__headline';
vueApp.component('comp__headline', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="getHType(item)" class="p-headline" :id="getHeadlineId()" :class="[getComponentId(item, null, blockid), getHType(item), getComponentClasses(item)]">
	<div v-if="getHType(item) == 'h6'" class="p-headline-container">
		<div class="p-headline-header" v-if="item.header"><component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component></div>
		<h6 class="p-headline-items" v-if="item.value || item.items || item.subtitle || item.title || item.emtext">
			<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
			<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
			<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
			<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
			<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</h6>
	</div>
	<div v-if="getHType(item) == 'h5'" class="p-headline-container">
		<div class="p-headline-header" v-if="item.header"><component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component></div>
		<h5 class="p-headline-items" v-if="item.value || item.items || item.subtitle || item.title || item.emtext">
			<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
			<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
			<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
			<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
			<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</h5>
	</div>
	<div v-if="getHType(item) == 'h4'" class="p-headline-container">
		<div class="p-headline-header" v-if="item.header"><component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component></div>
		<h4 class="p-headline-items" v-if="item.value || item.items || item.subtitle || item.title || item.emtext">
			<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
			<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
			<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
			<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
			<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</h4>
	</div>
	<div v-if="getHType(item) == 'h3'" class="p-headline-container">
		<div class="p-headline-header" v-if="item.header"><component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component></div>
		<h3 class="p-headline-items" v-if="item.value || item.items || item.subtitle || item.title || item.emtext">
			<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
			<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
			<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
			<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
			<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</h3>
	</div>
	<div v-if="getHType(item) == 'h2'" class="p-headline-container">
		<div class="p-headline-header" v-if="item.header"><component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component></div>
		<h2 class="p-headline-items" v-if="item.value || item.items || item.subtitle || item.title || item.emtext">
			<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
			<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
			<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
			<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
			<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</h2>
		<div class="p-headline-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
	</div>
	<div v-if="getHType(item) == 'h1'" class="p-headline-container">
		<div class="p-headline-header" v-if="item.header"><component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component></div>
		<h1 class="p-headline-items" v-if="item.value || item.items || item.subtitle || item.title || item.emtext">
			<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
			<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
			<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
			<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
			<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</h1>
	</div>
	<div v-if="getHType(item) == 'div'" class="p-headline-container">
		<span v-if="item.value" class="p-text p-inlinetext" :class="[getClasses(item), item.classes]" v-html="getTextContents(item, 'value')"></span>
		<component v-if="item.header" v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		<component v-if="item.label" :is="getComponentLayout('label')" type="label" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.label"></component>
		<component v-if="item.title" :is="getComponentLayout('inlinetext')" type="inlinetext" context="cx-inlinetext-title" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.title"></component>
		<component v-if="item.subtitle" :is="getComponentLayout('subtext')" type="subtext" context="cx-subtitle-en" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item.subtitle"></component>
		<component v-if="item.items" v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="headline" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
	</div>
</div>`,
	created() {
		if(this.item['context'] == 'cx-headline-h2' && this.block && this.block['settings'] && this.block && this.block['settings']['header'] && this.block['settings']['version'] >= 5.0){
			if(!this.item['title'] && this.block['contents'] && this.block['contents']['title']){
				this.item['title'] = Object.assign({"type": "inlinetext", "workflow": "public"}, this.block['contents']['title']);
			}
			if(!this.item['subtitle'] && this.block['contents'] && this.block['contents']['subtitle']){
				this.item['subtitle'] = Object.assign({"type": "subtext", "workflow": "public"}, this.block['contents']['subtitle']);
			}
		}
		else {
			if(this.item.items && this.item.items.length > 0 && this.getHType(this.item) != 'h1'){
				var items = [];
				for(var i=0; i<this.item.items.length; i++){
					if(!this.item.title && this.item.items[i] && this.item.items[i]['type'] == 'inlinetext'){
						this.item.title = this.item.items[i];
					}
					else if(!this.item.title && this.item.items[i] && this.item.items[i]['type'] == 'text'){
						this.item.title = this.item.items[i];
						this.item.title['type'] = 'inlinetext';
					}
					else if(!this.item.subtitle && this.item.items[i] && this.item.items[i]['type'] == 'subtext'){
						this.item.subtitle = this.item.items[i];
					}
					else if(!this.item.label && this.item.items[i] && this.item.items[i]['type'] == 'label'){
						this.item.label = this.item.items[i];
					}
					else{
						items.push(this.item.items[i]);
					}
				}
				this.item.items = items;
			}
			if(this.item.title_em){ this.item.emtext = this.item.title_em; }
			if(this.item.items && this.item.items.length == 0){ this.item.items = null; }
			if(!this.item.items && this.item.title && !this.item.subtitle){
				this.item.classes = this.item.classes || [];
				if(this.item.classes.indexOf('s-headline-only-title') === -1){ this.item.classes.push("s-headline-only-title"); }
			}
		}
	},
	methods: {
		getHeadlineId: function(){
			if(this.viewComponentId){
				var result = this.getComponentId(this.item, null, this.blockid);
				return result;
			}
			return null;
		},
		getComponentClasses: function(item){
			var result = item.classes || [];
			item['h-type'] = this.getHType(item);
			var context = item['context'] || this.context;
			if(context && result.indexOf(context) === -1){ result.push(context); }
			if(item['h-type'] == 'h1' && result.indexOf('s-headline-h1') === -1){ result.push("s-headline-h1"); }
			if(item['h-type'] == 'h2' && result.indexOf('s-headline-h2') === -1){ result.push("s-headline-h2"); }
			if(item['h-type'] == 'h3' && result.indexOf('s-headline-h3') === -1){ result.push("s-headline-h3"); }
			if(item['h-type'] == 'h4' && result.indexOf('s-headline-h4') === -1){ result.push("s-headline-h4"); }
			if(item['h-type'] == 'h5' && result.indexOf('s-headline-h5') === -1){ result.push("s-headline-h5"); }
			if(item['h-type'] == 'h6' && result.indexOf('s-headline-h6') === -1){ result.push("s-headline-h6"); }
			if(context == 'cx-headline-h1' && result.indexOf('s-headline-h1') === -1){ result.push("s-headline-h1"); }
			if(context == 'cx-headline-h2' && result.indexOf('s-headline-h2') === -1){ result.push("s-headline-h2"); }
			if(context == 'cx-headline-h3' && result.indexOf('s-headline-h3') === -1){ result.push("s-headline-h3"); }
			if(context == 'cx-headline-h4' && result.indexOf('s-headline-h4') === -1){ result.push("s-headline-h4"); }
			if(context == 'cx-headline-h5' && result.indexOf('s-headline-h5') === -1){ result.push("s-headline-h5"); }
			if(context == 'cx-headline-h6' && result.indexOf('s-headline-h6') === -1){ result.push("s-headline-h6"); }
			if(context == 'cx-headline-navi' && result.indexOf('s-headline-navi') === -1){ result.push("s-headline-navi"); }
			if(Array.isArray(result) && result.indexOf('s-headline-h1') !== -1){ item['h-type'] = 'h1'; }
			if(Array.isArray(result) && result.indexOf('s-headline-h2') !== -1){ item['h-type'] = 'h2'; }
			if(Array.isArray(result) && result.indexOf('s-headline-h3') !== -1){ item['h-type'] = 'h3'; }
			if(Array.isArray(result) && result.indexOf('s-headline-h4') !== -1){ item['h-type'] = 'h4'; }
			if(Array.isArray(result) && result.indexOf('s-headline-h5') !== -1){ item['h-type'] = 'h5'; }
			if(Array.isArray(result) && result.indexOf('s-headline-h6') !== -1){ item['h-type'] = 'h6'; }
			if(Array.isArray(result) && result.indexOf('s-headline-navi') !== -1){ item['h-type'] = 'div'; }
			var commponentKey = 's-headline'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			return result;
		},
		getClasses: function(item){
			var result = [];
			if(!item['priority'] || item['priority'] == ''){
				result.push('color-default');
			}
			else{
				result.push('s-text-'+item['priority']);
				result.push('color-'+item['priority']);
			}
			if(item['title'] && !item['subtitle']){ result.push('s-title-only'); }
			if(!item['title'] && item['subtitle']){ result.push('s-subtitle-only'); }
			return result;
		},
		getHType: function(item){
			var commponentKey = 's-headline';
			var commponentId = this.getComponentStyleId(commponentKey);
			if((item.items && item.items.length > 0) || item.value || item.title || item.subtitle || item.emtext){}else{ return null; }
			var styleid = this.getStyleid('htype', null, commponentKey, commponentId);
			if(styleid){ return styleid; }
			if(item['h-type'] == 'div'){ return 'div'; }
			if(item['h-type'] == 'h1'){ return 'h1'; }
			if(item['h-type'] == 'h2'){ return 'h2'; }
			if(item['h-type'] == 'h3'){ return 'h3'; }
			if(item['h-type'] == 'h4'){ return 'h4'; }
			if(item['h-type'] == 'h5'){ return 'h5'; }
			if(item['h-type'] == 'h6'){ return 'h6'; }
			var context = item['context'] || this.context;
			if(context == 'cx-headline-h1'){ return 'h1'; }
			if(context == 'cx-headline-h2'){ return 'h2'; }
			if(context == 'cx-headline-h3'){ return 'h3'; }
			if(context == 'cx-headline-h4'){ return 'h4'; }
			if(context == 'cx-headline-h5'){ return 'h5'; }
			if(context == 'cx-headline-h6'){ return 'h6'; }
			if(context == 'cx-headline-navi'){ return 'div'; }
			if(this.parentType == 'hero'){ return 'h1'; }
			if(this.parentType == 'inner01'){ return 'h3'; }
			if(this.parentType == 'container'){ return 'h4'; }
			if(this.parentType == 'ullist'){ return 'h4'; }
			if(this.parentType == 'ollist'){ return 'h4'; }
			if(this.parentType == 'attention'){ return 'h5'; }
			if(this.parentType == 'blockquote'){ return 'h5'; }
			if(this.parentType == 'detail_body'){ return 'h3'; }
			return 'h2';
		}
	}
});
app.layout['comp__image'] = 'comp__image';
vueApp.component('comp__image', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="item.image || item.svg || item.icon" class="p-image" :class="[getComponentClasses(item)]">
	<template v-if="item.linkUrl">
		<a :href="item.linkUrl" :target="getLinkTarget(item)" :rel="getLinkRel(item)" :onclick="getLinkOnClick(item)" :data-lightbox="getDataLightbox(item)" class="p-image-wrapper" :class="getLinkClass(item)">
			<figure v-if="item.image" class="p-figure">
				<template v-if="item.imagesp">
					<img :src="item.image" :alt="item.alt || ''" class="p-image-def pconly" :style="item.style">
					<img :src="item.imagesp" :alt="item.alt || ''" class="p-image-def sponly" :style="item.style">
				</template>
				<template v-else>
					<img :src="item.image" :alt="item.alt || ''" class="p-image-def" :style="item.style">
				</template>
				<figcaption v-if="item.caption" :class="getCaptionClass(item)" v-html="getTextContents(item, 'caption')"></figcaption>
			</figure>
			<figure v-else-if="item.svg" class="p-figure"><div v-html="item.svg"></div><figcaption v-if="item.caption" v-html="getTextContents(item, 'caption')"></figcaption></figure>
			<figure v-else-if="item.icon" class="p-icon"><i v-html="item.icon"></i><figcaption v-if="item.caption" v-html="getTextContents(item, 'caption')"></figcaption></figure>
		</a>
	</template>
	<template v-else>
		<div class="p-image-wrapper" :class="getNoLinkClass(item)">
			<figure v-if="item.image" class="p-figure">
				<template v-if="item.imagesp">
					<img :src="item.image" :alt="item.alt || ''" class="p-image-def pconly" :style="item.style">
					<img :src="item.imagesp" :alt="item.alt || ''" class="p-image-def sponly" :style="item.style">
				</template>
				<template v-else>
					<img :src="item.image" :alt="item.alt || ''" class="p-image-def" :style="item.style">
				</template>
				<figcaption v-if="item.caption" :class="getCaptionClass(item)" v-html="getTextContents(item, 'caption')"></figcaption>
			</figure>
			<figure v-else-if="item.svg" class="p-figure"><div v-html="item.svg"></div><figcaption v-if="item.caption" v-html="getTextContents(item, 'caption')"></figcaption></figure>
			<figure v-else-if="item.icon" class="p-icon"><i :class="item.icon"></i><figcaption v-if="item.caption" v-html="getTextContents(item, 'caption')"></figcaption></figure>
		</div>
	</template>
</div>`,
	methods: {
		getImageWh: function(item){
			if(this.item.image_wh){ return this.item.image_wh; }
			return this.item.image;
		},
		getComponentClasses: function(item){
			var result = item.classes || [];
			var context = item['context'] || this.context;
			if(context && result.indexOf(context) === -1){ result.push(context); }
			var commponentKey = 's-image'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('size-fit', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var styleid = this.getStyleid('size-position', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('image-position', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['caption']){ result.push('p-image-caption'); }
			if(item['overlap_images']){
				if(result.indexOf('p-image-overlap-container') === -1){ result.push('p-image-overlap-container'); }
			}
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-image';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-image'];
			var styleid = this.getStyleid('link-image', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-image-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-image', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-image', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push('frame-image'); result.push(styleid); }
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-image';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-image', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push('frame-image'); result.push(styleid); }
			return result;
		},
		getCaptionClass: function(item){
			var commponentKey = 's-image';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('bg-image-caption', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push('frame-image'); result.push(styleid); }
			var styleid = this.getStyleid('image-position-caption', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push('frame-image'); result.push(styleid); }
			return result;
		},
		getDataLightbox: function(item){
			if(item['lightbox'] && item['lightbox']['name']){ return item['lightbox']['name']; }
		}
	}
});
app.layout['comp__images'] = 'comp__images';
vueApp.component('comp__images', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="item.items" class="p-images" :class="[getComponentClasses(item)]">
	<component v-for="(item2,index2) in item.items" :is="getComponentLayout(item2.type, 'image')" :parentContext="item.context" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
</div>`,
	created: function(){
		if(this.item['context'] == 'cx-images' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var commponentKey = 's-images'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('align-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('align-container-sp', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }

			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf('grid-'+styleid) === -1){ result.push('grid-'+styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }

			if(!item['priority'] || item['priority'] == ''){
				if(result.indexOf('color-default') === -1){ result.push('color-default'); }
			}
			else{
				if(result.indexOf('s-text-'+item['priority']) === -1){ result.push('s-text-'+item['priority']); }
				if(result.indexOf('color-'+item['priority']) === -1){ result.push('color-'+item['priority']); }
			}
			return result;
		}
	}
});
app.layout['comp__inlinetext'] = 'comp__inlinetext';
vueApp.component('comp__inlinetext', {
	mixins: [baseIncludeComponent],
	template: `
<template v-if="1">
	<template v-if="getLinkHref(item)">
		<a :href="getLinkHref(item)" :target="getLinkTarget(item)" :rel="getLinkRel(item)" :onclick="getLinkOnClick(item)" :class="[getComponentClasses(item),getLinkClass(item)]"><i v-if="item.icon" :class="[item.icon]"></i><i v-if="item.icon_image" class="icon-image" :style="getIconImageStyle(item)"></i><span class="p-text-inner" v-html="getTextContents(item, 'value')"></span></a>
	</template>
	<template v-else-if="item.icon || item.icon_image">
		<span :class="[getComponentClasses(item),getNoLinkClass(item)]"><i v-if="item.icon" :class="[item.icon]"></i><i v-if="item.icon_image" class="icon-image" :style="getIconImageStyle(item)"></i><span class="p-text-inner" v-html="getTextContents(item, 'value')"></span></span>
	</template>
	<template v-else>
		<span :class="[getComponentClasses(item),getNoLinkClass(item)]" v-html="getTextContents(item, 'value')"></span>
	</template>
</template>`,
	created: function(){
		if(this.item.title && !this.item.value){ this.item.value = this.item.title; }
	},
	methods: {
		getCommponentKey: function(item){
			var type = item['type'] || this.type;
			var commponentKey = 's-text';
			if(type == 'inlinetext'){ commponentKey = 's-inlinetext'; }
			else if(type == 'subtext'){ commponentKey = 's-subtext'; }
			else if(type == 'datetime'){ commponentKey = 's-datetime'; }
			else if(type == 'tel'){ commponentKey = 's-tel'; }
			else if(type == 'textarea'){ commponentKey = 's-text'; }
			else if(type == 'richtext'){ commponentKey = 's-text'; }
			return commponentKey;
		},
		getComponentClasses: function(item){
			if(item.classes && !Array.isArray(item.classes)){ item.classes = [item.classes]; }
			var result = item.classes || [];
			var type = item['type'] || this.type;
			if(type == 'inlinetext'){ if(result.indexOf('p-inlinetext') === -1){ result.push('p-inlinetext'); } }
			else if(type == 'emtext'){ result.push('p-emtext'); }
			else if(type == 'subtext'){ result.push('p-subtext'); }
			else if(type == 'datetime'){ result.push('p-datetime'); }
			else if(type == 'tel'){ result.push('p-tel'); }
			else if(type == 'textarea'){ result.push('p-textarea p-text'); }
			else{ result.push('p-text'); }
			var commponentKey = this.getCommponentKey(item); if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(this.getLinkHref(item)){
				if(result.indexOf('p-link') === -1){ result.push('p-link'); }
				if(result.indexOf('s-link') === -1){ result.push('s-link'); }
				if(item['external'] && result.indexOf('s-link-external') === -1){ result.push('s-link-external'); }
			}
			return result;
		},
		getNoLinkClass: function(item){
			var result = [];
			var commponentKey = this.getCommponentKey(item);
			var commponentId = this.getComponentStyleId(commponentKey);
			if(result.indexOf('p-textarea') === -1){
				var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			return result;
		},
		getLinkClass: function(item){
			if(['links','ullist','ollist','headline'].indexOf(this.parentType) !== -1){}
			else{ return null; }
			if(['links','ullist','ollist','headline'].indexOf(this.parentType) !== -1){
				var result = ['link-text'];
				if(this.getTarget(item)){
					if(this.page_info.styles && result.indexOf(this.page_info.styles['link-external']) === -1){ result.push(this.page_info.styles['link-external']); }
					result.push('externalLinkIcon');
				}
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-text']) === -1){ result.push(this.page_info.styles['link-text']); }
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-text-hover']) === -1){ result.push(this.page_info.styles['link-text-hover']); }
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-icon']) === -1){ result.push(this.page_info.styles['link-icon']); }
			}
			if(['header'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-header-text'];
				if(this.getTarget(item)){
					if(this.page_info.styles && result.indexOf(this.page_info.styles['link-external']) === -1){ result.push(this.page_info.styles['link-external']); }
					result.push('externalLinkIcon');
				}
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-header-text']) === -1){ result.push(this.page_info.styles['link-header-text']); }
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-header-text-hover']) === -1){ result.push(this.page_info.styles['link-header-text-hover']); }
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-header-icon']) === -1){ result.push(this.page_info.styles['link-header-icon']); }
			}
			if(['footer'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-footer-text'];
				if(this.getTarget(item)){
					if(this.page_info.styles && result.indexOf(this.page_info.styles['link-external']) === -1){ result.push(this.page_info.styles['link-external']); }
					result.push('externalLinkIcon');
				}
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-footer-text']) === -1){ result.push(this.page_info.styles['link-footer-text']); }
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-footer-text-hover']) === -1){ result.push(this.page_info.styles['link-footer-text-hover']); }
				if(this.page_info.styles && result.indexOf(this.page_info.styles['link-footer-icon']) === -1){ result.push(this.page_info.styles['link-footer-icon']); }
			}
			return result;
		}
	}
});
app.layout['comp__label'] = 'comp__label';
vueApp.component('comp__label', {
	mixins: [baseIncludeComponent],
	template: `
<label v-if="item.value" class="p-label" :class="[getComponentClasses(item)]" :style="getComponentStyle(item)">
	<component :is="getComponentLayout('inlinetext')" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
</label>`,
	methods: {
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['priority'] && result.indexOf('s-label-'+item['priority']) === -1){ result.push('s-label-'+item['priority']); }
			var commponentKey = 's-label'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('s-label-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-label', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-label'); result.push(styleid); }
			return result;
		},
		getComponentStyle: function(item){
			var result = "";
			if(item['bg-color']){ result+= 'background-color:'+item['bg-color']+';'; }
			return result;
		}
	}
});
app.layout['comp__labels'] = 'comp__labels';
vueApp.component('comp__labels', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-labels p-label-container" :class="[getComponentClasses(item)]">
	<div v-if="item.header" class="p-labels-header">
		<component v-for="(item3,index) in item.header" :is="getComponentLayout(item3.type)" parent-type="labels" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
	<div class="p-labels-container">
		<component v-for="(item2,index2) in item.items" :is="getComponentLayout(item2.type, 'label')" parent-type="labels" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div v-if="item.footer" class="p-labels-footer">
		<component v-for="(item3,index) in item.footer" :is="getComponentLayout(item3.type)" parent-type="labels" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
</div>
`,
	methods: {
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(!item['priority'] || item['priority'] == ''){
				if(result.indexOf('color-default') === -1){ result.push('color-default'); }
			}
			else{
				if(result.indexOf('s-text-'+item['priority']) === -1){ result.push('s-text-'+item['priority']); }
				if(result.indexOf('color-'+item['priority']) === -1){ result.push('color-'+item['priority']); }
			}
			if(item.styles && result.indexOf(item.styles['s-labels']) === -1){ result.push(item.styles['s-labels']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-labels']) === -1){ result.push(this.page_info.styles['s-label']); }
			return result;
		}
	}
});
app.layout['comp__links'] = 'comp__links';
vueApp.component('comp__links', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="item.items" class="p-links p-link-container" :class="[getComponentClasses(item)]" :style="getStyles(item)" :data-parent-type="parentType">
	<component v-for="(item2,index2) in item.items" :is="getComponentLayout(item2.type)" :parent-type="parentType || 'links'" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
</div>
`,
	methods: {
		getStyles: function(item){
			var result = '';
			if(item['position'] && item['position'] == 'center'){ result+= 'text-align:center;'; }
			if(item['position'] && item['position'] == 'right'){ result+= 'text-align:right;'; }
			return result;
		},
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-links']) === -1){ result.push(this.page_info.styles['s-links']); }
			return result;
		}
	}
});
app.layout['comp__note'] = 'comp__note';
vueApp.component('comp__note', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-note" v-if="item.header || item.items || item.footer" :class="[getComponentClass(item), getStyle(page_info, item, 's-box-radius s-box-shadow')]">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="item"></component>
	<div class="p-note-container">
		<div class="p-note-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" parent-type="note" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-note-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" parent-type="note" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
		<div class="p-note-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" parent-type="note" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index"></component>
		</div>
	</div>
</div>`,
	created() {
		if(this.item.value){
			this.item.items = this.item.items || [];
			this.item.items.push({"type": "text", "workflow": "public", "value":this.item.value});
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }

			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}

			if(this.page_info.styles){
				var value = this.page_info.styles['s-note'];
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			return result;
		}
	}
});
app.layout['comp__ollist'] = 'comp__ollist';
vueApp.component('comp__ollist', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-ollist" :class="[getComponentClass(item)]">
	<div v-if="item.header && item.header.length" class="p-ullist-header">
		<component v-for="(item3,index) in item.header" :is="getComponentLayout(item3.type)" parent-type="ollist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
	<ol class="p-ollist-container">
		<li v-for="item2 in item.items" :class="[getListClasses(item2)]">
			<template v-if="getLinkHref(item2)">
				<component v-if="item2.value" :is="getComponentLayout(item2.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
				<a v-if="item2.items" :href="getLinkHref(item2)" :target="getLinkTarget(item2)" :rel="getLinkRel(item2)" class="p-ullist-child">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</a>
			</template>
			<template v-else>
				<component v-if="item2.value" :is="getComponentLayout(item2.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
				<div v-if="item2.items" class="p-ullist-child">
					<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
		</template>
		</li>
	</ol>
	<div v-if="item.footer" class="p-ullist-footer">
		<component v-for="(item3,index) in item.footer" :is="getComponentLayout(item3.type)" parent-type="ollist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
</div>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(this.page_info.styles){
				var value = this.page_info.styles['s-ollist'];
				if(result.indexOf(value) === -1){ result.push(value); }
			}
			return result;
		},
		getListClasses: function(item){
			var result = item.classes || [];
			if(this.getLinkHref(item)){
				if(result.indexOf('s-ollist-li-link') === -1){ result.push('s-ollist-li-link'); }
			}
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		}
	}
});
app.layout['comp__pagination'] = 'comp__pagination';
vueApp.component('comp__pagination', {
	mixins: [baseIncludeComponent],
	template: `
<nav v-if="item.usePagenation == 'true'" class="l-pagination-container" aria-label="Page navigation">
	<ul class="pagination">
		<li v-if="item.prev" class="page-item page-prev"><a class="page-link" :href="getPage(item.prev.page)">Prev</a></li>
		<template v-for="page in item.list"><li class="page-item" :class="getPageClass(page)" v-if="page && page.type=='no'"><a class="page-link" :href="getPage(page.page)">{{ page.no }}</a></li></template>
		<li v-if="item.next" class="page-item page-next"><a class="page-link" :href="getPage(item.next.page)">Next</a></li>
	</ul>
</nav>
`,
	created() {
		// console.log(this);
	},
	methods: {
		getPage: function(no){
			var result = this.page_info['location']['pathname'];
			var query = {};
			if(this.page_info['location']['query']){
				query = this.getSearchQuery(this.page_info['location']['query']);
			}
			query['page'] = no;
			result+= '?'+this.joinSearchQuery(query);
			return result;
		},
		getPageClass: function(item){
			if(item.active == 'true'){ return 'active'; }
			return null;
		},
		getComponentClass: function(item){
			var result = item.classes || [];
			var styleid = this.getStyleid('s-pagination');
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color');
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getListClasses: function(item){
			var result = item.classes || [];
			var styleid = this.getStyleid('comp__pagination__list-bg-color');
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		}
	}
});
app.layout['comp__point'] = 'comp__point';
vueApp.component('comp__point', {
	mixins: [baseIncludeComponent],
	template: `
<div :class="[getComponentClass(item), getStyle(page_info, item, 's-btn-radius s-btn-shadow')]">
	<template v-for="(item2,index2) in item.items">
		<a v-if="getHref(item2)" :href="getHref(item2)" :target="getTarget(item2)" class="p-point-item">
			<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
		</a>
		<div v-else class="p-point-item">
			<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
		</div>
	</template>
</div>
`,
	created: function(){
		if(this.item.title && !this.item.value){ this.item.value = this.item.title; }
		if(this.item.linkurl && !this.item.linkUrl){ this.item.linkUrl = this.item.linkurl; }
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(result.indexOf('p-point') === -1){ result.push('p-point'); }
			if(result.indexOf('s-point') === -1){ result.push('s-point'); }
			if(item['context']){
				var context = item['context'];
				if(result.indexOf(context) === -1){ result.push(context); }
				if(this.page_info.styles && this.page_info.styles[context] && result.indexOf(this.page_info.styles[context]) === -1){ result.push(this.page_info.styles[context]); }
			}
			else if(this.context && result.indexOf(this.context) === -1){ result.push(this.context); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-point']) === -1){ result.push(this.page_info.styles['s-point']); }
			return result;
		}
	}
});
app.layout['comp__rel-link-article'] = 'comp__rel-link-article';
vueApp.component('comp__rel-link-article', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-rel-link-article" :class="getComponentClass(item)" v-if="item.items">
	<div class="p-rel-link-article-header" v-if="item.header && item.header.length>0">
		<component v-for="(item2,index2) in item.header" :is="getComponentLayout(item2.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
	</div>
	<div class="p-rel-link-article-items">
		<div class="p-rel-link-article-wrapper" v-for="(item2,index2) in item.items" :class="getContainerClass(item2)">
			<a v-if="item2.linkUrl" :href="item2.linkUrl" :target="getTarget(item2)" class="p-container-container" :class="getLinkClass(item2)" v-bind="getAttribute(item['containerAttrib'])">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</a>
			<div v-else class="p-container-container" v-bind="getAttribute(item['containerAttrib'])" :class="getNoLinkClass(item2)">
				<div class="p-container-images" v-if="item2.images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-navi" v-if="item2.navi" :class="getNaviClass(item)">
					<component v-for="(item3,index3) in item2.navi" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
				<div class="p-container-wrapper" :class="getItemsClass(item)">
					<div class="p-container-header" v-if="item2.header">
						<component v-for="(item3,index3) in item2.header" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
					<div class="p-container-items" v-if="item2.items">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
						<component v-if="item2.subitems" v-for="(item3,index3) in item2.subitems" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
				<div class="p-container-second-images" v-if="item2.second_images" :class="getImagesClass(item)">
					<component v-for="(item3,index3) in item2.second_images" :is="getComponentLayout(item3.type)" :parentContext="item.context" parent-type="container" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
				</div>
			</div>
		</div>
	</div>
</div>`,
	created() {
		if(this.item && this.item['context'] == 'cx-container-horizontal' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item || {}, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('size', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			else if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['layout'] && result.indexOf(item['layout']) === -1){ result.push(item['layout']); }
			var styleid = this.getStyleid('bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('grid-'+styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		},
		getContainerClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item.styles && result.indexOf(item.styles['s-shadow']) === -1){ result.push(item.styles['s-shadow']); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = ['link-container'];
			if(this.getLinkTarget(item)){ result.push('externalLinkIcon'); }
			var styleid = this.getStyleid('link-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-container-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-icon-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			var styleid = this.getStyleid('frame-container-link-hover', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getNoLinkClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getNaviClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-navi', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-navi-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-navi-color'); result.push(styleid); }
			return result;
		},
		getImagesClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-images', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-images-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-images-color'); result.push(styleid); }
			return result;
		},
		getItemsClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('align-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('valign-container-items', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-items-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-items-color'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getAttribute(attrib) {
			if(attrib){ return attrib; }
		}
	}
});
app.layout['comp__rel-link-list'] = 'comp__rel-link-list';
vueApp.component('comp__rel-link-list', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-section-wrapper p-rel-link-list">
  <div class="l-section-container">
    <div class="l-header-wrapper s-container-fix" v-if="item.title">
      <div class="p-headline comp-1 h2 s-headline-only-title cx-headline-h2 s-headline-h2 s-headline s-headline-simple">
        <div class="p-headline-container">
          <h2 class="p-headline-items"><span class="p-inlinetext s-inlinetext link-external-fontawsome link-text-arrow01 link-text-hover-underline01 link-icon-fontawsome" v-html="item.title"></span></h2>
        </div>
      </div>
    </div>
    <div class="l-content-wrapper s-container-fix" v-if="item.items">
      <ul class="l-content-container">
        <li v-for="item2,index2 in item.items">
					<component is="comp__text" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
				</li>
      </ul>
    </div>
  </div>
</div>`,
	methods: {
		getStyles: function(item){
			var result = '';
			if(item['position'] && item['position'] == 'center'){ result+= 'text-align:center;'; }
			if(item['position'] && item['position'] == 'right'){ result+= 'text-align:right;'; }
			return result;
		},
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-links']) === -1){ result.push(this.page_info.styles['s-links']); }
			return result;
		}
	}
});
app.layout['comp__rel-link-reference'] = 'comp__rel-link-reference';
vueApp.component('comp__rel-link-reference', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-section-wrapper p-rel-link-reference">
    <div class="l-section-container">
	<div class="l-header-wrapper s-container-fix" v-if="item.title">
	<div class="p-headline comp-1 h2 s-headline-only-title cx-headline-h2 s-headline-h2 s-headline s-headline-simple">
	  <div class="p-headline-container">
		<h2 class="p-headline-items"><span class="p-inlinetext s-inlinetext link-external-fontawsome link-text-arrow01 link-text-hover-underline01 link-icon-fontawsome" v-html="item.title"></span></h2>
	  </div>
	</div>
  </div>
        <div class="l-content-wrapper s-container-fix">
		<ul class="l-content-container">
        <li v-for="item2,index2 in item.items">
					<component is="comp__text" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
				</li>
      </ul>
        </div>
    </div>
</div>`,
	methods: {
		getStyles: function(item){
			var result = '';
			if(item['position'] && item['position'] == 'center'){ result+= 'text-align:center;'; }
			if(item['position'] && item['position'] == 'right'){ result+= 'text-align:right;'; }
			return result;
		},
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-links']) === -1){ result.push(this.page_info.styles['s-links']); }
			return result;
		}
	}
});
app.layout['comp__remarks'] = 'comp__remarks';
vueApp.component('comp__remarks', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-remarks" v-if="item.header || item.items || item.footer" :class="getComponentClasses(item)">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="item"></component>
	<div class="p-remarks-container">
		<div class="p-remarks-header" v-if="item.header">
			<component v-for="(item2,index) in item.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-remarks-items" v-if="item.items">
			<component v-for="(item2,index) in item.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
		<div class="p-remarks-footer" v-if="item.footer">
			<component v-for="(item2,index) in item.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index" parentType="inner01"></component>
		</div>
	</div>
</div>`,
	methods: {
		getComponentClasses: function(item){
			var result = item.classes || [];
			if(!item['priority'] || item['priority'] == ''){
				result.push('color-default');
			}
			else{
				result.push('s-text-'+item['priority']);
				result.push('color-'+item['priority']);
			}
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-remarks']) === -1){ result.push(this.page_info.styles['s-remarks']); }
			return result;
		}
	}
});
app.layout['comp__search-form'] = 'comp__search-form';
vueApp.component('comp__search-form', {
	mixins: [baseIncludeComponent],
	template: `
<form v-if="item.action" :action="item.action" method="get" :class="[getComponentClasses(item)]">
	<input type="text" name="q" placeholder="">
	<button type="submit">検索</button> 
</form>`,
	methods: {
		getComponentClasses: function(item){
			var result = item.classes || [];
			var context = item['context'] || this.context;
			if(context && result.indexOf(context) === -1){ result.push(context); }
			var commponentKey = 's-search-form'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			return result;
		}
	}
});
app.layout['comp__table'] = 'comp__table';
vueApp.component('comp__table', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-table" :class="[getComponentClass(item)]">
	<div v-if="item.title" class="p-title">
		<p class="p-text" v-html="getTextContents(item, 'title')"></p>
	</div>
	<table :class="getTableClass(item)">
	<thead v-if="item.tableHeader">
		<tr v-for="row in item.tableHeader">
			<template v-for="col in row">
				<th v-if="col.type=='th'" :class="[getColClass(col)]" :colspan="getAttrib(col.attr, 'colspan')" :rowspan="getAttrib(col.attr, 'rowspan')">
					<component v-if="col.value" :is="getComponentLayout(col.type)" :page_info="page_info" :layout="layout" :block="block" :item="col"></component>
					<component v-if="col.items" v-for="(item2,index2) in col.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
				</th>
				<td v-else :class="[getColClass(col)]" :colspan="getAttrib(col.attr, 'colspan')" :rowspan="getAttrib(col.attr, 'rowspan')">
					<component v-if="col.value" :is="getComponentLayout(col.type)" :page_info="page_info" :layout="layout" :block="block" :item="col"></component>
					<component v-if="col.items" v-for="(item2,index2) in col.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
				</td>
			</template>
		</tr>
	</thead>
	<tbody v-if="item.tableItems">
		<tr v-for="row in item.tableItems">
			<template v-for="col in row">
				<th v-if="col.type=='th'" :class="[getColClass(col)]" :colspan="getAttrib(col.attr, 'colspan')" :rowspan="getAttrib(col.attr, 'rowspan')">
					<component v-if="col.value" :is="getComponentLayout(col.type)" :page_info="page_info" :layout="layout" :block="block" :item="col"></component>
					<component v-if="col.items" v-for="(item2,index2) in col.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
				</th>
				<td v-else :class="[getColClass(col)]" :colspan="getAttrib(col.attr, 'colspan')" :rowspan="getAttrib(col.attr, 'rowspan')">
					<component v-if="col.value" :is="getComponentLayout(col.type)" :page_info="page_info" :layout="layout" :block="block" :item="col"></component>
					<component v-if="col.items" v-for="(item2,index2) in col.items" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
				</td>
			</template>
		</tr>
	</tbody>
	</table>
	<div v-if="item.summary" class="p-note p-note-def">
		<p class="p-text" v-html="getTextContents(item, 'summary')"></p>
	</div>
</div>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var commponentKey = 's-table'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			var styleid = this.getStyleid('bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-radius']) === -1){ result.push(this.page_info.styles['s-radius']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-table-radius']) === -1){ result.push(this.page_info.styles['s-table-radius']); }
			return result;
		},
		getTableClass: function(item){
			var commponentKey = 's-container-horizontal';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = [];
			var styleid = this.getStyleid('frame-container', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push('frame-container'); result.push(styleid); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getColClass: function(item){
			var result = item.classes || [];
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		}
	}
});
app.layout['comp__tablist'] = 'comp__tablist';
vueApp.component('comp__tablist', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-tablist" :class="[getComponentClass(item)]">
	<div class="tab-container">
		<ul role="tablist" class="tab l-spPulldown js-pulldown" id="tab-news">
			<li role="presentation"><a href="#tabContentNews01" role="tab" aria-controls="panel1" aria-selected="true"><span>最近のニュース</span></a></li>
			<li role="presentation"><a href="#tabContentNews02" role="tab" aria-controls="panel2" aria-selected="false"><span>お知らせ</span></a></li>
			<li role="presentation"><a href="#tabContentNews03" role="tab" aria-controls="panel3" aria-selected="false"><span>プレスリリース</span></a></li>
			<li role="presentation"><a href="#tabContentNews04" role="tab" aria-controls="panel4" aria-selected="false"><span>イベント・セミナー</span></a></li>
		<!-- /#tab-news --></ul>
	</div>
	<section id="tabContentNews01" class="tabContent" role="tabpanel">
	<div class="p-group box"><div class="p-group-bg"></div><div class="p-group-container"><!--v-if--><div class="p-group-items"><div class="p-container"><a href="https://www.cac.co.jp/trends/trend35.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.09.05</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「製薬企業のデジタルマーケティング推進を支援するCACの取り組み」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.kokuchpro.com/event/olive2022/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.09.05</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">Olive秘書セミナー2022<br>（オンライン開催・10月20日（木） 。イベント告知サービス「こくちーず」のサイトへ）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://bit.ly/3QLOA0W" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.29</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「Future of Manufacturing with AWS Partner ～ 製造業界のクラウド活用事例をご紹介～」に登壇<br>（オンライン開催・9月15日（木）13:00～13:45）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220829.html" target="_self" class="p-container-container"><div class="p-container-header"><span class="p-datetime">2022.08.29</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、AWS導入・活用サービス「enterpriseCloud+」で「内製化支援サービス」を提供開始<br>～ AWS環境でのシステム内製化を目指す企業を支援 ～</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/case/konoike.html" target="_self" class="p-container-container"><div class="p-container-header"><span class="p-datetime">2022.08.25</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">鴻池運輸様のアジャイル支援サービス導入事例を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-8-16-2022-rpa-magic-quadrant-gartner/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.25</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「2022年度版 RPAのマジック・クアドラント」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/report/a82" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.24</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">AWS技術レポート<br>「開発・リリースフローの変化 後編　～サーバーレスアーキテクチャで何が変わるのか～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/customer/a83" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.10</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">ハイテックシステムズ様のenterpriseCloud+導入事例を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220804.html" target="_self" class="p-container-container"><div class="p-container-header"><span class="p-datetime">2022.08.04</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">クオール株式会社の人事給与BPOサービス導入事例をCACが公開</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/trends/trend34.html" target="_self" class="p-container-container"><div class="p-container-header"><span class="p-datetime">2022.08.03</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「「みちびき×ブロックチェーンを用いた配達員保険システム」の実証実験」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220801.html" target="_self" class="p-container-container"><div class="p-container-header"><span class="p-datetime">2022.08.01</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、医薬品研究領域での化合物サンプル管理ソリューション「RETIP」を提供開始<br>～ 創薬研究の効率化を支援 ～</span></p></div><!--v-if--></a></div></div><!--v-if--><!--v-if--></div></div>
	<!-- /.tabContent --></section>
	<section id="tabContentNews02" class="tabContent" role="tabpanel">
	<div class="p-group box"><div class="p-group-bg"></div><div class="p-group-container"><!--v-if--><div class="p-group-items"><div class="p-container"><a href="https://www.cac.co.jp/trends/trend35.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.09.05</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「製薬企業のデジタルマーケティング推進を支援するCACの取り組み」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/case/konoike.html" target="_self" class="p-container-container"><div class="p-container-header"><span class="p-datetime">2022.08.25</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">鴻池運輸様のアジャイル支援サービス導入事例を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-8-16-2022-rpa-magic-quadrant-gartner/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.25</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「2022年度版 RPAのマジック・クアドラント」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/report/a82" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.24</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">AWS技術レポート<br>「開発・リリースフローの変化 後編　～サーバーレスアーキテクチャで何が変わるのか～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/customer/a83" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.10</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">ハイテックシステムズ様のenterpriseCloud+導入事例を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-7-28-dx-what-and-how/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.04</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「業務改善は「What」が正しいと「How」も上手く進む」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/trends/trend34.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.03</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「「みちびき×ブロックチェーンを用いた配達員保険システム」の実証実験」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/report/a81" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.27</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">AWS技術レポート<br>「開発・リリースフローの変化 前編　～サーバーレスアーキテクチャで何が変わるのか～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/company/awarded.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.07</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「主な受賞・認定履歴」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-6-30-2022h2-popular-column-top10/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.06</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「2022年上半期 人気コラムランキングを大公開」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220704.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.04</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACが「DX認定」を取得</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/trends/trend33.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.30</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「顔認証決済サービスの社内実証実験の取り組み」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://olive-cac.jp/blog/20220610-business-chat/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.13</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">秘書の仕事を考えるOliveコラム「秘書が知っておくべきビジネスチャットの活用方法」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-5-26-rpa-software-position-map/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.09</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「RPAソフトウェアのポジショニングを改めておさらい」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/company/discover-cac.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.31</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「数字でわかる！CAC」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/dx-initiatives/message.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.27</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「CACにおけるDXの推進について(経営者DX推進メッセージ)」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/report/a79" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.27</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">AWS技術レポート「サーバーレスアーキテクチャにおけるバックエンドとバッキングサービス<br>～サーバーレスアーキテクチャで何が変わるのか～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-4-28-uipath-modern-design/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.10</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「UiPathの新機能、モダンデザインを使ってみました」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-04-18-konmari-method-and-enablement/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.20</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「「こんまりメソッド」と「RPA自社開発イネーブルメントプログラム」の意外な共通点」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220412.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.12</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">健康優良企業「金の認定」取得のお知らせ</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-3-31-servicenow-automation-engine-inner-robot/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.11</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「ServiceNow Automation Engineにみる「中にいるロボット」」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://olive-cac.jp/blog/20220406-fighting-with-boss/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.06</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">秘書の仕事を考えるOliveコラム「ボスと共に闘う ～新しい秘書の価値とは～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220406.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.06</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、RPAツール「UiPath」パートナープログラムの「ゴールドパートナー」に認定</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/report/a78" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.05</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">AWS技術レポート「サーバーレスアプリケーションの認証と認可<br>～サーバーレスアーキテクチャで何が変わるのか～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/trends/trend32.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.28</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「教育業界が初採用！表情・感情認識AI「心sensor for Communication」がWebコミュニケーションの課題を解決」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220324.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.24</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">シンガポール現地法人「CAC Consulting & Technology Singapore Pte. Ltd.」を設立</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-3-17-web-browser-ver100-and-rpa/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.23</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「Webブラウザ バージョン100問題のRPAへの影響について」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://olive-cac.jp/case_study_mebuki/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.22</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">めぶきフィナンシャルグループ様の秘書室システムOlive導入事例を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/trends/trend31.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.16</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACトレンドに「見えてきたワーケーションの効果と課題」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-2-18-how-to-use-json-in-uipath-studio-2/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.10</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「UiPath StudioでJSONデータをもっと活用するために【JSONデータ受取時の補足】」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/library_rpa-interview01/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.09</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC x ファーストアカウンティング対談「AI-OCRとRPA連携で経理業務を変革」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/report/a77" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.02</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">AWS技術レポート<br>「サーバーレスアーキテクチャで何が変わるのか～Web3層アプリケーションとの比較～」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://olive-cac.jp/blog/20220131-secretary-task-and-reward/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.02.16</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">秘書の仕事を考えるOliveコラム「秘書の雑用とご褒美」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/column/2022-2-1-how-to-use-json-in-uipath-studio/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.02.09</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">コラム「RPAの気になる話」<br>「UiPath StudioでJSONデータをもっと活用するために」を掲載</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/company/policy.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.01.27</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">企業理念に、Vision（CAC Vision 2030）、Value（Five Values）を追加しました。</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://ecloudp.com/media/customer/a80" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.01.05</span><label class="p-label color-default s-label-cac001"><span class="p-text">お知らせ</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">ソフトバンクロボティクス様のenterpriseCloud+導入事例を掲載</span></p></div><!--v-if--></a></div></div><!--v-if--><!--v-if--></div></div>
	<!-- /.tabContent --></section>
	<section id="tabContentNews03" class="tabContent" role="tabpanel">
	<div class="p-group box"><div class="p-group-bg"></div><div class="p-group-container"><!--v-if--><div class="p-group-items"><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220829.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.29</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、AWS導入・活用サービス「enterpriseCloud+」で「内製化支援サービス」を提供開始<br>～ AWS環境でのシステム内製化を目指す企業を支援 ～</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220804.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.04</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">クオール株式会社の人事給与BPOサービス導入事例をCACが公開</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220801.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.01</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、医薬品研究領域での化合物サンプル管理ソリューション「RETIP」を提供開始<br>～ 創薬研究の効率化を支援 ～</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220719.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.19</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、準天頂衛星システム「みちびき」とブロックチェーンを用いた配達員保険システムの実証実験を実施</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220705.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.05</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、医療従事者向け会員サイトプラットフォームの構築・運用サービスを開始<br>～ 製薬企業のデジタルプロモーション推進をサポート ～</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220701.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.01</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、「秘書室システムOlive」メジャーバージョンアップ版を提供開始<br>～ 操作性を改善し、マルチデバイスにも対応 ～</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220622.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.22</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CAC、千葉大学病院およびメディエイドが共同で「医師間オンラインコンサルテーションシステム」の実証実験を開始<br>～ 症例に関する相談や紹介で、地域医療機関から専門病院等へのアクセスをより簡便かつ効率的に ～</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220317.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.17</span><label class="p-label color-default s-label-cac001"><span class="p-text">プレスリリース</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">CACの表情・感情認識AIをベネッセが英語オンラインレッスンの講師の指導品質向上に活用<br>～ オンラインレッスン中の講師の表情やジェスチャーをリアルタイム解析 ～</span></p></div><!--v-if--></a></div></div><!--v-if--><!--v-if--></div></div>
	<!-- /.tabContent --></section>
	<section id="tabContentNews04" class="tabContent" role="tabpanel">
	<div class="p-group box"><div class="p-group-bg"></div><div class="p-group-container"><!--v-if--><div class="p-group-items"><div class="p-container"><a href="https://www.kokuchpro.com/event/olive2022/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.10.20</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">Olive秘書セミナー2022<br>（オンライン開催。イベント告知サービス「こくちーず」のサイトへ）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://bit.ly/3QLOA0W" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.09.15</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「Future of Manufacturing with AWS Partner ～ 製造業界のクラウド活用事例をご紹介～」に登壇<br>（オンライン開催・13:00～13:45）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-8-24-cac-rpanext-collaboration/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.08.24</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「業務改善を狙い通りに進める2つの手法をお伝えします」セミナー<br>（（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://service.cac.co.jp/agile/seminar_2022summer" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.27</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">アジャイル実践セミナー2022夏<br>「アジャイルコーチが解説！実際のプロジェクトで期待されるキーマンの立ち振る舞い」<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-7-13-uipath-dev-seminar-04/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.13</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">のどか先輩のUiPath開発解説シリーズ 第4回<br>「もっとステップアップ、パフォーマンス問題まとめて解消編」セミナー（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-7-6-uipath-dev-seminar-03/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.06</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">のどか先輩のUiPath開発解説シリーズ 第3回<br>「初心者からステップアップ、美しいワークフローの作り方編」セミナー（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220615.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.07.06</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">FITウェビナー「「非対面」でも営業力を加速させるAIを活用したDXのご紹介」<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-6-22-uipath-dev-seminar-02/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.22</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">のどか先輩のUiPath開発解説シリーズ 第2回<br>「みんながつまづく、UiPathあるあるエラー解決編」セミナー（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-6-15-uipath-dev-seminar-01/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.15</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">のどか先輩のUiPath開発解説シリーズ 第1回<br>「初心者でもできる、UiPath開発の基本操作編」セミナー（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/news/2022-summer-uipath-dev-seminar/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.06.15-07.13</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">ステップアップしながら学べる「のどか先輩のUiPath開発解説シリーズ 全4回」<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-5-25-techniques-of-uipath-performance/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.25</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「パフォーマンス改善のためのUiPath開発実践テクニック」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-5-18-api-call-from-rpa/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.18</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「APIを使うなら必須！RPAでJSONを使いこなす」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220502.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.05.11-13</span><label class="p-label color-default s-label-cac001"><span class="p-text">イベント</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「NexTech Week2022【春】内「AI・人工知能EXPO」出展</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-4-20-techniques-of-uipath-performance/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.20</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「パフォーマンス改善のためのUiPath開発実践テクニック」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-4-13-api-call-from-rpa/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.04.13</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「APIを使うなら必須！RPAでJSONを使いこなす」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://www.cac.co.jp/news/topics_220408.html" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.30-04.01</span><label class="p-label color-default s-label-cac001"><span class="p-text">イベント</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「金融×最新テクノロジー EXPO ONLINE」出展</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-3-23-rpa-aiocr-integration/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.23</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「デモで紹介！RPAとAI-OCRで紙業務をデジタル化する」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-3-16-api-call-from-rpa/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.16</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「APIを使うなら必須！RPAでJSONを使いこなす」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-3-9-beautiful-workflow/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.03.09</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「保守しやすいは正義！美しいワークフローの作り方」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-2-16-rpa-aiocr-integration/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.02.16</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「デモで紹介！RPAとAI-OCRで紙業務をデジタル化する」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-2-9-api-call-from-rpa/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.02.09</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「APIを使うなら必須！RPAでJSONを使いこなす（仮）」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-1-26-rpa-aiocr-integration/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.01.26</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「デモで紹介！RPAとAI-OCRで紙業務をデジタル化する」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div><div class="p-container"><a href="https://cacrpa.com/seminar/2022-1-19-beautiful-workflow/" class="p-container-container externalLinkIcon"><div class="p-container-header"><span class="p-datetime">2022.01.19</span><label class="p-label color-default s-label-cac001"><span class="p-text">セミナー</span></label></div><div class="p-container-items"><p class="p-text"><span class="p-text-inner">「保守しやすいは正義！美しいワークフローの作り方」セミナー<br>（オンライン開催）</span></p></div><!--v-if--></a></div></div><!--v-if--><!--v-if--></div></div>
	<!-- /.tabContent --></section>
</div>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }

			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}

			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-radius']) === -1){ result.push(this.page_info.styles['s-radius']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-table-radius']) === -1){ result.push(this.page_info.styles['s-table-radius']); }
			if(item.styles && result.indexOf(item.styles['s-table']) === -1){ result.push(item.styles['s-table']); }
			else if(this.page_info.styles && result.indexOf(this.page_info.styles['s-table']) === -1){ result.push(this.page_info.styles['s-table']); }
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		},
		getColClass: function(item){
			var result = item.classes || [];
			if(item['bgcolor'] && result.indexOf(item['bgcolor']) === -1){
				result.push("s-bgcolor");
				result.push(item['bgcolor']);
			}
			return result;
		}
	}
});
app.layout['comp__taglist'] = 'comp__taglist';
vueApp.component('comp__taglist', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-taglist" :class="[getComponentClass(item)]">
	<div v-if="item.header || item.title" class="p-taglist-header">
		<p v-if="item.title" class="p-text" v-html="getTextContents(item, 'title')"></p>
		<component v-for="(item3,index) in item.header" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
	<ul class="p-taglist-container">
		<li v-for="item2 in item.items" :class="[getListClasses(item2)]">
			<template v-if="getLinkHref(item2)">
				<div class="p-taglist-item">
					<component v-if="item2.value" :is="getComponentLayout(item2.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
					<a v-if="item2.items" class="p-taglist-child" :href="getLinkHref(item2)" :target="getLinkTarget(item2)" :rel="getLinkRel(item2)">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</a>
				</div>
			</template>
			<template v-else>
				<div class="p-taglist-item">
					<component v-if="item2.value" :is="getComponentLayout(item2.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
					<div v-if="item2.items" class="p-taglist-child">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
			</template>
		</li>
	</ul>
	<div v-if="item.footer" class="p-taglist-footer">
		<component v-for="(item3,index) in item.footer" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
</div>`,
	created: function(){
		if(this.item['context'] == 'cx-taglist' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['items']){
				this.item = Object.assign(this.item, JSON.parse(JSON.stringify({'items':this.block['contents']['items']})));
			}
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-taglist'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			var styleid = this.getStyleid('s-taglist-icon', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId);
			if(styleid && styleid != 'none' && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getListClasses: function(item){
			var commponentKey = 's-taglist';
			var commponentId = this.getComponentStyleId(commponentKey);
			var result = item.classes || [];
			var styleid = this.getStyleid('tag-bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(this.getLinkHref(item)){
				if(result.indexOf('s-taglist-li-link') === -1){ result.push('s-taglist-li-link'); }
			}
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		}
	}
});
app.layout['comp__text'] = 'comp__text';
vueApp.component('comp__text', {
	mixins: [baseIncludeComponent],
	template: `
<template v-if="getTextContents(item, 'value')">
	<template v-if="getLinkHref(item)">
		<a :href="getLinkHref(item)" :target="getTarget(item)" :rel="getLinkRel(item)" :onclick="getLinkOnClick(item)" :class="[getComponentClasses(item), getLinkClass(item)]" :data-parent-type="parentType" :data-prepend="getPrependContent(item)"><i v-if="item.icon" :class="[item.icon]"></i><i v-if="item.icon_image" class="icon-image" :style="getIconImageStyle(item)"></i><span v-if="getTextContents(item, 'valueEn')" class="p-text-inner en" v-html="getTextContents(item, 'valueEn')"></span><span class="p-text-inner" v-html="getTextContents(item, 'value')"></span></a>
	</template>
	<template v-else>
		<p :class="[getComponentClasses(item),getNoLinkClass(item)]" :data-parent-type="parentType" :data-prepend="getPrependContent(item)"><i v-if="item.icon" :class="[item.icon]"></i><i v-if="item.icon_image" class="icon-image" :style="getIconImageStyle(item)"></i><span v-if="getTextContents(item, 'valueEn')" class="p-text-inner en" v-html="getTextContents(item, 'valueEn')"></span><span class="p-text-inner" v-html="getTextContents(item, 'value')"></span></p>
	</template>
</template>`,
	created: function(){
		if(this.item['context'] == 'cx-section-message' && this.block && this.block['settings'] && this.block['settings']['version'] >= 5.0){
			if(this.block['contents'] && this.block['contents']['message']){
				this.item = Object.assign(this.item, JSON.parse(JSON.stringify(this.block['contents']['message'])));
			}
		}
		if(this.item.title && !this.item.value){ this.item.value = this.item.title; }
	},
	methods: {
		getCommponentKey: function(item){
			var type = item['type'] || this.type;
			var commponentKey = 's-text';
			if(type == 'inlinetext'){ commponentKey = 's-inlinetext'; }
			else if(type == 'subtext'){ commponentKey = 's-subtext'; }
			else if(type == 'datetime'){ commponentKey = 's-datetime'; }
			else if(type == 'tel'){ commponentKey = 's-tel'; }
			else if(type == 'textarea'){ commponentKey = 's-text'; }
			else if(type == 'richtext'){ commponentKey = 's-text'; }
			return commponentKey;
		},
		getComponentClasses: function(item){
			if(item.classes && !Array.isArray(item.classes)){ item.classes = [item.classes]; }
			var result = item.classes || [];
			var type = item['type'] || this.type;
			if(type == 'inlinetext'){ if(result.indexOf('p-inlinetext') === -1){ result.push('p-inlinetext'); } }
			else if(type == 'subtext'){ result.push('p-subtext'); }
			else if(type == 'datetime'){ result.push('p-datetime'); }
			else if(type == 'tel'){ result.push('p-tel'); }
			else if(type == 'textarea'){ result.push('p-textarea p-text'); }
			else if(type == 'richtext'){ result.push('p-textarea p-text p-richtext'); }
			else{ result.push('p-text'); }
			var commponentKey = this.getCommponentKey(item); if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			if(item['size'] && result.indexOf(item['size']) === -1){ result.push(item['size']); }
			if(item['priority'] && result.indexOf('s-text-'+item['priority']) === -1){ result.push('s-text-'+item['priority']); }
			if(this.getLinkHref(item)){
				if(result.indexOf('p-link') === -1){ result.push('p-link'); }
				if(result.indexOf('s-link') === -1){ result.push('s-link'); }
				if(item['external'] && result.indexOf('s-link-external') === -1){ result.push('s-link-external'); }
			}
			return result;
		},
		getNoLinkClass: function(item){
			var result = [];
			var commponentKey = this.getCommponentKey(item);
			var commponentId = this.getComponentStyleId(commponentKey);
			if(result.indexOf('p-textarea') === -1){
				var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			return result;
		},
		getLinkClass: function(item){
			var commponentKey = this.getCommponentKey(item);
			var commponentId = this.getComponentStyleId(commponentKey);
			if(['links','ullist','ollist','headline','container'].indexOf(this.parentType) !== -1){
				var result = ['link-text'];
				if(this.getTarget(item)){
					var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			if(['gmenu-head1'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-gmenu-head1-text'];
				if(this.getTarget(item)){
					var styleid = this.getStyleid('link-external'); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-gmenu-head1-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-head1-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-head1-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			if(['gmenu-head2'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-gmenu-head2-text'];
				if(this.getTarget(item)){
					var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-gmenu-head2-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-head2-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-head2-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			if(['gmenu-main'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-gmenu-main-text'];
				if(this.getLinkTarget(item)){
					var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-gmenu-main-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-main-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			if(['gmenu-sub'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-gmenu-sub-text'];
				if(this.getTarget(item)){
					var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-gmenu-sub-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-sub-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-gmenu-sub-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			if(['header'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-header-text'];
				if(this.getTarget(item)){
					var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-header-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-header-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-header-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			if(['footer'].indexOf(this.parentType) !== -1){
				var result = ['link-text','link-footer-text'];
				if(this.getTarget(item)){
					var styleid = this.getStyleid('link-external', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
					result.push('externalLinkIcon');
				}
				var styleid = this.getStyleid('link-footer-text', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-footer-text-hover', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
				var styleid = this.getStyleid('link-footer-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			}
			return result;
		},
		getIconImageStyle(item) {
			var result = '';
			if(item['icon_image']){ result+= 'background-image: url(\''+item['icon_image']+'\');'; }
			return result;
		},
		getPrependContent:function(item){
			if(item['data-prepend']){ return item['data-prepend']; }
			return null;
		}
	}
});
app.layout['comp__ullist'] = 'comp__ullist';
vueApp.component('comp__ullist', {
	mixins: [baseIncludeComponent],
	template: `
<div class="p-ullist" :class="[getComponentClass(item)]">
	<div v-if="item.header || item.title" class="p-ullist-header">
		<p v-if="item.title" class="p-text" v-html="getTextContents(item, 'title')"></p>
		<component v-for="(item3,index) in item.header" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
	<ul class="p-ullist-container">
		<li v-for="item2 in item.items" :class="[getListClasses(item2)]">
			<template v-if="getLinkHref(item2)">
				<div class="p-ullist-item">
					<component v-if="item2.value" :is="getComponentLayout(item2.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
					<a v-if="item2.items" class="p-ullist-child" :href="getLinkHref(item2)" :target="getLinkTarget(item2)" :rel="getLinkRel(item2)">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</a>
				</div>
			</template>
			<template v-else>
				<div class="p-ullist-item">
					<component v-if="item2.value" :is="getComponentLayout(item2.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item2"></component>
					<div v-if="item2.items" class="p-ullist-child">
						<component v-for="(item3,index3) in item2.items" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
					</div>
				</div>
			</template>
		</li>
	</ul>
	<div v-if="item.footer" class="p-ullist-footer">
		<component v-for="(item3,index) in item.footer" :is="getComponentLayout(item3.type)" parent-type="ullist" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index" :key="index"></component>
	</div>
</div>
`,
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			var commponentKey = 's-ullist'; if(result.indexOf(commponentKey) === -1){ result.push(commponentKey); }
			var commponentId = this.getComponentStyleId(commponentKey); if(commponentId && result.indexOf(commponentId) === -1){ result.push(commponentId); }
			if(item['context'] && result.indexOf(item['context']) === -1){ result.push(item['context']); }
			var styleid = this.getStyleid('grid-num', null, commponentKey, commponentId);
			if(styleid && result.indexOf('grid-'+styleid) === -1){ result.push('grid-'+styleid); }
			var styleid = this.getStyleid('s-ullist-icon', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, commponentKey, commponentId); if(styleid && result.indexOf(styleid) === -1){ result.push('block-bg-container-color'); result.push(styleid); }
			return result;
		},
		getListClasses: function(item){
			var result = item.classes || [];
			var commponentKey = 's-ullist';
			var commponentId = this.getComponentStyleId(commponentKey);
			var styleid = this.getStyleid('ullist_list-bg-color', null, commponentKey, commponentId);
			if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			if(this.getLinkHref(item)){
				if(result.indexOf('s-ullist-li-link') === -1){ result.push('s-ullist-li-link'); }
			}
			return result;
		},
		getAttrib: function(attr, key){
			if(attr && attr[key]){ return attr[key]; }
			return null;
		}
	}
});
app.layout['gmenu__agtax001-before'] = 'gmenu__agtax001-before';
vueApp.component('gmenu__agtax001-before', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-gmenu-area l-gmenu-pc l-gmenu-pc-before gmenu__agtax001-before" :class="getComponentClass(page_info.gmenu)">
	<component is="style" v-if="StyleSheet" v-html="StyleSheet"></component>
	<div class="l-gmenu-wrapper l-gmenu-fix" v-if="page_info.gmenu.main">
		<div class="l-gmenu-bg"></div>
		<div class="l-gmenu-navi-wrapper">
			<div class="l-gmenu-main-wrapper">
				<ul class="l-gmenu-main-container">
					<li v-for="(item, index) in page_info.gmenu.main" :class="[gmenuItemClass(item)]">
						<label v-if="item && item.children && item.children.length" :for="\`gmenu-child\${index}\`"></label>
						<input v-if="item && item.children && item.children.length" type="checkbox" :id="\`gmenu-child\${index}\`" :name="\`gmenu-child\${index}\`" />
						<component :is="getComponentLayout(item.type || 'text')" context="cx-links-gmenu-main" parent-type="gmenu-main" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
						<div v-if="item && item.children && item.children.length" :class="getChildClass(item)" :data-styles-gmenu-child-num="getStylesAttrb(item, 'gmenu-child-num')">
							<div class="child-inner">
								<div class="parent-info" :class="getChildHead1Class()">
									<component :is="getComponentLayout(item.type || 'text')" context="cx-links-gmenu-child-head1" parent-type="gmenu-head1" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
								</div>
								<div class="child-list">
									<div class="child-list-line"><ul>
										<li v-for="(item2, index2) in item.children" :class="getChildHead2Class()">
											<component :is="getComponentLayout(item2.type || 'text')" parent-type="gmenu-head2" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>

											<div v-if="item2.children" class="child-sub-list">
												<div class="child-sub-list-line"><ul>
													<li v-for="(item3, index3) in item2.children" :class="getChildSubClass()">
														<component :is="getComponentLayout(item3.type || 'text')" parent-type="gmenu-sub" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
													</li>
												</ul></div>
											</div>

										</li>
									</ul></div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>`,
	created: function(){
		if(this.page_info.gmenu && this.page_info.gmenu.styles){
			this.StyleSheet = this.getStylesCss('.l-hero-wrapper', this.page_info.gmenu.styles);
		}
	},
	computed: {
		bgStyle() {
			var result = '';
			if(this.page_info.gmenu){
				if(this.page_info.gmenu.bgcolor){ result+= 'background-color: '+this.page_info.gmenu.bgcolor+';'; }
				if(this.page_info.gmenu.bgimage){ result+= 'background-image: url(\''+this.page_info.gmenu.bgimage+'\');'; }
			}
			return result;
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(this.checkExpansion('headerMessage') && result.indexOf('is-max-before') === -1){ result.push('is-max-before'); }
			var styleid = this.getStyleid('gmenu-main-bg');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getChildClass: function(item){
			var result = item.classes || [];
			result.push('child-wrap');
			var styleid = this.getStyleid('gmenu-child-bg');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getChildHead1Class: function(){
			var result = [];
			var styleid = this.getStyleid('gmenu-head1-bg');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			var styleid = this.getStyleid('link-gmenu-head1-icon');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getChildHead2Class: function(){
			var result = [];
			var styleid = this.getStyleid('link-gmenu-head2-icon');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		getChildSubClass: function(){
			var result = [];
			var styleid = this.getStyleid('link-gmenu-sub-icon');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		gmenuItemClass: function(item){
			var res = [];
			if(item && item.children && item.children.length){ res.push('is-child'); }
			return res;
		},
		checkExpansion: function(key){
			if(!this.page_info.gmenu.expansion){ return false; }
			if(!this.page_info.gmenu.expansion[key]){ return false; }
			if(!this.page_info.gmenu.expansion[key].useFlg){ return false; }
			return true;
		},
		checkSearchNavi: function(){
			// console.log(this);
			if(this.page_info.gmenu.expansion){
				if(!this.page_info.gmenu.expansion.searchNavi){ return false; }
				if(!this.page_info.gmenu.expansion.searchNavi.useFlg){ return false; }
				return true;
			}
			return false;
		},
		getLinkClasses: function(item){
			var result = ['cx-text-link','p-link','s-link'];
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link']) === -1){ result.push(this.page_info.styles['s-text-link']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link-icon']) === -1){ result.push(this.page_info.styles['s-text-link-icon']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-animation']) === -1){ result.push(this.page_info.styles['s-animation']); }
			return result;
		}
	}
});
app.layout['gmenu__agtax001-after'] = 'gmenu__agtax001-after';
vueApp.component('gmenu__agtax001-after', {
	mixins: [baseIncludeComponent],
	template: `<div v-if="0" class="l-gmenu-area l-gmenu-pc l-gmenu-pc-after gmenu__agtax001-after"></div>`
});
app.layout['gspmenu__agtax001-button'] = 'gspmenu__agtax001-button';
vueApp.component('gspmenu__agtax001-button', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-gmenu-sp l-gmenu-sp-button l-header-spmenu-button gspmenu__agtax001-button" :class="getComponentClass(page_info.gmenu)">
	<button class="p-humberger" id="js-humberger-open" data-menu-active="is-open" data-micromodal-trigger="modal-1" data-menu-btn="1"><span></span><span></span><span></span></button> 
	<div class="l-spgmenu-sp-wrapper l-spgmenu-fix" v-if="page_info.gmenu && (page_info.gmenu.main || page_info.gmenu.sub)" data-menu-active="is-open" :class="getMenuClass(page_info.gmenu)">
		<div class="l-spgmenu-bg"></div>
		<div class="l-spgmenu-navi-wrapper">
			<div class="l-spgmenu-main-wrapper">

				<form action="/search" class="l-spgmenu-sub-form-sp" v-if="checkSearchNavi()">
					<input type="text" name="q" placeholder="">
					<button type="submit">検索</button> 
				</form>

				<ul class="l-spgmenu-main-container">
					<li v-for="(item, index) in page_info.gmenu.main" :class="[gmenuItemClass(item)]">
						<label v-if="item && item.children && item.children.length" :for="\`gspmenu-child\${index}\`"></label>
						<input v-if="item && item.children && item.children.length" type="checkbox" :id="\`gspmenu-child\${index}\`" :name="\`gspmenu-child\${index}\`" />
						<component :is="getComponentLayout(item.type || 'text')" context="cx-links-gmenu-sub" parent-type="gmenu-head1" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
						<div v-if="item && item.children && item.children.length" class="child-wrap">
							<div class="child-inner">
								<div class="child-list">
									<div class="child-list-line"><ul>
										<li v-for="(item2, index2) in item.children">
											<component :is="getComponentLayout(item2.type || 'text')" parent-type="gmenu-head2" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index2" :key="index2"></component>
											<div v-if="item2.children" class="child-sub-list">
												<div class="child-sub-list-line"><ul>
													<li v-for="(item3, index3) in item2.children">
														<component :is="getComponentLayout(item3.type || 'text')" parent-type="gmenu-sub" :page_info="page_info" :layout="layout" :block="block" :item="item3" :blockid="index3" :key="index3"></component>
													</li>
												</ul></div>
											</div>
										</li>
									</ul></div>
								</div>
							</div>
						</div>
					</li>
					<li v-if="page_info.gmenu && page_info.gmenu.sub" v-for="item in page_info.gmenu.sub" class="l-spgmenu-sub-wrapper-sp">
						<component :is="getComponentLayout(item.type || 'text')" context="cx-links-gmenu-sub" parent-type="gmenu-head1" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
					</li>
					<li v-if="page_info.gmenu && page_info.gmenu.tops" v-for="item in page_info.gmenu.tops" class="l-spgmenu-tops-wrapper-sp">
						<component :is="getComponentLayout(item.type || 'text')" context="cx-links-gmenu-sub" parent-type="gmenu-head1" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
					</li>
				</ul>

				<div class="l-spgmenu-sub-wrapper-sp" v-if="page_info.gmenu && page_info.gmenu.cta">
					<ul class="l-spgmenu-cta-container" v-if="page_info.gmenu && page_info.gmenu.cta">
						<li v-for="item in page_info.gmenu.cta">
							<component :is="getComponentLayout(item.type || 'button')" context="cx-button-header" parent-type="header" :page_info="page_info" :layout="layout" :block="block" :item="item"></component>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>`,
	computed: {
		bgStyle() {
			var result = '';
			if(this.page_info.gmenu){
				if(this.page_info.gmenu.bgcolor){ result+= 'background-color: '+this.page_info.gmenu.bgcolor+';'; }
				if(this.page_info.gmenu.bgimage){ result+= 'background-image: url(\''+this.page_info.gmenu.bgimage+'\');'; }
			}
			return result;
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(this.checkExpansion('headerMessage') && result.indexOf('is-max-before') === -1){ result.push('is-max-before'); }
			return result;
		},
		getMenuClass: function(item){
			var result = [];
			var styleid = this.getStyleid('spgmenu-bg');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
			return result;
		},
		gmenuItemClass: function(item){
			var res = [];
			if(item && item.children && item.children.length){ res.push('is-child'); }
			return res;
		},
		checkExpansion: function(key){
			if(!this.page_info.gmenu.expansion){ return false; }
			if(!this.page_info.gmenu.expansion[key]){ return false; }
			if(!this.page_info.gmenu.expansion[key].useFlg){ return false; }
			return true;
		},
		checkSearchNavi: function(){
			// console.log(this);
			if(this.page_info.gmenu.expansion){
				if(!this.page_info.gmenu.expansion.searchNavi){ return false; }
				if(!this.page_info.gmenu.expansion.searchNavi.useFlg){ return false; }
				return true;
			}
			return false;
		},
		getLinkClasses: function(item){
			var result = ['cx-text-link','p-link','s-link'];
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link']) === -1){ result.push(this.page_info.styles['s-text-link']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link-icon']) === -1){ result.push(this.page_info.styles['s-text-link-icon']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-animation']) === -1){ result.push(this.page_info.styles['s-animation']); }
			return result;
		}
	}
});
app.layout['gspmenu__agtax001'] = 'gspmenu__agtax001';
vueApp.component('gspmenu__agtax001', {
	mixins: [baseIncludeComponent],
	template: `<div v-if="0"></div>`
});
app.layout['gheader__head001'] = 'gheader__head001';
vueApp.component('gheader__head001', {
	mixins: [baseIncludeComponent],
	template: `
<header class="l-gmenu-area l-gheader-pc gheader__head001" :class="getComponentClass(page_info.gmenu)" :id="getBlockId()">
	<div class="l-header-wapper">
		<div class="l-header-bg" :style="bgStyle"></div>
		<div class="l-header-container">
			<div class="l-gmenu-fix">
				<component :is="layout['inc__main_header_logo']" :page_info="page_info" :layout="layout" :block="header_block"></component>
				<div class="l-gmenu-sub-wrapper" v-if="page_info.gmenu && (page_info.gmenu.sub || page_info.gmenu.cta || page_info.info.company_logo)">
					<ul class="l-gmenu-function" v-if="page_info.gmenu && page_info.gmenu.cta">
						<li v-for="item in page_info.gmenu.cta">
							<component :is="getComponentLayout(item.type || 'button')" context="cx-button-header" parent-type="header" :page_info="page_info" :layout="layout" :block="header_block" :item="item"></component>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</header>`,
	data() {
		return {
			header_block: {}
		};
	},
	created: function(){
		this.id = this.page_info.gmenu.header_type;
		if(this.page_info.gmenu && this.page_info.gmenu['header_type']){ this.header_block = {'block_type':this.page_info.gmenu['header_type']}; }
	},
	computed: {
		bgStyle() {
			var result = '';
			if(this.page_info.gmenu){
				if(this.page_info.gmenu.bgcolor){ result+= 'background-color: '+this.page_info.gmenu.bgcolor+';'; }
				if(this.page_info.gmenu.bgimage){ result+= 'background-image: url(\''+this.page_info.gmenu.bgimage+'\');'; }
			}
			return result;
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(this.checkExpansion('headerMessage') && result.indexOf('is-max-before') === -1){ result.push('is-max-before'); }
			return result;
		},
		gmenuItemClass: function(item){
			var res = [];
			if(item && item.children && item.children.length){ res.push('is-child'); }
			return res;
		},
		checkExpansion: function(key){
			if(!this.page_info.gmenu.expansion){ return false; }
			if(!this.page_info.gmenu.expansion[key]){ return false; }
			if(!this.page_info.gmenu.expansion[key].useFlg){ return false; }
			return true;
		},
		checkSearchNavi: function(){
			// console.log(this);
			if(this.page_info.gmenu.expansion){
				if(!this.page_info.gmenu.expansion.searchNavi){ return false; }
				if(!this.page_info.gmenu.expansion.searchNavi.useFlg){ return false; }
				return true;
			}
			return false;
		},
		getLinkClasses: function(item){
			var result = ['cx-text-link','p-link','s-link'];
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link']) === -1){ result.push(this.page_info.styles['s-text-link']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link-icon']) === -1){ result.push(this.page_info.styles['s-text-link-icon']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-animation']) === -1){ result.push(this.page_info.styles['s-animation']); }
			return result;
		}
	}
});
app.layout['gspheader__head001'] = 'gspheader__head001';
vueApp.component('gspheader__head001', {
	mixins: [baseIncludeComponent],
	template: `
<header class="l-gheader-sp gspheader__head001" :class="getComponentClass(page_info.gmenu)" :id="getBlockId()">
	<component is="style" v-if="StyleSheet" v-html="StyleSheet"></component>
	<div class="l-header-wapper">
		<div class="l-header-bg" :style="bgStyle"></div>
		<div class="l-header-container">
			<div class="l-gmenu-fix">
				<component :is="layout['inc__main_header_logo']" :page_info="page_info" :layout="layout" :block="header_block"></component>
				<div class="l-gmenu-sub-wrapper" v-if="page_info.gmenu && (page_info.gmenu.sub || page_info.gmenu.cta || page_info.info.company_logo)">
					<ul class="l-gmenu-function" v-if="page_info.gmenu && page_info.gmenu.cta">
						<li v-for="item in page_info.gmenu.cta">
							<component :is="getComponentLayout(item.type || 'button')" context="cx-button-header" parent-type="header" :page_info="page_info" :layout="layout" :block="header_block" :item="item"></component>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</header>`,
	data() {
		return {
			header_block: {}
		};
	},
	created: function(){
		this.id = this.page_info.gmenu.header_type;
		if(this.page_info.gmenu && this.page_info.gmenu['header_type']){ this.header_block = {'block_type':this.page_info.gmenu['header_type']}; }
	},
	computed: {
		bgStyle() {
			var result = '';
			if(this.page_info.gmenu){
				if(this.page_info.gmenu.bgcolor){ result+= 'background-color: '+this.page_info.gmenu.bgcolor+';'; }
				if(this.page_info.gmenu.bgimage){ result+= 'background-image: url(\''+this.page_info.gmenu.bgimage+'\');'; }
			}
			return result;
		}
	},
	methods: {
		getComponentClass: function(item){
			var result = item.classes || [];
			if(this.checkExpansion('headerMessage') && result.indexOf('is-max-before') === -1){ result.push('is-max-before'); }
			return result;
		},
		gmenuItemClass: function(item){
			var res = [];
			if(item && item.children && item.children.length){ res.push('is-child'); }
			return res;
		},
		checkExpansion: function(key){
			if(!this.page_info.gmenu.expansion){ return false; }
			if(!this.page_info.gmenu.expansion[key]){ return false; }
			if(!this.page_info.gmenu.expansion[key].useFlg){ return false; }
			return true;
		},
		checkSearchNavi: function(){
			// console.log(this);
			if(this.page_info.gmenu.expansion){
				if(!this.page_info.gmenu.expansion.searchNavi){ return false; }
				if(!this.page_info.gmenu.expansion.searchNavi.useFlg){ return false; }
				return true;
			}
			return false;
		},
		getLinkClasses: function(item){
			var result = ['cx-text-link','p-link','s-link'];
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link']) === -1){ result.push(this.page_info.styles['s-text-link']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-text-link-icon']) === -1){ result.push(this.page_info.styles['s-text-link-icon']); }
			if(this.page_info.styles && result.indexOf(this.page_info.styles['s-animation']) === -1){ result.push(this.page_info.styles['s-animation']); }
			return result;
		}
	}
});
app.layout['head__blog'] = 'head__blog';
vueApp.component('head__blog', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-hero-wrapper" :class="base_classes">
	<div class="l-hero-container" :style="style_container">
		<div class="l-hero-bg-container" v-if="block.settings && block.settings.bgmovie">
			<video class="cover pc_only" :src="block.settings.bgmovie" autoplay loop muted style="position: absolute;top: 0;left: 0;width: 100%;">
				<img v-if="block.settings && block.settings.bgimage" :src="block.settings.bgimage" alt="Placeholder">
			</video>
			<div class="bgmovie-cover-filter"></div>
			<video class="bgmovie-main pc_only" :src="block.settings.bgmovie" autoplay loop muted style="position: absolute;display: none;"></video>
			<div class="l-hero-bg" :style="style_color"></div>
		</div>
		<div v-else class="l-hero-bg-container">
			<div class="l-hero-bg" :style="style_color"></div>
			<div class="l-hero-bg-image pc_only" :style="style_image_pc"></div>
			<div class="l-hero-bg-image sp_only" :style="style_image_sp"></div>
			<div class="l-hero-bg-after" :style="style_color"></div>
		</div>
		<div class="l-hero-content">
			<a v-if="block.settings.linkUrl" :href="block.settings.linkUrl" class="l-hero-main">
				<div v-if="block.settings && block.settings.mainimage" class="l-hero-main-image"><img :src="block.settings.mainimage" class="pc_only"><img v-if="block.settings.mainimage_sp" :src="block.settings.mainimage_sp" class="sp_only"></div>
				<div class="l-hero-main-header" v-if="block.header">
					<component v-for="(item2,index) in block.header" :is="getComponentLayout(item2.type)" parent-type="hero" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
				</div>
				<div class="l-hero-main-container" v-if="block.items">
					<component v-for="(item2,index) in block.items" :is="getComponentLayout(item2.type)" parent-type="hero" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
				</div>
				<div class="l-hero-main-container" v-if="block.settings.items">
					<component v-for="(item2,index) in block.settings.items" :is="getComponentLayout(item2.type)" parent-type="hero" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
				</div>
			</a>
			<div v-else class="l-hero-main">
				<div v-if="block.settings && block.settings.mainimage" class="l-hero-main-image"><img :src="block.settings.mainimage" class="pc_only"><img v-if="block.settings.mainimage_sp" :src="block.settings.mainimage_sp" class="sp_only"></div>
				<div class="l-hero-main-header" v-if="block.header">
					<component v-for="(item2,index) in block.header" :is="getComponentLayout(item2.type)" parent-type="hero" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
				</div>
				<div class="l-hero-main-container" v-if="block.items">
					<component v-for="(item2,index) in block.items" :is="getComponentLayout(item2.type)" parent-type="hero" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
				</div>
				<div class="l-hero-main-container" v-if="block.settings.items">
					<component v-for="(item2,index) in block.settings.items" :is="getComponentLayout(item2.type)" parent-type="hero" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
				</div>
			</div>
		</div>
	</div>
</div>`,
	created() {
		this.block.settings = this.settingsConversion(this.block.settings, {
			"items": [
				{
					"type": "headline","workflow": "public",
					"items": [
						{"type": "subtext", "workflow": "public", "_mergeValue":"_item.subtitle"},
						{"type": "inlinetext", "workflow": "public", "_mergeValue":"_item.title"},
						{"type": "image", "workflow": "public","_mergeValue":"_item.image"}
					]
				}
			]
		}, this.block.contents, {}, this.block.contents) || {};
		this.block.settings = this.block.settings || {};
	},
	computed: {
		base_classes() {
			var result = [];
			if(this.page_info.design.site_type){ result.push(this.page_info.design.site_type); }
			if(this.page_info.design.contents_thema){ result.push(this.page_info.design.contents_thema); }
			if(this.block.block_type){ result.push(this.block.block_type); }
			if(this.block.layout_type){ result.push(this.block.layout_type); }
			if(this.block.settings && this.block.settings.textColor){ result.push(this.block.settings.textColor); }
			if(this.block.settings && this.block.settings.bgmovie_position){ result.push(this.block.settings.bgmovie_position); }
			if(this.block.settings && this.block.settings.classes){ result.push(this.block.settings.classes); }
			return result;
		},
		style_container() {
			var result = '';
			if(this.block.settings && this.block.settings.min_height){ result+= 'min-height: '+this.block.settings.min_height+';'; }
			if(this.block.settings && this.block.settings.height){ result+= 'height: '+this.block.settings.height+';'; }
			return result;
		},
		style_image_pc() {
			var result = '';
			if(this.block.settings && this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
			if(this.block.settings && this.block.settings.bgimage){ result+= 'background-image: url(\''+this.block.settings.bgimage+'\');'; }
			return result;
		},
		style_image_sp() {
			var result = '';
			if(this.block.settings && this.block.settings.bgimage_sp){ result+= 'background-image: url(\''+this.block.settings.bgimage_sp+'\');'; }
			else if(this.block.settings && this.block.settings.bgimage){ result+= 'background-image: url(\''+this.block.settings.bgimage+'\');'; }
			return result;
		},
		style_color() {
			var result = '';
			if(this.block.settings && this.block.settings.bgcolor){ result+= 'background-color: '+this.block.settings.bgcolor+';'; }
			return result;
		}
	}
});
app.layout['footer__copyonly'] = 'footer__copyonly';
vueApp.component('footer__copyonly', {
	mixins: [baseIncludeComponent],
	template: `
<div id="footer" class="l-footer-container footer__copyonly" :class="getComponentClass(page_info.footer)">
	<component is="style" v-if="StyleSheet" v-html="StyleSheet"></component>
	<div v-if="page_info.info.copyright" class="p-copyright-container"><p class="p-text" v-html="getTextContents(page_info.info, 'copyright')"></p></div>
</div>`,
created() {
	var styleid = this.page_info.footer.styleid || this.page_info.styles["b-footer"] || 'b-footer-def';
	this.page_info.footer.classes = this.page_info.footer.classes || [];
	this.page_info.footer.classes.push(styleid);
	this.page_info.footer.settings = this.page_info.footer.settings || {};
},
methods: {
	getComponentClass: function(item){
		var result = item.classes || [];
		var styleid = this.getStyleid('footer-bg');if(styleid && result.indexOf(styleid) === -1){ result.push(styleid); }
		return result;
	}
}
});
app.layout['block__blog_detail_title'] = 'block__blog_detail_title';
vueApp.component('block__blog_detail_title', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="article && !articleLoading" class="l-section-wrapper" :class="[block.block_type, block.layout_type]" :id="getBlockId()">
	<div class="l-section-container">
		<div class="l-content-wrapper s-container-fix l-col-detail">
			<div class="l-col-header-container">
				<div v-if="block.settings.categoryView && article.categories" class="l-category-wapper">
					<div class="p-category"><a v-for="category in article.categories" :href="getArchivelCategoryUrl(article, category)" :style="getCategoryStyle(category)">{{ getCategoryValue(category) }}</a></div>
				</div>
				<h2 class="p-title">{{ article.title }}</h2>
				<div v-if="block.settings.dateView || block.settings.tagView" class="l-tag-date-container">
					<div v-if="block.settings.dateView" class="date"><span>{{ formatDate(article.publicdt) }}</span></div>
					<div v-if="block.settings.tagView && article.tags" class="l-tag-wapper">
						<div v-for="tagid in article.tags" class="p-tag"><a :href="getArchivelTagUrl(article, tagid)">{{ getTagValue(tagid) }}</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>`,
	data() {
		return {
			article: null,
			articleGroupData: null,
			articleLoading: true
		};
	},
	created: function(){
		var self = this;
		self.articleLoading = true;
		if(self.page_info['info']['pagetype'] == 'blog_detail' && self.page_info['loadArticle'] && self.page_info['loadArticle']['contents']){
			self.updateArticle(self.page_info['loadArticleGroupData'], self.page_info['loadArticle']);
			self.articleLoading = false;
		}
		else{
			var query = this.getSearchQuery();
			var params = {
				'cid': this.block.settings['cid']||this.page_info.cid,
				'gid': this.block.settings['gid']||this.page_info.gid,
				'articleid': query['id']
			};
			if(this.block.settings.linkProjectInfo){
				params['cid'] = this.block.settings.linkProjectInfo['cid']
				params['gid'] = this.block.settings.linkProjectInfo['gid']
			}
			var url = '';
			if(this.page_info.filesBaseDomain){ url+= this.page_info.filesBaseDomain; }
			url+= '/_api_/getArticle.json?t='+(new Date()).getTime();
			if(!axios){ return; }
			axios.post(url, params)
			.then(response => {
				// console.log(response.data['article']);
				self.updateArticle(response.data['articleGroupData'], response.data['article']);
				self.articleLoading = false;
			})
			.catch(response => {});
		}
	},
	methods: {
		getImageClass: function(){
			var res = [];
			if(this.block['settings'] && this.block['settings']['objfit']){ res.push(this.block['settings']['objfit']); }
			return res;
		},
		updateArticle: function(articleGroupData, articles){
			this.article = articles;
			this.articleGroupData = articleGroupData;
		},
		getIndexLink: function(block, key, blockid){
			var result = this.getBlockId(block, key, blockid);
			return '#'+result;
		},
		getTagValue: function(tagid){
			for(var i=0; i<this.articleGroupData.contents.tags.items.length; i++){
				if(this.articleGroupData.contents.tags.items[i].id == tagid){
					return this.articleGroupData.contents.tags.items[i].value;
				}
			}
			return false;
		},
		getCategoryValue: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return this.articleGroupData.contents.categories.items[i].value;
				}
			}
			return false;
		},
		getCategoryStyle: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return 'background-color:'+this.articleGroupData.contents.categories.items[i].color;
				}
			}
			return null;
		},
		checkHeadlines: function(){
			for(var i=0; i<this.article.contents.body.items.length; i++){
				if(this.article.contents.body.items[i].type == 'headline'){ return true; }
			}
			return null;
		},
		getDetailUrl: function(item){
			if(!item.contents.body || !item.contents.body.items || item.contents.body.items.length == 0){ return null; }
			var detailUrl = null;
			if(this.block.settings.linkProjectInfo && this.block.settings.linkProjectInfo['locationInfo']){
				detailUrl = this.block.settings.linkProjectInfo['locationInfo']['detail'];
			}
			else if(this.block.settings['detailUrl']){
				detailUrl = this.block.settings['detailUrl'];
			}
			else if(this.page_info.locationInfo && this.page_info.locationInfo["detail"]){
				detailUrl = this.page_info.locationInfo["detail"];
			}
			return this.getArticleDetailUrl(detailUrl, item);
		},
		getArchivelCategoryUrl: function(item, categoryid){
			if(this.page_info.locationInfo["archive"].indexOf('?') !== -1){
				return this.page_info.locationInfo["archive"]+'&category='+categoryid;
			}else{
				return this.page_info.locationInfo["archive"]+'?category='+categoryid;
			}
		},
		getArchivelTagUrl: function(item, tagid){
			if(this.page_info.locationInfo["archive"].indexOf('?') !== -1){
				return this.page_info.locationInfo["archive"]+'&tag='+tagid;
			}else{
				return this.page_info.locationInfo["archive"]+'?tag='+tagid;
			}
		},
		getPage: function(no){
			return '?page='+no;
		},
		formatDate(date){
			var dt = new Date(date);
			var y = dt.getFullYear();
			var m = ("00" + (dt.getMonth()+1)).slice(-2);
			var d = ("00" + (dt.getDate())).slice(-2);
			return y +'/'+ m +'/'+ d;
		}
	}
});

app.layout['block__blog_detail_body'] = 'block__blog_detail_body';
vueApp.component('block__blog_detail_body', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="article && !articleLoading" class="l-section-wrapper" :class="[getBlockClasses()]" :id="getBlockId()">
	<div class="l-section-container">
		<div class="l-content-wrapper s-container-fix l-col-detail">

			<div class="l-body-container" v-if="article && !articleLoading">

				<div v-if="block.settings.indexMainImage && article.contents.mainimage" class="ArticleBody-cover"><img :src="article.contents.mainimage" alt=""></div>
				<div v-if="block.settings && block.settings.indexView && checkHeadlines()" class="p-index-container"><div class="p-index-inner">
					<div id="toc_container" class="toc_white no_bullets expanded">
						<div class="toc_title" v-if="block.settings.indexTitle" v-html="block.settings.indexTitle"></div>
						<ul class="toc_list" v-if="article.contents.body.items">
							<li v-for="item2 in getHeadlineItems(article.contents.body.items)">
								<i class="fa fa-chevron-down"></i>
								<a :href="getIndexLink(item2, 'comp-', item2[0])" v-html="getHeadlineText(item2[1])"></a>
							</li>
						</ul>
					</div>
				</div></div>

				<div v-if="article && article.contents.body && article.contents.body.items" class="p-component-container p-body-container" :class="getBodyClass(item)"><div class="p-body-inner">
					<component v-for="(item2,index2) in article.contents.body.items" :is="getComponentLayout(item2.type)" parent-type="detail_body" :page_info="page_info" :layout="layout" :block="block" :item="item2" :key="index2" :blockid="index2" view-component-id="true"></component>
				</div></div>
			</div>
		</div>
	</div>
</div>`,
	data() {
		return {
			article: null,
			articleGroupData: null,
			articleLoading: true
		};
	},
	created: function(){
		var self = this;
		self.articleLoading = true;
		if(self.page_info['info']['pagetype'] == 'blog_detail' && self.page_info['loadArticle'] && self.page_info['loadArticle']['contents']){
			self.updateArticle(self.page_info['loadArticleGroupData'], self.page_info['loadArticle']);
			self.articleLoading = false;
		}
		else{
			var query = this.getSearchQuery();
			var params = {
				'cid': this.block.settings['cid']||this.page_info.cid,
				'gid': this.block.settings['gid']||this.page_info.gid,
				'articleid': query['id']
			};
			if(this.block.settings.linkProjectInfo){
				params['cid'] = this.block.settings.linkProjectInfo['cid']
				params['gid'] = this.block.settings.linkProjectInfo['gid']
			}
			var url = '';
			if(this.page_info.filesBaseDomain){ url+= this.page_info.filesBaseDomain; }
			url+= '/_api_/getArticle.json?t='+(new Date()).getTime();
			if(!axios){ return; }
			axios.post(url, params)
			.then(response => {
				// console.log(response.data['article']);
				self.updateArticle(response.data['articleGroupData'], response.data['article']);
				self.articleLoading = false;
			})
			.catch(response => {});
		}
	},
	methods: {
		getBodyClass: function(item){
			var result = [];
			var blockKey = 'b-blog_detail_body';
			var blockId = this.getStyleid(blockKey);
			var style = this.getStyleid('body-bg-color'); if(style){ result.push(style); }
			if(this.block['settings'] && this.block['settings']['objfit']){ result.push(this.block['settings']['objfit']); }
			return result;
		},
		getImageClass: function(){
			var res = [];
			if(this.block['settings'] && this.block['settings']['objfit']){ res.push(this.block['settings']['objfit']); }
			return res;
		},
		updateArticle: function(articleGroupData, articles){
			this.article = articles;
			this.articleGroupData = articleGroupData;
		},
		getHeadlineItems: function(items){
			var res = [];
			for(var i=0; i<items.length; i++){
				if(items[i]['type'] == 'headline'){ res.push([i+0, items[i]]); }
				if(this.article.contents.body.items[i].type.match(/text|textarea|richtext/si)){
				}
			}
			return res;
		},
		getIndexLink: function(block, key, blockid){
			// console.log(block);
			var result = this.getBlockId(block, key, blockid+0);
			return '#'+result;
		},
		getTagValue: function(tagid){
			for(var i=0; i<this.articleGroupData.contents.tags.items.length; i++){
				if(this.articleGroupData.contents.tags.items[i].id == tagid){
					return this.articleGroupData.contents.tags.items[i].value;
				}
			}
			return null;
		},
		getCategoryValue: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return this.articleGroupData.contents.categories.items[i].value;
				}
			}
			return null;
		},
		getCategoryStyle: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return 'background-color:'+this.articleGroupData.contents.categories.items[i].color;
				}
			}
			return null;
		},
		checkHeadlines: function(){
			for(var i=0; i<this.article.contents.body.items.length; i++){
				if(this.article.contents.body.items[i].type == 'headline'){ return true; }
				// if(this.article.contents.body.items[i].type.match(/text|textarea|richtext/si)){
				// 	if(this.article.contents.body.items[i].value.match(/<h[2-3].*?>/si)){ return true; }
				// }
			}
			return false;
		},
		getDetailUrl: function(item){
			if(!item.contents.body || !item.contents.body.items || item.contents.body.items.length == 0){ return null; }
			var detailUrl = null;
			if(this.block.settings.linkProjectInfo && this.block.settings.linkProjectInfo['locationInfo']){
				detailUrl = this.block.settings.linkProjectInfo['locationInfo']['detail'];
			}
			else if(this.block.settings['detailUrl']){
				detailUrl = this.block.settings['detailUrl'];
			}
			else if(this.page_info.locationInfo && this.page_info.locationInfo["detail"]){
				detailUrl = this.page_info.locationInfo["detail"];
			}
			return this.getArticleDetailUrl(detailUrl, item);
		},
		getArchivelCategoryUrl: function(item, categoryid){
			if(this.page_info.locationInfo["archive"].indexOf('?') !== -1){
				return this.page_info.locationInfo["archive"]+'&category='+categoryid;
			}else{
				return this.page_info.locationInfo["archive"]+'?category='+categoryid;
			}
		},
		getArchivelTagUrl: function(item, tagid){
			if(this.page_info.locationInfo["archive"].indexOf('?') !== -1){
				return this.page_info.locationInfo["archive"]+'&tag='+tagid;
			}else{
				return this.page_info.locationInfo["archive"]+'?tag='+tagid;
			}
		},
		getPage: function(no){
			return '?page='+no;
		},
		formatDate(date){
			var dt = new Date(date);
			var y = dt.getFullYear();
			var m = ("00" + (dt.getMonth()+1)).slice(-2);
			var d = ("00" + (dt.getDate())).slice(-2);
			return y +'.'+ m +'.'+ d;
		}
	}
});

app.layout['block__blog_navi'] = 'block__blog_navi';
vueApp.component('block__blog_navi', {
	mixins: [baseIncludeComponent],
	template: `
<div v-if="articleBefore || articleAfter" class="l-section-wrapper" :class="getBlockClasses()" :id="getBlockId()">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="block"></component>
	<div class="l-section-container">

		<div v-if="block.layout_type == 'layout01'" class="btn-block">
			<div class="p-btn-container" style="text-align: center;display:flex;justify-content: space-around;">
				<div class="p-btn-before-container">
					<a v-if="articleAfter" :href="getDetailUrl(articleAfter)" class="p-btn p-btn-def"><i class="fas fa-chevron-left"></i><span>Prev</span></a>
				</div>
				<component v-if="indexButton" :is="getComponentLayout(indexButton.type || 'buttons')" :page_info="page_info" :layout="layout" :block="block" :item="indexButton"></component>
				<div class="p-btn-after-container">
					<a v-if="articleBefore" :href="getDetailUrl(articleBefore)" class="p-btn p-btn-def"><span>Next</span><i class="fas fa-chevron-right"></i></a>
				</div>
			</div>
		</div>

		<div v-if="block.layout_type == 'layout02'" class="btn-block">
			<div class="p-btn-container p-navi-container" style="text-align: center;display:flex;justify-content: space-around;">
				<div class="p-btn-before-container">
					<a v-if="articleAfter" :href="getDetailUrl(articleAfter)">
						<span class="label">次の記事</span>
						<img v-if="block.settings && block.settings.imageView && articleAfter.contents.mainimage" :src="articleAfter.contents.mainimage">
						<span v-if="block.settings && block.settings.titleView" class="title">{{ articleAfter.title }}</span>
					</a>
				</div>
				<div class="p-btn-after-container">
					<a v-if="articleBefore" :href="getDetailUrl(articleBefore)">
						<span class="label">前の記事</span>
						<span v-if="block.settings && block.settings.titleView" class="title">{{ articleBefore.title }}</span>
						<img v-if="block.settings && block.settings.imageView && articleBefore.contents.mainimage" :src="articleBefore.contents.mainimage">
					</a>
				</div>
			</div>
			<component v-if="indexButton" :is="getComponentLayout(indexButton.type || 'buttons')" :page_info="page_info" :layout="layout" :block="block" :item="indexButton"></component>
		</div>

		<div v-if="block.layout_type == 'layout03'" class="btn-block">
			<div class="p-btn-container p-navi-container" style="text-align: center;display:flex;justify-content: space-around;">
				<div class="p-btn-before-container">
					<a v-if="articleAfter" :href="getDetailUrl(articleAfter)">
						<div class="l-category-wapper">
							<div class="p-category"><a v-if="articleAfter.category">{{ getCategoryValue(articleAfter.category) }}</a></div>
						</div>
						<span class="title">{{ articleAfter.title }}</span>
						<div class="l-tag-date-container">
							<div class="date"><span>{{ formatDate(articleAfter.publicdt) }}</span></div>
						</div>
					</a>
				</div>
				<div class="p-btn-after-container">
					<a v-if="articleBefore" :href="getDetailUrl(articleBefore)">
						<div class="l-category-wapper">
							<div class="p-category"><a v-if="articleBefore.category">{{ getCategoryValue(articleBefore.category) }}</a></div>
						</div>
						<span class="title">{{ articleBefore.title }}</span>
						<div class="l-tag-date-container">
							<div class="date"><span>{{ formatDate(articleBefore.publicdt) }}</span></div>
						</div>
					</a>
				</div>
			</div>
			<component v-if="indexButton" :is="getComponentLayout(indexButton.type || 'buttons')" :page_info="page_info" :layout="layout" :block="block" :item="indexButton"></component>
		</div>

	</div>
</div>`,
	data() {
		return {
			indexButton: null,
			articleBefore: null,
			articleAfter: null,
			articleGroupData: null
		};
	},
	created: function(){
		var query = this.getSearchQuery();
		var self = this;
		var params = {
			'cid': this.block.settings['cid']||this.page_info.cid,
			'gid': this.page_info.gid,
			'articleid': query['id'],
		};
		if(query['agid'] == 'sample'){
			this.articleBefore = {
				"articleid": "3",
				"cid": null,
				"gid": null,
				"agid": null,
				"article_type": null,
				"title": "記事タイトル記事タイトル記事タイトル記事タイトル #3",
				"filepath": "2021-11-01",
				"contents": {
					"mainimage": "https://placehold.jp/ebebeb/9e9e9e/1024x576.png?text=image03",
					"summary": null,
					"body": {
						"items": [
							{
								"type": "headline",
								"workflow": "public",
								"items": [{"type": "text","workflow": "public","value": "タイトル01"}]
							},
							{
								"type": "textarea",
								"workflow": "public",
								"value": "記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文"
							},
							{
								"type": "headline",
								"workflow": "public",
								"items": [{"type": "text","workflow": "public","value": "タイトル01"}]
							},
							{
								"type": "textarea",
								"workflow": "public",
								"value": "記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文"
							}
						]
					}
				},
				"publicdt": "2021-11-01 00:00:00",
				"tags": null,
				"category": "cate-0001",
				"author": "author-0001",
				"permission": "public",
				"lock_id": null,
				"lock_expire": null,
				"deletedt": null,
				"createdt": "2021-11-05 07:39:21",
				"updatedt": "2021-11-05 07:39:21"
			};
			this.articleAfter = {
				"articleid": "3",
				"cid": null,
				"gid": null,
				"agid": null,
				"article_type": null,
				"title": "記事タイトル記事タイトル記事タイトル記事タイトル #3",
				"filepath": "2021-11-01",
				"contents": {
					"mainimage": "https://placehold.jp/ebebeb/9e9e9e/1024x576.png?text=image03",
					"summary": null,
					"body": {
						"items": [
							{
								"type": "headline",
								"workflow": "public",
								"items": [{"type": "text","workflow": "public","value": "タイトル01"}]
							},
							{
								"type": "textarea",
								"workflow": "public",
								"value": "記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文"
							},
							{
								"type": "headline",
								"workflow": "public",
								"items": [{"type": "text","workflow": "public","value": "タイトル01"}]
							},
							{
								"type": "textarea",
								"workflow": "public",
								"value": "記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文"
							}
						]
					}
				},
				"publicdt": "2021-11-01 00:00:00",
				"tags": null,
				"category": "cate-0001",
				"author": "author-0001",
				"permission": "public",
				"lock_id": null,
				"lock_expire": null,
				"deletedt": null,
				"createdt": "2021-11-05 07:39:21",
				"updatedt": "2021-11-05 07:39:21"
			};
		}
		else{
			var url = this.page_info.filesBaseDomain+'/_api_/getArticleNextPrevNavi.json?t='+(new Date()).getTime();
			this.articleGroupData = page_info['loadArticleGroupData'];
			if(!axios){ return; }
			axios.post(url, params)
			.then(response => {
				if(response.data['articleBefore'] && response.data['articleBefore']['contents']){
					this.articleBefore = response.data['articleBefore'];
				}
				if(response.data['articleAfter'] && response.data['articleAfter']['contents']){
					this.articleAfter = response.data['articleAfter'];
				}
			})
			.catch(response => {});
		}
		if(this.block.settings && this.block.settings.indexLinkTitle){
			this.indexButton = {
				"type": "buttons",
				"items": [
					{
						"type": "button",
						"linkUrl": this.getIndexUrl(),
						"value": this.block.settings.indexLinkTitle
					}
				]
			}
		}
	},
	methods: {
		updateArticle: function(articleGroupData, articles){
			this.article = articles;
			this.articleGroupData = articleGroupData;
		},
		getCategoryValue: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return this.articleGroupData.contents.categories.items[i].value;
				}
			}
			return null;
		},
		getCategoryStyle: function(categoryid){
			for(var i=0; i<this.articleGroupData.contents.categories.items.length; i++){
				if(this.articleGroupData.contents.categories.items[i].id == categoryid){
					return 'background-color:'+this.articleGroupData.contents.categories.items[i].color;
				}
			}
			return null;
		},
		getIndexUrl: function(){
				return this.page_info.locationInfo["index"];
		},
		getDetailUrl: function(item){
			var detailUrl = null;
			if(this.block.settings.linkProjectInfo && this.block.settings.linkProjectInfo['locationInfo']){
				detailUrl = this.block.settings.linkProjectInfo['locationInfo']['detail'];
			}
			else if(this.block.settings['detailUrl']){
				detailUrl = this.block.settings['detailUrl'];
			}
			else if(this.page_info.locationInfo && this.page_info.locationInfo["detail"]){
				detailUrl = this.page_info.locationInfo["detail"];
			}
			return this.getArticleDetailUrl(detailUrl, item);
		},
		getPage: function(no){
			return '?page='+no;
		},
		formatDate(date){
			var dt = new Date(date);
			var y = dt.getFullYear();
			var m = ("00" + (dt.getMonth()+1)).slice(-2);
			var d = ("00" + (dt.getDate())).slice(-2);
			return y +'.'+ m +'.'+ d;
		}
	}
});

app.layout['block__blog_side_category'] = 'block__blog_side_category';
vueApp.component('block__blog_side_category', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-side-content-wrapper" :class="[getBlockClasses(), getStyle(page_info, block, 's-align')]" :id="getBlockId()">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="block"></component>
	<div class="l-section-container">
		<div v-if="block.settings && block.settings.title" class="l-side-header"><h3 v-html="block.settings.title"></h3></div>
		<div class="l-side-content">
			<ul v-if="category">
				<li v-for="item in category.items" :class="getListClass(item)">
					<template v-if="item.childrenFlg">
						<div><div class="text-body">{{ item.value }}</div></div>
					</template>
					<template v-else>
						<a :href="getArchivelCategoryUrl(item)"><div class="text-body">{{ item.value }}</div><i class="fas fa-chevron-right"></i></a>
					</template>
				</li>
			</ul>
		</div>
	</div>
</div>
`,
	data() {
		return {
			category: {
				items: []
			}
		};
	},
	created: function(){
		if(this.block['loadArticleGroupData']){
			this.category = this.block['loadArticleGroupData']['contents']['categories'];
			this.remakeCategoryItems(this.category.items);
		}
		else{
			var params = {
				'cid': this.block.settings['cid']||this.page_info.cid,
				'gid': this.block.settings['gid']||this.page_info.gid
			};
			if(this.block.settings.linkProjectInfo){
				params['cid'] = this.block.settings.linkProjectInfo['cid'];
				params['gid'] = this.block.settings.linkProjectInfo['gid'];
			}
			var self = this;
			var url = '';
			if(this.page_info.filesBaseDomain){ url+= this.page_info.filesBaseDomain; }
			url+= '/_api_/getTagArticlesCategory.json?t='+(new Date()).getTime();
			if(!axios){ return; }
			axios.post(url, params)
			.then(response => {
				// console.log(response.data);
				self.category = response.data['category'];
				self.remakeCategoryItems(self.category.items);
			})
			.catch(response => {});
		}
	},
	methods: {
		getBlockClasses: function(){
			var res = [];
			var blockKey = 'b-blog_side_download';
			var blockId = this.getStyleid(blockKey);
			if(this.block.block_type){ res.push(this.block.block_type); }
			if(this.block.layout_type){ res.push(this.block.layout_type); }
			if(this.block.color_style){ res = res.concat(this.block.color_style); }
			if(this.block.bg_style){ res = res.concat(this.block.bg_style); }
			if(this.block && this.block.classes){ res = res.concat(this.block.classes); }
			var styleid = this.getStyleid('decoration-em');
			if(styleid && res.indexOf(styleid) === -1){ res.push(styleid); }
			var styleid = this.getStyleid('decoration-strong');
			if(styleid && res.indexOf(styleid) === -1){ res.push(styleid); }
			var styleid = this.getStyleid('frame-container', null, blockKey, blockId);
			if(styleid && res.indexOf(styleid) === -1){ res.push('frame-container'); res.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, blockKey, blockId);
			if(styleid && res.indexOf(styleid) === -1){ res.push('block-bg-container-color'); res.push(styleid); }
			return Array.from(new Set(res));
		},
		remakeCategoryItems: function(items){
			if(!items || items.length	== 0){ return; }
			for(var i=0; i<items.length-1; i++){
				if(!(items[i].parent) && items[i+1].parent){
					items[i].childrenFlg = true;
				}
			}
		},
		getListClass: function(item){
			var res = [];
			if(item.childrenFlg){ res.push('parent'); }
			if(item.parent){ res.push('child'); }
			return res;
		},
		getArchivelCategoryUrl: function(item){
			var url = null;
			if(this.block.settings && this.block.settings.linkProjectInfo && this.block.settings.linkProjectInfo['locationInfo']){
				url = this.block.settings.linkProjectInfo['locationInfo']['archive'];
			}
			else if(this.block.settings && this.block.settings['archiveUrl']){
				url = this.block.settings['archiveUrl'];
			}
			else if(this.page_info.locationInfo && this.page_info.locationInfo["archive"]){
				url = this.page_info.locationInfo["archive"];
			}
			if(url && url.indexOf('?') !== -1){
				return url+'&category='+item.id;
			}else if(url){
				return url+'?category='+item.id;
			}
		}
	}
});
app.layout['block__blog_side_newentry'] = 'block__blog_side_newentry';
vueApp.component('block__blog_side_newentry', {
	mixins: [baseIncludeComponent],
	template: `
<div class="l-side-content-wrapper" :class="[getBlockClasses(), getStyle(page_info, block, 's-align')]" :id="getBlockId()">
	<component :is="layout.inc__section_bg" :page_info="page_info" :layout="layout" :block="block"></component>
	<div class="l-section-container">
		<div class="l-side-header" v-if="block.settings.title || block.settings.header">
			<h3 v-if="block.settings.title" v-html="block.settings.title"></h3>
			<component v-for="(item2,index) in block.settings.header" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
		<div class="l-side-content">
			<ul v-if="articles">
				<li v-for="item in articles.items"><a :href="getDetailUrl(item)"><div class="text-body">{{ item.title }}</div><i class="fas fa-chevron-right"></i></a></li>
			</ul>
			<div v-if="!articles.items || articles.items.length==0">登録記事がありません</div>
		</div>
		<div class="l-side-footer" v-if="block.settings.footer">
			<component v-for="(item2,index) in block.settings.footer" :is="getComponentLayout(item2.type)" :page_info="page_info" :layout="layout" :block="block" :item="item2" :blockid="index" :key="index"></component>
		</div>
	</div>
</div>
`,
	data() {
		return {
			articles: {
				items: []
			}
		};
	},
	created: function(){
		var self = this;
		self.articleLoading = true;
		this.loadLinkPages((articleList) => {
			if(this.block.settings && this.block.settings.limit > 0){
				if(articleList && articleList.items){
					articleList.items.splice(this.block.settings.limit);
				}
			}
			self.articles = articleList;
			self.articleLoading = false;
		});
	},
	methods: {
		getBlockClasses: function(){
			var res = [];
			var blockKey = 'b-blog_side_newentry';
			var blockId = this.getStyleid(blockKey);
			if(this.block.block_type){ res.push(this.block.block_type); }
			if(this.block.layout_type){ res.push(this.block.layout_type); }
			if(this.block.color_style){ res = res.concat(this.block.color_style); }
			if(this.block.bg_style){ res = res.concat(this.block.bg_style); }
			if(this.block && this.block.classes){ res = res.concat(this.block.classes); }
			var styleid = this.getStyleid('decoration-em');
			if(styleid && res.indexOf(styleid) === -1){ res.push(styleid); }
			var styleid = this.getStyleid('decoration-strong');
			if(styleid && res.indexOf(styleid) === -1){ res.push(styleid); }
			var styleid = this.getStyleid('frame-container', null, blockKey, blockId);
			if(styleid && res.indexOf(styleid) === -1){ res.push('frame-container'); res.push(styleid); }
			var styleid = this.getStyleid('block-bg-container-color', null, blockKey, blockId);
			if(styleid && res.indexOf(styleid) === -1){ res.push('block-bg-container-color'); res.push(styleid); }
			return Array.from(new Set(res));
		},
		getDetailUrl: function(item){
			if(!item.contents.body || !item.contents.body.items || item.contents.body.items.length == 0){ return null; }
			var detailUrl = null;
			if(this.block.settings.linkProjectInfo && this.block.settings.linkProjectInfo['locationInfo']){
				detailUrl = this.block.settings.linkProjectInfo['locationInfo']['detail'];
			}
			else if(this.block.settings['detailUrl']){
				detailUrl = this.block.settings['detailUrl'];
			}
			else if(this.page_info.locationInfo && this.page_info.locationInfo["detail"]){
				detailUrl = this.page_info.locationInfo["detail"];
			}
			return this.getArticleDetailUrl(detailUrl, item);
		}
	}
});