@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Damion&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');

/* CSS Document */

/* # =================================================================
   #
   # h2 h3 p ul ol li tabリセット
   #
   # ================================================================= */

/* h2 h3 p ul ol li reset  ============================ */
#ocnk .htmleditor-content-wrapper .htmleditor-title-item h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item) p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item) li {
  background-color: transparent;
  background-image: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 100%;
  color: inherit;
  text-align: inherit;
  line-height: 1.4;
}

#ocnk .htmleditor-content-wrapper .htmleditor-title-item h2:not(.editable_area)::after,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item h2:not(.editable_area)::before,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item h3::after,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item h3::before {
	display: none;
}

/* :empty */
/* border/background-color指定がないかつ、h2/h3/p/liが空の場合に余白をリセット */
#ocnk .htmleditor-content-wrapper .htmleditor-title-item:not([class*="bor-wi-"]:not(.bor-wi-none),[class*="blo-color-"]):has(h2:not(.editable_area):empty,h3:not(.editable_area):empty),
#ocnk .htmleditor-content-wrapper .htmleditor-text-item:not([class*="bor-wi-"]:not(.bor-wi-none),[class*="blo-color-"]):has(p:not(.editable_area):empty),
#ocnk .htmleditor-content-wrapper .htmleditor-inner-list-item:not([class*="bor-wi-"]:not(.bor-wi-none),[class*="blo-color-"]):has(p:not(.editable_area):empty) {
	padding: 0!important;
	border: none!important;
	background-color: transparent!important;
}

/** 行高の指定がある場合、hタグ自体の行高指定をリセット */
#ocnk :is(.txt-line-100, .txt-line-120, .txt-line-140, .txt-line-160, .txt-line-180, .txt-line-200) h2,
#ocnk :is(.txt-line-100, .txt-line-120, .txt-line-140, .txt-line-160, .txt-line-180, .txt-line-200) h3 {
  line-height: inherit;
}

/* ul ol li ============================ */
#ocnk .htmleditor-content-wrapper ul,
#ocnk .htmleditor-content-wrapper ol,
#ocnk .htmleditor-content-wrapper li {
  list-style-type: none;
}

/* A ============================ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) A {
  font-size: 100%;
}
#ocnk.use_hover .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) A:hover {
  opacity: 0.7;
}

/* tab ============================ */
.htmleditor-content-wrapper .item_tab_area,
.htmleditor-content-wrapper .item_tabs A,
.htmleditor-content-wrapper .item_tabs li:first-child A,
.htmleditor-content-wrapper .item_tabs li.tab_on A,
.htmleditor-content-wrapper .tab_content {
	background-color: transparent;
  border: none;
	padding: 0;
	margin: 0;
}
.htmleditor-content-wrapper .item_tabs A {
  display: block;
  text-align: left;
}
.htmleditor-content-wrapper .active_label {
  cursor: default;
}

/* default bg/padding reset ============================ */
/* 6,8,10,18 */
.htmleditor-content-wrapper #inner_container:not(:has(.htmleditor-block-guide)),
.htmleditor-content-wrapper #inner_main_container:not(:has(.htmleditor-block-guide)),
.htmleditor-content-wrapper #inner_contents:not(:has(.htmleditor-block-guide)) {
  background-image: none;
  background-color: transparent;
  border: none;
}
/* 25,26,27,29 */
.htmleditor-content-wrapper .page_box:not(:has(.htmleditor-block-guide)) {
  padding-bottom: 0;
}

/* preview padding reset ============================ */
#ocnk #inner_contents:has(.htmleditor-content-wrapper) {
	box-sizing: border-box;
}


/* # =================================================================
# 
# htmleditor
# 
# ================================================================= */

/* # =================================================================
   # block
   # ================================================================= */

.htmleditor-content-wrapper .htmleditor-content-block,
.htmleditor-content-wrapper .htmleditor-inner-anchor-content-block {
  margin-bottom: 20px;
  box-sizing: border-box;
}
.htmleditor-content-wrapper .htmleditor-content-block + .htmleditor-content-block,
.htmleditor-content-wrapper .htmleditor-inner-anchor-content-block + .htmleditor-inner-anchor-content-block {
  margin-top: 20px;
}
.htmleditor-content-wrapper .htmleditor-content-block.blo-ma-t-none,
.htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-ma-t-none {
  margin-top: 0;
}
.htmleditor-content-wrapper .htmleditor-content-block.blo-ma-b-none,
.htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-ma-b-none {
  margin-bottom: 0;
}

/* # =================================================================
   # fixwidth ※フルスクリーンテンプレート利用時に最大を1200～1600で選択可能
   # ================================================================= */

.htmleditor-content-wrapper .blo-fixwidth-small,
.htmleditor-content-wrapper .blo-fixwidth-medium,
.htmleditor-content-wrapper .blo-fixwidth-large {
	margin-left: auto;
	margin-right: auto;
}

.htmleditor-content-wrapper .blo-fixwidth-small {
	max-width: 1200px;
}

.htmleditor-content-wrapper .blo-fixwidth-medium {
	max-width: 1400px;
}

.htmleditor-content-wrapper .blo-fixwidth-large {
	max-width: 1600px;
}


/* # =================================================================
   # img
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .htmleditor-image-item img {
  max-width: 100%;
  height: auto;
}

#ocnk.touch_fullscreen .htmleditor-content-wrapper .htmleditor-image-item img,
#ocnk.touch_fullscreen .htmleditor-content-wrapper .htmleditor-slide-item img {
  width: 100%;
}

/* 100%解除 */
.htmleditor-content-wrapper .touch_fullscreen .htmleditor-image-item.htmleditor-image-auto img,
#ocnk.touch_fullscreen .htmleditor-content-wrapper .htmleditor-image-item.htmleditor-image-auto img {
  width: auto;
}

/** ボタン内画像 */
.htmleditor-inner-btn-image-item img {
  width: auto;
}


/* # =================================================================
   # image-inner-flex　※画像50%表示横並び
   # 
   # ※余白指定に応じてcolumn-gapを入れる。
   # ※余白指定 (gap) がある場合は、gapを加算。100%から引いて割る。
   # (例)  width: calc((100% - 10px) / 2);
   #  ※blo-pa-medium (column-gap: 10px) の10pxを引く。
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .image-inner-flex {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-small .image-inner-flex,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-small.image-inner-flex {
  column-gap: 5px;
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-medium .image-inner-flex,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-medium.image-inner-flex {
  column-gap: 10px;
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-large .image-inner-flex,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-large.image-inner-flex {
  column-gap: 15px;
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-xlarge .image-inner-flex,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-xlarge.image-inner-flex {
  column-gap: 20px;
}
#ocnk .htmleditor-content-wrapper .image-inner-flex .image-inner-flex-item + .image-inner-flex-item:nth-child(2) {
  margin-top: 0!important;
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-none .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-none.image-inner-flex .image-inner-flex-item {
  width: calc(100% / 2);
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-small .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-small.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-medium .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-medium.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-large .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-large.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-xlarge .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block.blo-pa-xlarge.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 20px) / 2);
}

#ocnk .htmleditor-output-wrapper .image-inner-flex :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-image-item, .htmleditor-item-link) {
  width: 100%;
}


/* # =================================================================
   # blo-image-fit　※画像object-fit: cover
   #
   # ※余白指定がある場合は、段数に応じた間の数分、余白を加算。100%から引いて割る。
   # (例)  height: calc((100% - 20px) / 3); 
   #  ※blo-pa-medium (padding: 10px) の3段の場合は、間は2つなので、blo-pa-mediumの余白10px × 2で20pxを引く。
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .blo-image-fit .htmleditor-image-item.image-1column-item{
  height: 100%;
}

/* blo-pa-none ============================ */
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-none .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-none .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-image-item.image-2column-item {
  height: calc(100% / 2);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-none .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-none .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-image-item.image-3column-item {
  height: calc(100% / 3);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-none .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-none .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-image-item.image-4column-item {
  height: calc(100% / 4);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-none .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-none .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-image-item.image-5column-item {
  height: calc(100% / 5);
}

/* blo-pa-small ============================ */
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-small .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-small .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-2column-item {
  height: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-small .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-small .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-3column-item {
  height: calc((100% - 10px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-small .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-small .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-4column-item {
  height: calc((100% - 15px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-small .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-small .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-5column-item {
  height: calc((100% - 20px) / 5);
}

/* blo-pa-medium ============================ */
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-medium .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-medium .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-2column-item {
  height: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-medium .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-medium .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-3column-item {
  height: calc((100% - 20px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-medium .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-medium .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-4column-item {
  height: calc((100% - 30px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-medium .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-medium .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-5column-item {
  height: calc((100% - 40px) / 5);
}

/* blo-pa-large ============================ */
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-large .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-large .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-2column-item {
  height: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-large .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-large .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-3column-item {
  height: calc((100% - 30px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-large .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-large .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-4column-item {
  height: calc((100% - 45px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-large .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-large .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-5column-item {
  height: calc((100% - 60px) / 5);
}

/* blo-pa-xlarge ============================ */
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-2column-item {
  height: calc((100% - 20px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-3column-item {
  height: calc((100% - 40px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-4column-item {
  height: calc((100% - 60px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-5column-item {
  height: calc((100% - 80px) / 5);
}
#ocnk .htmleditor-content-wrapper .blo-image-fit {
	height: 100%;
}
#ocnk .htmleditor-content-wrapper .blo-image-fit .htmleditor-image-item img {
  object-fit: cover;
  height: 100%;
}
#ocnk .htmleditor-content-wrapper .blo-sp-wrap .blo-image-fit .htmleditor-image-item {
  height: auto;
 }
#ocnk .htmleditor-content-wrapper .blo-sp-wrap .blo-image-fit .htmleditor-image-item img {
  object-fit: unset;
  height: auto;
}


/* # =================================================================
   # blo-image-fit + image-inner-flex　※同時指定
   #
   # ※仕様が複雑なため説明はPDF参照
   #  https://www.i-love-kobe.com/~gyobu/design/htmleditor/data/blo-image-fit+image-inner-flex.pdf
   # ================================================================= */

/* blo-pa-small～blo-pa-xlarge 2column ============================ */
#ocnk .htmleditor-output-wrapper .blo-image-fit:is(.blo-pa-none, .blo-pa-small, .blo-pa-medium, .blo-pa-large, .blo-pa-xlarge) .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit:is(.blo-pa-none, .blo-pa-small, .blo-pa-medium, .blo-pa-large, .blo-pa-xlarge) .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-2column-item {
  height: 100%;
}

/* blo-pa-none ============================ */
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc(100% / 2);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc(100% / 3);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-none .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc(100% / 4);
}

/* blo-pa-small ============================ */
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 15px) / 4);
}

/* blo-pa-medium ============================ */
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 30px) / 4);
}

/* blo-pa-large ============================ */
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 30px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 45px) / 4);
}

/* blo-pa-xlarge ============================ */
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 20px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 40px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 60px) / 4);
}


/* # =================================================================
   # flex
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .display-flex {
  display: flex;
}
#ocnk .htmleditor-content-wrapper .display-inline-flex {
  display: inline-flex
}
#ocnk .htmleditor-content-wrapper .flex-wrap {
  flex-wrap: wrap;
}
#ocnk .htmleditor-content-wrapper .flex-j-center {
  justify-content: center;
}
#ocnk .htmleditor-content-wrapper .flex-j-start {
  justify-content: flex-start;
}
#ocnk .htmleditor-content-wrapper .flex-j-end {
  justify-content: flex-end;
}
#ocnk .htmleditor-content-wrapper .flex-a-center {
  align-items: center;
}
#ocnk .htmleditor-content-wrapper .flex-a-start {
  align-items: flex-start;
}
#ocnk .htmleditor-content-wrapper .flex-a-end {
  align-items: flex-end;
}
#ocnk .htmleditor-content-wrapper .flex-a-stretch {
  align-items: stretch;
}
#ocnk .htmleditor-content-wrapper .flex-d-rowreverse {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 490px) {
#ocnk .htmleditor-content-wrapper .flex-d-columnreverse.blo-sp-wrap {
  flex-direction: column-reverse;
}
}
#ocnk .htmleditor-content-wrapper .flex-d-column {
  flex-direction: column;
}




/* # =================================================================
   # A
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .htmleditor-inner-tab-block A,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-accordion-block A {
  display: block;
}


/* # =================================================================
   # txt-link-btn
   # ================================================================= */
#ocnk .htmleditor-output-wrapper .htmleditor-btn-item A.txt-link-btn:not(.display-flex) {
  display: inline-block;
}
#ocnk .htmleditor-output-wrapper .htmleditor-btn-item A.txt-link-btn {
  cursor: pointer;
}


/* # =================================================================
   # ul ol li
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .htmleditor-ul-block ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-block ol {
  padding-left: 25px;
}
#ocnk .htmleditor-content-wrapper .htmleditor-ul-block ul li,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-ul-block ul li {
  list-style-type: disc;
}
#ocnk .htmleditor-content-wrapper .htmleditor-ol-block ol li,
#ocnk .htmleditor-content-wrapper .htmleditor-inner-ol-block ol li {
  list-style-type: decimal;
}


/* # =================================================================
   # table td
   # ================================================================= */

#ocnk .htmleditor-content-wrapper table.htmleditor-table-item {
  width: 100%;
  table-layout: auto;
}
#ocnk .htmleditor-content-wrapper table.htmleditor-table-item.table-la-fixed {
  table-layout: fixed;
}
#ocnk .htmleditor-content-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item {
  margin: 0;
  padding: 0;
}
/* flex-directionがcolumnのため、縦中央寄せがjustifyのcenter */
#ocnk .htmleditor-content-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top {
  display: flex;
  height: 100%;
  align-items: center;
}
#ocnk .htmleditor-content-wrapper table.htmleditor-table-item {
	height: fit-content;
}
#ocnk .htmleditor-content-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item,
#ocnk .htmleditor-content-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item :is(.htmleditor-item-guide, .htmleditor-item, .htmleditor-item-link) {
	height: 100%;
}


/* # =================================================================
   # tab
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .htmleditor-inner-tab-block .htmleditor-item-link {
  width: calc((100% - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .htmleditor-inner-tab-block:has(> A.htmleditor-item-link:nth-child(-n+3):last-child) .htmleditor-item-link {
	flex-grow: 1;
}


/* # =================================================================
   # slide
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .slider_box .item_image_box img {
  object-fit: cover;
}
/*
#ocnk .htmleditor-content-wrapper .slider_box .swiper-pagination-bullet,
#ocnk .htmleditor-content-wrapper .slider_box .swiper-pagination-bullet-active {
  border: none;
}
*/
/* プレビュー画面用 ============================ */
#ocnk .htmleditor-content-wrapper .swiper-wrapper {
  height: auto;
}

/* # =================================================================
   # category/group
   # ================================================================= */

/* 縦積み */
#ocnk .htmleditor-output-wrapper .custom_nav_link.vertical_nav_link .inner_itemlist_nav .has_image_nav_btn {
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}

#ocnk .htmleditor-output-wrapper .custom_nav_link.vertical_nav_link .inner_itemlist_nav .has_image_nav_btn :is(.itemlist_categoryimage,img) {
  width: 100%;
  max-width: 200px;
  height: auto;
}

#ocnk .htmleditor-output-wrapper .custom_nav_link.vertical_nav_link .inner_itemlist_nav .has_image_nav_btn .fa-chevron-right {
  display: none;
}

#ocnk .htmleditor-output-wrapper .custom_nav_link.vertical_nav_link .inner_itemlist_nav .has_image_nav_btn .nav_text {
  width: auto;
  padding-top: 10px;
}

/* 正方形用 */
#ocnk .htmleditor-output-wrapper .custom_nav_link.vertical_nav_link.square_photo_nav .inner_itemlist_nav .has_image_nav_btn img {
    aspect-ratio: 1/1;
    object-fit: contain;
}

/* フルスクリーンテンプレート用 */
@media (min-width: 1400px) {
    .responsive.touch_fullscreen .htmleditor-output-wrapper .custom_nav_link.column1 .inner_itemlist_nav .wrapped_item {
        width: calc(100% / 4);
    }
    .responsive.touch_fullscreen .htmleditor-output-wrapper .custom_nav_link.column2 .inner_itemlist_nav .wrapped_item {
        width: calc(100% / 5);
    }
}

@media (min-width: 1600px) {
    .responsive.touch_fullscreen .htmleditor-output-wrapper .custom_nav_link.column1 .inner_itemlist_nav .wrapped_item {
        width: calc(100% / 5);
    }
    .responsive.touch_fullscreen .htmleditor-output-wrapper .custom_nav_link.column2 .inner_itemlist_nav .wrapped_item {
        width: calc(100% / 6);
    }
}

@media (min-width: 1800px) {
    .responsive.touch_fullscreen .htmleditor-output-wrapper .custom_nav_link.column1 .inner_itemlist_nav .wrapped_item {
        width: calc(100% / 6);
    }
}

/* # =================================================================
   # movie
   # ================================================================= */

/* 100%表示 */
.pc_full_width.htmleditor-movie-item .youtube_player,
.pc_full_width.htmleditor-movie-item video,
.pc_full_width.htmleditor-movie-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-width: none!important;
}
.htmleditor-movie-item video {
	max-width: 100%;
	height: auto;
}

.htmleditor-output-wrapper .htmleditor-movie-item .youtube_container {
  height: auto;
  padding-top: 0;
}

/* # =================================================================
   # animation
   # ================================================================= */

/* 左から右スライド */
.htmleditor-output-wrapper .htmleditor-image-item.image-ani-viewmask img {
  -webkit-mask-size: 0px 100%;
  mask-size: 0px 100%;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / 100%) 0);
  mask-image: linear-gradient(rgb(0 0 0 / 100%) 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.htmleditor-output-wrapper .htmleditor-image-item.image-ani-viewmask.displayed_on_screen img {
  animation-name: viewinMask;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.4,.4,0,1);
  animation-fill-mode: forwards;
}

@keyframes viewinMask {
    0%{
		mask-size: 0px 100%;
    }
    100%{
		mask-size: 100% 100%;
    }
}

/* フェードイン */
.htmleditor-output-wrapper .htmleditor-image-item.image-ani-viewfade img {
  opacity: 0;
}

.htmleditor-output-wrapper .htmleditor-image-item.image-ani-viewfade.displayed_on_screen img {
  animation-name: viewinFade;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.4,.4,0,1);
  animation-fill-mode: forwards;
}

@keyframes viewinFade {
	0%{
		opacity: 0;
    }
    100%{
		opacity: 1;
    }
}

/* ズームイン */
.htmleditor-output-wrapper .htmleditor-image-item.image-ani-viewscale {
  width: 100%;
  height: fit-content;
  overflow: hidden;
}

.htmleditor-output-wrapper .htmleditor-image-item.image-ani-viewscale.displayed_on_screen img {
  animation-name: viewinScale;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.4,.4,0,1);
  animation-fill-mode: forwards;
  scale: 1.2;
}

@keyframes viewinScale {
	0%{
		scale: 1.2;
    }
	100%{
		 scale: 1;
    }
}

/* # =================================================================
   # text-align
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .txt-al-left {
  text-align: left;
}
/* table-va-topの時 ※flex-direction:columnのため左寄せがalign-items:flex-start */
#ocnk .htmleditor-output-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top.txt-al-left,
#ocnk .htmleditor-output-wrapper .txt-al-left table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top,
#ocnk .htmleditor-output-wrapper :is(.txt-al-center, .txt-al-left, .txt-al-right) table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top.txt-al-left {
  text-align: left;
  justify-content: flex-start;
}

#ocnk .htmleditor-output-wrapper .txt-al-center {
  text-align: center;
}
/* table-va-topの時 ※flex-direction:columnのため中央寄せがalign-items:center */
#ocnk .htmleditor-output-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top.txt-al-center,
#ocnk .htmleditor-output-wrapper .txt-al-center table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top,
#ocnk .htmleditor-output-wrapper :is(.txt-al-center, .txt-al-left, .txt-al-right) table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top.txt-al-center {
  text-align: center;
  justify-content: center;
}

#ocnk .htmleditor-output-wrapper .txt-al-right {
  text-align: right;
}
/* table-va-topの時 ※flex-direction:columnのため右寄せがalign-items:flex-end */
#ocnk .htmleditor-output-wrapper table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top.txt-al-right,
#ocnk .htmleditor-output-wrapper .txt-al-right table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top,
#ocnk .htmleditor-output-wrapper :is(.txt-al-center, .txt-al-left, .txt-al-right) table.htmleditor-table-item td.htmleditor-tablecell-item .table-va-top.txt-al-right {
  text-align: right;
  justify-content: flex-end;
}

#ocnk .htmleditor-output-wrapper .txt-al-spcenter,
#ocnk .htmleditor-output-wrapper .txt-al-left.txt-al-spcenter,
#ocnk .htmleditor-output-wrapper .txt-al-right.txt-al-spcenter {
  text-align: center;
}


/* # =================================================================
   # text-decoration
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .txt-de-under {
  text-decoration: underline;
}
#ocnk .htmleditor-content-wrapper .txt-de-through {
  text-decoration: line-through;
}
#ocnk .htmleditor-content-wrapper .txt-de-italic {
  font-style: italic;
}


/* # =================================================================
   # padding
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .blo-pa-none {
  padding: 0px;
}
#ocnk .htmleditor-content-wrapper .blo-pa-small {
  padding: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-pa-medium {
  padding: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-pa-large {
  padding: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-pa-xlarge {
  padding: 20px;
}
#ocnk .htmleditor-content-wrapper .blo-pa-t-none {
  padding-top: 0;
}
#ocnk .htmleditor-content-wrapper .blo-pa-r-none {
  padding-right: 0;
}
#ocnk .htmleditor-content-wrapper .blo-pa-b-none {
  padding-bottom: 0;
}
#ocnk .htmleditor-content-wrapper .blo-pa-l-none {
  padding-left: 0;
}
#ocnk .htmleditor-content-wrapper .blo-pa-tb-none {
  padding-top: 0;
  padding-bottom: 0;
}
#ocnk .htmleditor-content-wrapper .blo-pa-lr-none {
  padding-left: 0;
  padding-right: 0;
}
/* padding image ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  padding: 0;
}
/* タブ内 ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  padding: 0;
}


/* # =================================================================
   # image + title/text ※画像下タイトル/テキスト上部余白
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-small .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-small:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-medium .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-medium:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-large .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-large:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 15px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-xlarge .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-xlarge:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 20px;
}

/* タブ内 ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-small .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-small:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-medium .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-medium:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-large .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-large:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 15px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-xlarge .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-xlarge:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 20px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-item-link:has(> :is(.htmleditor-title-item, .htmleditor-text-item)) {
	display: block;
}


/* # =================================================================
   # image ※画像+画像の上部余白
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 15px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 20px;
}

/* タブ内 ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 15px;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 20px;
}


/* # =================================================================
   # gap ※カラム時の余白
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .blo-ga-none {
  gap: 0px;
}
#ocnk .htmleditor-content-wrapper .blo-ga-small {
  gap: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-ga-medium {
  gap: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-ga-large {
  gap: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-ga-xlarge {
  gap: 20px;
}
#ocnk .htmleditor-content-wrapper .blo-col-sep.blo-ga-none {
  --sep-gap: 0px;
}
#ocnk .htmleditor-content-wrapper .blo-col-sep.blo-ga-small {
  --sep-gap: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-col-sep.blo-ga-medium {
  --sep-gap: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-col-sep.blo-ga-large {
  --sep-gap: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-col-sep.blo-ga-xlarge {
  --sep-gap: 20px;
}
#ocnk .htmleditor-content-wrapper .blo-col-sep.display-flex {
  gap: var(--sep-gap);
}


/* # =================================================================
   # border-radius
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .bor-ra-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-none > img,
#ocnk.use_hover li.bor-ra-none > a:hover {
  border-radius: 0px;
}
#ocnk .htmleditor-content-wrapper .bor-ra-small,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-small > img,
#ocnk.use_hover li.bor-ra-small > a:hover {
  border-radius: 3px;
}
#ocnk .htmleditor-content-wrapper .bor-ra-medium,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-medium > img,
#ocnk.use_hover li.bor-ra-medium > a:hover {
  border-radius: 5px;
}
#ocnk .htmleditor-content-wrapper .bor-ra-large,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-large > img,
#ocnk.use_hover li.bor-ra-large > a:hover {
  border-radius: 10px;
}
#ocnk .htmleditor-content-wrapper .bor-ra-tl-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-tl-none > img,
#ocnk.use_hover li.bor-ra-tl-none > a:hover {
	border-top-left-radius: 0;
}
#ocnk .htmleditor-content-wrapper .bor-ra-tr-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-tr-none > img,
#ocnk.use_hover li.bor-ra-tr-none > a:hover {
	border-top-right-radius: 0;
}
#ocnk .htmleditor-content-wrapper .bor-ra-bl-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-bl-none > img,
#ocnk.use_hover li.bor-ra-bl-none > a:hover {
	border-bottom-left-radius: 0;
}
#ocnk .htmleditor-content-wrapper .bor-ra-br-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-br-none > img,
#ocnk.use_hover li.bor-ra-br-none > a:hover {
	border-bottom-right-radius: 0;
}
#ocnk .htmleditor-content-wrapper .bor-ra-t-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-t-none > img,
#ocnk.use_hover li.bor-ra-t-none > a:hover {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
#ocnk .htmleditor-content-wrapper .bor-ra-b-none,
#ocnk .htmleditor-content-wrapper .htmleditor-image-item.bor-ra-b-none > img,
#ocnk.use_hover li.bor-ra-b-none > a:hover {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}


/* # =================================================================
   # border
   # ================================================================= */

/* border-width ============================ */
#ocnk .htmleditor-content-wrapper .bor-wi-none,
#ocnk.use_hover li.bor-wi-none > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-wi-none .htmleditor-tablecell-item {
  border-width: 0px;
}
#ocnk .htmleditor-content-wrapper .bor-wi-small,
#ocnk.use_hover li.bor-wi-small > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-wi-small .htmleditor-tablecell-item {
  border-width: 1px;
}
#ocnk .htmleditor-content-wrapper .bor-wi-medium,
#ocnk.use_hover li.bor-wi-medium > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-wi-medium .htmleditor-tablecell-item {
  border-width: 3px;
}
#ocnk .htmleditor-content-wrapper .bor-wi-large,
#ocnk.use_hover li.bor-wi-large > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-wi-large .htmleditor-tablecell-item {
  border-width: 5px;
}
#ocnk .htmleditor-content-wrapper .bor-wi-xlarge,
#ocnk.use_hover li.bor-wi-xlarge > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-wi-xlarge .htmleditor-tablecell-item {
  border-width: 10px;
}

/* border style ============================ */
#ocnk .htmleditor-content-wrapper .bor-st-solid,
#ocnk.use_hover li.bor-st-solid > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-st-solid .htmleditor-tablecell-item {
  border-style: solid;
}
#ocnk .htmleditor-content-wrapper .bor-st-dashed,
#ocnk.use_hover li.bor-st-dashed > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-st-dashed .htmleditor-tablecell-item {
  border-style: dashed;
}
#ocnk .htmleditor-content-wrapper .bor-st-dotted,
#ocnk.use_hover li.bor-st-dotted > a:hover,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block .htmleditor-table-item.bor-st-dotted .htmleditor-tablecell-item {
  border-style: dotted;
}

/* border delete ============================ */
#ocnk .htmleditor-content-wrapper .bor-t-none,
#ocnk.use_hover li.bor-t-none > a:hover {
  border-top: none;
}
#ocnk .htmleditor-content-wrapper .bor-r-none,
#ocnk.use_hover li.bor-r-none > a:hover {
  border-right: none;
}
#ocnk .htmleditor-content-wrapper .bor-b-none,
#ocnk.use_hover li.bor-b-none > a:hover {
  border-bottom: none;
}
#ocnk .htmleditor-content-wrapper .bor-l-none,
#ocnk.use_hover li.bor-l-none > a:hover {
  border-left: none;
}
#ocnk .htmleditor-content-wrapper .bor-tb-none,
#ocnk.use_hover li.bor-tb-none > a:hover {
  border-top: none;
  border-bottom: none;
}
#ocnk .htmleditor-content-wrapper .bor-lr-none,
#ocnk.use_hover li.bor-lr-none > a:hover {
  border-left: none;
  border-right: none;
}


/* # =================================================================
   # separator
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .blo-col-sep > :is(div, A) {
  position: relative;
}
/* 2番目以降の(div,A)に適用 */
#ocnk .htmleditor-output-wrapper .blo-col-sep > :is(div, A):nth-child(n+2)::after {
  content:"";
  display: block;
  position: absolute;
  bottom: 0;
}
/* sep-sp-noneで2番目以降の(div,A)から削除 */
#ocnk .htmleditor-output-wrapper .sep-sp-none > :is(div, A):nth-child(n+2)::after {
  display: none;
}
/* 縦積み：横100%×縦1pxの横線 */
#ocnk .htmleditor-output-wrapper .blo-sp-wrap.sep-wi-medium > :is(div, A):nth-child(n+2)::after {
  width: 100%;
  height: 1px;
}
/* 縦積み：横100%×縦3pxの横線 */
#ocnk .htmleditor-output-wrapper .blo-sp-wrap.sep-wi-large > :is(div, A):nth-child(n+2)::after {
  width: 100%;
  height: 3px;
}
/* 横並び：横1px×縦100%の縦線 */
#ocnk .htmleditor-output-wrapper .sep-wi-medium > :is(div, A):nth-child(n+2)::after {
  width: 1px;
  height: 100%;
}
/* 横並び：横3px×縦100%の縦線 */
#ocnk .htmleditor-output-wrapper .sep-wi-large > :is(div, A):nth-child(n+2)::after {
  width: 3px;
  height: 100%;
}

/* 区切り線位置　変数(--sep-position) ============================ */
/* 1行目：gap(--sep-gap)を半分にしマイナス値にする */
/* 2行目：線の太さ分引く */
#ocnk .htmleditor-content-wrapper .sep-wi-medium > :is(div, A):nth-child(n+2)::after {
  --sep-position-medium: calc((var(--sep-gap) / 2) * -1);
  --sep-position: calc(var(--sep-position-medium) - 0.5px);
}
#ocnk .htmleditor-content-wrapper .sep-wi-large > :is(div, A):nth-child(n+2)::after {
  --sep-position-large: calc((var(--sep-gap) / 2) * -1);
  --sep-position: calc(var(--sep-position-large) + 0.5px);
}
#ocnk .htmleditor-output-wrapper .sep-wi-medium > :is(div, A):nth-child(n+2)::after {
  --sep-position: calc(var(--sep-position-medium) - 0px);
}
#ocnk .htmleditor-output-wrapper .sep-wi-large > :is(div, A):nth-child(n+2)::after {
  --sep-position: calc(var(--sep-position-large) + 1px);
}
/* bottom位置：100%から変数(--sep-position)を引く */
#ocnk .htmleditor-output-wrapper .blo-sp-wrap.blo-col-sep > :is(div, A):nth-child(n+2)::after {
  top: auto;
  bottom: calc(100% - var(--sep-position));
  left: 0;
}
#ocnk .htmleditor-output-wrapper .blo-col-sep > :is(div, A):nth-child(n+2)::after {
  top: 0;
  left: auto;
  right: calc(100% - var(--sep-position));
}


/* # =================================================================
   # font-weight
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .txt-we-normal,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) A.txt-we-normal,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-normal p,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-normal h2,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-normal h3 {
  font-weight: 400;
}
#ocnk .htmleditor-content-wrapper .txt-we-bold,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-bold A,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) A.txt-we-bold,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-bold p,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-bold h2,
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-goods-block) .txt-we-bold h3 {
  font-weight: 700;
}


/* # =================================================================
   # font-size　※狭い幅用に文字サイズを小さくする
   # ================================================================= */

/* font-size ============================ */
/* min375 - max1400 */
/* 9px - 10px */
#ocnk .htmleditor-output-wrapper .txt-si-10,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-10 {
  font-size: clamp(0.563rem, 0.540rem + 0.098vw, 0.625rem);
}
/* 10px - 12px */
#ocnk .htmleditor-output-wrapper .txt-si-12,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-12 {
  font-size: clamp(0.625rem, 0.579rem + 0.195vw, 0.75rem);
}
/* 12px - 14px */
#ocnk .htmleditor-output-wrapper .txt-si-14,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-14 {
  font-size: clamp(0.75rem, 0.704rem + 0.195vw, 0.875rem);
}
/* 14px - 16px */
#ocnk .htmleditor-output-wrapper .txt-si-16,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-16 {
  font-size: clamp(0.875rem, 0.829rem + 0.195vw, 1rem);
}
/* 16px - 18px */
#ocnk .htmleditor-output-wrapper .txt-si-18,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-18 {
  font-size: clamp(1rem, 0.954rem + 0.195vw, 1.125rem);
}
/* 18px - 20px */
#ocnk .htmleditor-output-wrapper .txt-si-20,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-20 {
  font-size: clamp(1.125rem, 1.079rem + 0.195vw, 1.25rem);
}
/* 20px - 22px */
#ocnk .htmleditor-output-wrapper .txt-si-22,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-22 {
  font-size: clamp(1.25rem, 1.204rem + 0.195vw, 1.375rem);
}
/* 20px - 24px */
#ocnk .htmleditor-output-wrapper .txt-si-24,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-24 {
  font-size: clamp(1.25rem, 1.159rem + 0.39vw, 1.5rem);
}
/* 20px - 26px */
#ocnk .htmleditor-output-wrapper .txt-si-26,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-26 {
  font-size: clamp(1.25rem, 1.113rem + 0.585vw, 1.625rem);
}
/* 22px - 28px */
#ocnk .htmleditor-output-wrapper .txt-si-28,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-28 {
  font-size: clamp(1.375rem, 1.238rem + 0.585vw, 1.75rem);
}
/* 22px - 30px */
#ocnk .htmleditor-output-wrapper .txt-si-30,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-30 {
  font-size: clamp(1.375rem, 1.192rem + 0.78vw, 1.875rem);
}
/* 24px - 35px */
#ocnk .htmleditor-output-wrapper .txt-si-35,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-35 {
  font-size: clamp(1.5rem, 1.248rem + 1.073vw, 2.188rem);
}
/* 26px - 40px */
#ocnk .htmleditor-output-wrapper .txt-si-40,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-40 {
  font-size: clamp(1.625rem, 1.305rem + 1.366vw, 2.5rem);
}
/* 26px - 45px */
#ocnk .htmleditor-output-wrapper .txt-si-45,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-45 {
  font-size: clamp(1.625rem, 1.191rem + 1.854vw, 2.813rem);
}
/* 30px - 50px */
#ocnk .htmleditor-output-wrapper .txt-si-50,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-50 {
  font-size: clamp(1.875rem, 1.418rem + 1.951vw, 3.125rem);
}
/* 40px - 60px */
#ocnk .htmleditor-output-wrapper .txt-si-60,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-60 {
  font-size: clamp(2.5rem, 2.043rem + 1.951vw, 3.75rem);
}
/* 50px - 70px */
#ocnk .htmleditor-output-wrapper .txt-si-70,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-70 {
  font-size: clamp(3.125rem, 2.668rem + 1.951vw, 4.375rem);
}
/* 60px - 80px */
#ocnk .htmleditor-output-wrapper .txt-si-80,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-80 {
  font-size: clamp(3.75rem, 3.293rem + 1.951vw, 5rem);
}
/* 70px - 90px */
#ocnk .htmleditor-output-wrapper .txt-si-90,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block A.txt-link-btn.txt-si-90 {
  font-size: clamp(4.375rem, 3.918rem + 1.951vw, 5.625rem);
}


/* # =================================================================
   # line-height
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .txt-line-100,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-100 h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-100 h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item).txt-line-100 p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item.txt-line-100 ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item.txt-line-100 ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item).txt-line-100 li {
  line-height: 1;
}

#ocnk .htmleditor-content-wrapper .txt-line-120,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-120 h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-120 h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item).txt-line-120 p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item.txt-line-120 ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item.txt-line-120 ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item).txt-line-120 li {
  line-height: 1.2;
}
#ocnk .htmleditor-content-wrapper .txt-line-140,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-140 h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-140 h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item).txt-line-140 p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item.txt-line-140 ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item.txt-line-140 ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item).txt-line-140 li {
  line-height: 1.4;
}
#ocnk .htmleditor-content-wrapper .txt-line-160,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-160 h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-160 h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item).txt-line-160 p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item.txt-line-160 ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item.txt-line-160 ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item).txt-line-160 li {
  line-height: 1.6;
}
#ocnk .htmleditor-content-wrapper .txt-line-180,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-180 h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-180 h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item).txt-line-180 p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item.txt-line-180 ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item.txt-line-180 ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item).txt-line-180 li {
  line-height: 1.8;
}
#ocnk .htmleditor-content-wrapper .txt-line-200,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-200 h2,
#ocnk .htmleditor-content-wrapper .htmleditor-title-item.txt-line-200 h3,
#ocnk .htmleditor-content-wrapper .htmleditor-item:not(.htmleditor-goods-item).txt-line-200 p,
#ocnk .htmleditor-content-wrapper .htmleditor-ul-item.txt-line-200 ul,
#ocnk .htmleditor-content-wrapper .htmleditor-ol-item.txt-line-200 ol,
#ocnk .htmleditor-content-wrapper :is(.htmleditor-ul-item, .htmleditor-ol-item).txt-line-200 li {
  line-height: 2.0;
}


/* # =================================================================
   # icon-size　※狭い幅用に文字サイズを小さくする
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .htmleditor-item.htmleditor-image-item:has(.fa) {
  container-name: icon-wifix;
  container-type: inline-size;
}

/* アイコンフォント */
/* 最大pc値より狭くなると、各アイコン枠の70cqwで表示 */
@container icon-wifix (min-width: 10px) {
#ocnk .htmleditor-output-wrapper .ico-si-xsmall {
  font-size: min(70cqw, 14px);
  line-height: 100%;
}
#ocnk .htmleditor-output-wrapper .ico-si-small {
  font-size: min(70cqw, 22px);
  line-height: 100%;
}
#ocnk .htmleditor-output-wrapper .ico-si-medium {
  font-size: min(70cqw, 40px);
  line-height: 100%;
}
#ocnk .htmleditor-output-wrapper .ico-si-large {
  font-size: min(70cqw, 60px);
  line-height: 100%;
}
#ocnk .htmleditor-output-wrapper .ico-si-xlarge {
  font-size: min(70cqw, 80px);
  line-height: 100%;
}
}

/* アイコンフォントボタン */
/* min375 - max1400 */
/* 12px - 14px */
#ocnk .htmleditor-output-wrapper .htmleditor-inner-btn-image-item .ico-si-xsmall {
  font-size: clamp(0.75rem, 0.704rem + 0.195vw, 0.875rem);
  line-height: 100%;
}
/* 20px - 22px */
#ocnk .htmleditor-output-wrapper .htmleditor-inner-btn-image-item .ico-si-small {
  font-size: clamp(1.25rem, 1.204rem + 0.195vw, 1.375rem);
  line-height: 100%;
}
/* 26px - 40px */
#ocnk .htmleditor-output-wrapper .htmleditor-inner-btn-image-item .ico-si-medium {
  font-size: clamp(1.625rem, 1.305rem + 1.366vw, 2.5rem);
  line-height: 100%;
}
/* 40px - 60px */
#ocnk .htmleditor-output-wrapper .htmleditor-inner-btn-image-item .ico-si-large {
  font-size: clamp(2.5rem, 2.043rem + 1.951vw, 3.75rem);
  line-height: 100%;
}
/* 60px - 80px */
#ocnk .htmleditor-output-wrapper .htmleditor-inner-btn-image-item .ico-si-xlarge {
  font-size: clamp(3.75rem, 3.293rem + 1.951vw, 5rem);
  line-height: 100%;
}

/* # =================================================================
   # font-family
   # ================================================================= */

#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-noto {
  font-family: 'Noto Sans JP', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-notoserif {
  font-family: 'Noto Serif JP', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-zenkaku {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-zenmaru {
  font-family: 'Zen Maru Gothic', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-zenkure {
  font-family: "Zen Kurenaido", sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-klee {
  font-family: "Klee One", serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-roboto {
  font-family: 'Roboto', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-montserrat {
  font-family: 'Montserrat', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-oswald {
  font-family: 'Oswald', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-barlow {
  font-family: 'Barlow Condensed', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-playfairdisplay {
  font-family: 'Playfair Display', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-merriweather {
  font-family: 'Merriweather', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-lora {
  font-family: 'Lora', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-abrilfatface {
  font-family: 'Abril Fatface', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-josefinsans {
  font-family: 'Josefin Sans', sans-serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-caveat {
  font-family: 'Caveat', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-dancingscript {
  font-family: 'Dancing Script', serif;
}
#ocnk :is(.htmleditor-content-wrapper, .htmleditor_text_property_font) .txt-fa-damion {
  font-family: 'Damion', serif;
}


/* # =================================================================
   # column
   # ================================================================= */

/* スマホ幅 ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
	--flexcol-width: 100%;
}
/* flex-wi-30：タイトル/テキスト無しでアイコンサイズ極小/小の場合
   最大値30%を適用 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(:is(.ico-si-xsmall, .ico-si-small)):not(:has(.htmleditor-title-item, .htmleditor-text-item)) .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(:is(.ico-si-xsmall, .ico-si-small)):not(:has(.htmleditor-title-item, .htmleditor-text-item)) .flex-3column-item {
	--flexcol-width: 30%;
}
/* flex-wi-30/flex-wi-50：アイコンサイズが極小/小の場合
   flex-wi-30：横並び2カラムでアイコンサイズが極小の場合
   最大値50%を適用 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(.ico-si-xsmall) .flex-2column-item:has(.htmleditor-inner-flex-block) {
	--flexcol-width: 50%;
}
/* flex-wi-70：アイコンサイズが極小/小の場合
   flex-wi-50：横並び3カラムでアイコンサイズが小の場合
   flex-wi-30：横並び3カラムでアイコンサイズが極小の場合
   最大値70%を適用 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-70:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-70:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(.ico-si-xsmall) .flex-3column-item:has(.htmleditor-inner-flex-block),
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50:has(.ico-si-small) .flex-3column-item:has(.htmleditor-inner-flex-block) {
	--flexcol-width: 70%;
}

#ocnk .htmleditor-output-wrapper .htmleditor-column-block:is(.flex-wi-30,.flex-wi-50,.flex-wi-70) .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:is(.flex-wi-30,.flex-wi-50,.flex-wi-70) .flex-3column-item {
	--flexcol-width: 90%;
}

/* 1column ============================ */
/* 1カラム ※flex-wi-30～flex-wi-70 */
/* flex-wi-30：sp70%～pc30%/flex-wi-50：sp70%～pc50%/flex-wi-70：sp90%～pc70% */
/* 画像、テキスト、見出しのみ用 */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70) > .htmleditor-item {
	width: 100%;
	display: flex;
	flex-direction: column;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70) > .htmleditor-item {
	max-width: 90%;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-end > .htmleditor-item {
	margin-left: auto;
	margin-right: 0;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-center > .htmleditor-item {
	margin-left: auto;
	margin-right: auto;
}

/* flex-wi-70 */
/* 左寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70):not(.flex-j-end,.flex-j-center),
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-start {
	padding-right: 10%;
}
/* 中央寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-center {
	padding-left: 5%;
	padding-right: 5%;
}
/* 右寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-end {
	padding-left: 10%;
}

/* 2column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-2column-item {
  width: calc(var(--flexcol-width) / 2);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-2column-item {
  width: calc((var(--flexcol-width) - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-2column-item {
  width: calc((var(--flexcol-width) - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-2column-item {
  width: calc((var(--flexcol-width) - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-2column-item {
  width: calc((var(--flexcol-width) - 20px) / 2);
}
  
/* 3column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-3column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-3column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-3column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-3column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-3column-item {
  width: calc((var(--flexcol-width) - 40px) / 3);
}

/* 4column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-4column-item {
  width: calc(var(--flexcol-width) / 2);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-4column-item {
  width: calc((var(--flexcol-width) - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-4column-item {
  width: calc((var(--flexcol-width) - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-4column-item {
  width: calc((var(--flexcol-width) - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-4column-item {
  width: calc((var(--flexcol-width) - 20px) / 2);
}

/* 5column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-5column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-5column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-5column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-5column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-5column-item {
  width: calc((var(--flexcol-width) - 40px) / 3);
}
  
/* 6column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-6column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-6column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-6column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-6column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-6column-item {
  width: calc((var(--flexcol-width) - 40px) / 3);
}

/* sp wrap ============================ */
/*
#ocnk .htmleditor-output-wrapper .blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
  width: 100%;
}
*/
@media only screen and (max-width: 767px) {
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:has(.htmleditor-inner-content-block.display-flex) .blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
  width: 100%;
}
}
@media only screen and (max-width: 490px) {
#ocnk .htmleditor-output-wrapper .blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item),
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:has(.htmleditor-inner-content-block.display-flex).blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
  width: 100%;
}
}


/* # =================================================================
   # inner-flex-block flex-ratio
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .htmleditor-inner-flex-block {
  height: auto;
}
#ocnk .htmleditor-output-wrapper .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  flex: 1;
}

/* 左固定(30px) ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-list .htmleditor-inner-flex-block {
  width: 30px;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-list.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(100% - 30px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-list.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 5px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-list.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 10px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-list.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 15px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-list.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 20px);
}

/* 1-9 ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9 .htmleditor-inner-flex-block {
  width: 10%;
  min-width: 30px;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 90%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 5px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 10px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 15px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 20px);
}

/* 2-8 ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-2-8 .htmleditor-inner-flex-block {
  width: 20%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-2-8.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 80%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-2-8.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 5px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-2-8.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 10px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-2-8.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 15px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-2-8.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 20px);
}

/* 3-7 ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-3-7 .htmleditor-inner-flex-block {
  width: 30%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-3-7.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 70%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-3-7.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 5px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-3-7.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 10px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-3-7.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 15px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-3-7.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 20px);
}

/* 4-6 ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-4-6 .htmleditor-inner-flex-block {
  width: 40%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-4-6.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 60%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-4-6.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 5px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-4-6.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 10px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-4-6.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 15px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-4-6.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 20px);
}

/* 5-5 ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-5-5 .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  max-width: 50%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-5-5.blo-ga-none .htmleditor-inner-flex-block {
  width: calc(100% / 2);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-5-5.blo-ga-small .htmleditor-inner-flex-block {
  width: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-5-5.blo-ga-medium .htmleditor-inner-flex-block {
  width: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-5-5.blo-ga-large .htmleditor-inner-flex-block {
  width: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-5-5.blo-ga-xlarge .htmleditor-inner-flex-block {
  width: calc((100% - 20px) / 2);
}

/* blo-sp-wrap ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block + .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-content-block.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-content-block.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) .htmleditor-inner-flex-block + .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 100%;
  max-width: 100%;
}

/* # =================================================================
# 
# 画面幅840px以下
# 
# ================================================================= */

/* # =================================================================
   # table
   # ================================================================= */

@media only screen and (max-width: 840px) {
/* table 縦積 */
#ocnk .htmleditor-output-wrapper .blo-sp-wrap table.htmleditor-table-item :is(tbody, tr , td) {
	display: block;
}
#ocnk .htmleditor-output-wrapper .blo-sp-wrap table.htmleditor-table-item td {
	width: 100%!important;
}
/* 重なるボーダーを削除 */
#ocnk .htmleditor-output-wrapper .blo-sp-wrap table.htmleditor-table-item {
	border-left: none;
	border-right: none;
	border-bottom: none;
}
#ocnk .htmleditor-output-wrapper .blo-sp-wrap table.htmleditor-table-item .htmleditor-tablecell-item {
	border-top: none!important;
}

/* table スクロール */
#ocnk .htmleditor-output-wrapper .blo-sp-scroll .htmleditor-table-scroll-block {
	overflow-x: auto;
}
#ocnk.column_layout.wide_layout .htmleditor-output-wrapper .blo-sp-scroll table.htmleditor-table-item,
#ocnk.single_layout .htmleditor-output-wrapper .blo-sp-scroll table.htmleditor-table-item {
	min-width: 980px;
}
#ocnk.single_layout.wide_layout .htmleditor-output-wrapper .blo-sp-scroll table.htmleditor-table-item {
	min-width: 1200px;
}
}

/* # =================================================================
# 
# 画面幅500px以下
# 
# ================================================================= */

@media only screen and (min-width: 500px) {

/* # =================================================================
   # inner-flex-block flex-ratio
   # ================================================================= */

/* 1-9 ============================ */
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9 .htmleditor-inner-flex-block {
  width: 20%;
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 5px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 10px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 15px);
}
#ocnk .htmleditor-output-wrapper .flex-ratio-1-9.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 20px);
}
}

/* # =================================================================
# 
# 画面幅500px以上
# 
# ================================================================= */

@media only screen and (min-width: 500px) {
	
/* # =================================================================
   # column
   # ================================================================= */

/* 1column ============================ */
/* 1カラム ※flex-wi-30～flex-wi-70 */
/* 画像、テキスト、見出しのみ用 */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70) > .htmleditor-item {
	max-width: 70%;
}
/* 左寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70):not(.flex-j-end,.flex-j-center),
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-start {
	padding-right: 30%;
}
/* 中央寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-center {
	padding-left: 15%;
	padding-right: 15%;
}
/* 右寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block):is(.flex-wi-30, .flex-wi-50, .flex-wi-70).flex-j-end {
	padding-left: 30%;
}
	
/* flex-wi-30：2カラムの場合
	 最大幅50%を適用 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30 .flex-2column-item {
	--flexcol-width: 70%;
}
/* flex-wi-30：3カラムの場合
	 flex-wi-50：2、3カラムの場合
	 flex-wi-70：2、3カラムの場合
	 最大幅70%を適用 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30 .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50 .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-70 .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30 .flex-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50 .flex-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-70 .flex-3column-item {
	--flexcol-width: 70%;
}
}

/* @min-width 500px end ============================ */


/* # =================================================================
# 
# 画面幅768px以上
# 
# ================================================================= */

@media only screen and (min-width: 768px) {
	
/* # =================================================================
   # tab
   # ================================================================= */
	
#ocnk .htmleditor-output-wrapper .htmleditor-inner-tab-block .htmleditor-item-link {
  width: calc((100% - 50px) / 6);
}
#ocnk .htmleditor-output-wrapper .htmleditor-inner-tab-block:has(> A.htmleditor-item-link:nth-child(-n+6):last-child) .htmleditor-item-link {
	flex-grow: 1;
}


/* # =================================================================
   # separator
   # ================================================================= */
	
#ocnk .htmleditor-output-wrapper .sep-wi-medium.sep-sp-none > :is(div, A):nth-child(n+2)::after,
#ocnk .htmleditor-output-wrapper .sep-wi-large.sep-sp-none > :is(div, A):nth-child(n+2)::after {
  display: block;
}
#ocnk .htmleditor-output-wrapper .blo-sp-wrap.sep-wi-medium > :is(div, A):nth-child(n+2)::after,
#ocnk .htmleditor-output-wrapper .sep-wi-medium > :is(div, A):nth-child(n+2)::after {
  width: 1px;
  height: 100%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-wrap.sep-wi-large > :is(div, A):nth-child(n+2)::after,
#ocnk .htmleditor-output-wrapper .sep-wi-large > :is(div, A):nth-child(n+2)::after {
  width: 3px;
  height: 100%;
}
/* right位置：100%から変数(--sep-position)を引く */
#ocnk .htmleditor-output-wrapper .blo-sp-wrap.blo-col-sep > :is(div, A):nth-child(n+2)::after,
#ocnk .htmleditor-output-wrapper .blo-col-sep > :is(div, A):nth-child(n+2)::after {
  top: 0;
  left: auto;
  right: calc(100% - var(--sep-position));
}
	

/* # =================================================================
   # column
   # ================================================================= */

/* flex-wi-30：最大幅30%　※狭い幅用指定の上書きが必要 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30 .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30 .flex-3column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-30:has(:is(.ico-si-xsmall, .ico-si-small)) .flex-3column-item {
	--flexcol-width: 30%;
}
/* flex-wi-50：最大幅50%　※狭い幅用指定の上書きが必要 */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50 .flex-2column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block.flex-wi-50 .flex-3column-item {
	--flexcol-width: 50%;
}
	
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:is(.flex-wi-30, .flex-wi-50, .flex-wi-70) .flex-4column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:is(.flex-wi-30, .flex-wi-50, .flex-wi-70) .flex-5column-item,
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:is(.flex-wi-30, .flex-wi-50, .flex-wi-70) .flex-6column-item {
	--flexcol-width: 70%;
}
	
/* 1column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block).flex-wi-70 > .htmleditor-item {
	max-width: 70%;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block).flex-wi-50 > .htmleditor-item {
	max-width: 50%;
}
#ocnk .htmleditor-output-wrapper .htmleditor-content-block:not(:has(.htmleditor-inner-content-block)):not(:has(.htmleditor-inner-flex-block)):not(.htmleditor-column-block).flex-wi-30 > .htmleditor-item {
	max-width: 30%;
}
	
/* flex-wi-70 */
/* 左寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-70:not(.flex-j-end,.flex-j-center),
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-70.flex-j-start {
	padding-right: 30%;
}
/* 中央寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-70.flex-j-center {
	padding-left: 15%;
	padding-right: 15%;
}
/* 右寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-70.flex-j-end {
	padding-left: 30%;
}

/* flex-wi-50 */
/* 左寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-50:not(.flex-j-end,.flex-j-center),
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-50.flex-j-start {
	padding-right: 50%;
}
/* 中央寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-50.flex-j-center {
	padding-left: 25%;
	padding-right: 25%;
}
/* 右寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-50.flex-j-end {
	padding-left: 50%;
}

/* flex-wi-30 */
/* 左寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-30:not(.flex-j-end,.flex-j-center),
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-30.flex-j-start {
	padding-right: 70%;
}
/* 中央寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-30.flex-j-center {
	padding-left: 35%;
	padding-right: 35%;
}
/* 右寄せ */
#ocnk .htmleditor-content-wrapper .htmleditor-content-block:not(.htmleditor-column-block):not(:has(.htmleditor-inner-content-block)):has(.htmleditor-inner-flex-block).flex-wi-30.flex-j-end {
	padding-left: 70%;
}

/* 2column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-2column-item {
  width: calc(var(--flexcol-width) / 2);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-2column-item {
  width: calc((var(--flexcol-width) - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-2column-item {
  width: calc((var(--flexcol-width) - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-2column-item {
  width: calc((var(--flexcol-width) - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-2column-item {
  width: calc((var(--flexcol-width) - 20px) / 2);
}
  
/* 3column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-3column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-3column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-3column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-3column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-3column-item {
  width: calc((var(--flexcol-width) - 40px) / 3);
}

/* 4column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-4column-item {
  width: calc(var(--flexcol-width) / 4);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-4column-item {
  width: calc((var(--flexcol-width) - 15px) / 4);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-4column-item {
  width: calc((var(--flexcol-width) - 30px) / 4);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-4column-item {
  width: calc((var(--flexcol-width) - 45px) / 4);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-4column-item {
  width: calc((var(--flexcol-width) - 60px) / 4);
}

/* 5column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-5column-item {
  width: calc(var(--flexcol-width) / 5);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-5column-item {
  width: calc((var(--flexcol-width) - 20px) / 5);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-5column-item {
  width: calc((var(--flexcol-width) - 40px) / 5);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-5column-item {
  width: calc((var(--flexcol-width) - 60px) / 5);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-5column-item {
  width: calc((var(--flexcol-width) - 80px) / 5);
}
  
/* 6column ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-column-block .flex-6column-item,
#ocnk .htmleditor-output-wrapper .flex-6column-item.flex-sp-fix {
  width: calc(var(--flexcol-width) / 6);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-ga-small .flex-6column-item {
  width: calc((var(--flexcol-width) - 25px) / 6);
}
#ocnk .htmleditor-output-wrapper .blo-ga-medium .flex-6column-item {
  width: calc((var(--flexcol-width) - 50px) / 6);
}
#ocnk .htmleditor-output-wrapper .blo-ga-large .flex-6column-item {
  width: calc((var(--flexcol-width) - 75px) / 6);
}
#ocnk .htmleditor-output-wrapper .blo-ga-xlarge .flex-6column-item {
  width: calc((var(--flexcol-width) - 100px) / 6);
}
	

/* # =================================================================
   # inner-flex-block flex-ratio
   # ================================================================= */
	
/* 左固定(30px) ============================ */
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-list.blo-sp-wrap .htmleditor-inner-flex-block {
  width: 30px;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-list.blo-sp-wrap.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(100% - 30px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-list.blo-sp-wrap.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 5px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-list.blo-sp-wrap.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 10px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-list.blo-sp-wrap.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 15px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-list.blo-sp-wrap.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 20px);
}

/* 1-9 ============================ */
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-1-9.blo-sp-wrap .htmleditor-inner-flex-block {
  width: 10%;
  min-width: 30px;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-1-9.blo-sp-wrap.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 90%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-1-9.blo-sp-wrap.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 5px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-1-9.blo-sp-wrap.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 10px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-1-9.blo-sp-wrap.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 15px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-1-9.blo-sp-wrap.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(90% - 20px);
}

/* 2-8 ============================ */
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-2-8.blo-sp-wrap .htmleditor-inner-flex-block {
  width: 20%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-2-8.blo-sp-wrap.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 80%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-2-8.blo-sp-wrap.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 5px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-2-8.blo-sp-wrap.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 10px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-2-8.blo-sp-wrap.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 15px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-2-8.blo-sp-wrap.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 20px);
}

/* 3-7 ============================ */
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-3-7.blo-sp-wrap .htmleditor-inner-flex-block {
  width: 30%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-3-7.blo-sp-wrap.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 70%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-3-7.blo-sp-wrap.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 5px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-3-7.blo-sp-wrap.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 10px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-3-7.blo-sp-wrap.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 15px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-3-7.blo-sp-wrap.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 20px);
}

/* 4-6 ============================ */
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-4-6.blo-sp-wrap .htmleditor-inner-flex-block {
  width: 40%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-4-6.blo-sp-wrap.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 60%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-4-6.blo-sp-wrap.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 5px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-4-6.blo-sp-wrap.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 10px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-4-6.blo-sp-wrap.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 15px);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-4-6.blo-sp-wrap.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 20px);
}

/* 5-5 ============================ */
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-5-5.blo-sp-wrap .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  max-width: 50%;
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-5-5.blo-sp-wrap.blo-ga-none .htmleditor-inner-flex-block {
  width: calc(100% / 2);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-5-5.blo-sp-wrap.blo-ga-small .htmleditor-inner-flex-block {
  width: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-5-5.blo-sp-wrap.blo-ga-medium .htmleditor-inner-flex-block {
  width: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-5-5.blo-sp-wrap.blo-ga-large .htmleditor-inner-flex-block {
  width: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .display-flex.flex-ratio-5-5.blo-sp-wrap.blo-ga-xlarge .htmleditor-inner-flex-block {
  width: calc((100% - 20px) / 2);
}


/* # =================================================================
   # txt-al-spcenter　※スマホでは中央寄せ指定を左/右に寄せる
   # ================================================================= */
	
#ocnk .htmleditor-output-wrapper .txt-al-spcenter {
	text-align: inherit;
}
#ocnk .htmleditor-output-wrapper .txt-al-left.txt-al-spcenter {
  text-align: left;
}
#ocnk .htmleditor-output-wrapper .txt-al-right.txt-al-spcenter {
  text-align: right;
}
	
/* # =================================================================
   # txt-al-pccenter　※パソコンでは中央寄せ指定を左/右に寄せる
   # ================================================================= */

#ocnk .htmleditor-output-wrapper .txt-al-pccenter,
#ocnk .htmleditor-output-wrapper .txt-al-left.txt-al-pccenter,
#ocnk .htmleditor-output-wrapper .txt-al-right.txt-al-pccenter {
  text-align: center;
}


/* # =================================================================
   # テンプレート別/カスタムパーツ調整
   # ================================================================= */

/* テンプレートtouch024 */
.touch024 .page_box .htmleditor-goods-item .section_title h2 {
	background-color: transparent;
}
/* テンプレートtouch026 */
.touch026 .page_box .htmleditor-goods-item .section_title h2 {
	margin-bottom: 15px;
}
/* テンプレートtouch027 */
.touch027 .page_box .htmleditor-goods-item .section_title h2 .title_text {
	padding: 0;
}
/* テンプレートtouch030 */
.touch030 .page_box .htmleditor-goods-item .section_title h2 {
	background-color: #FAEFDD;
}
.touch030 .page_box .htmleditor-goods-item .section_title h2 .title_text {
	font-size: 138.5%;
}
/* テンプレートtouch031 */
.touch031 .page_box .htmleditor-goods-item .section_title h2 {
	background-color: #EAEAEA;
}
.touch031 .page_box .htmleditor-goods-item .section_title h2 .title_text {
	font-size: 138.5%;
}
}

/* カスタムパーツocnk028 */
@media screen and (min-width: 1200px) {
	/* wide_layout、single_layoutともに1400pxに広げる */
	.ocnk028.responsive:is(.wide_layout, .single_layout) .fix_center,
	.ocnk028.responsive:is(.wide_layout, .single_layout):is(.touch006, .touch008, .touch010) #inner_container {
		max-width: 1400px;
	}
	/* サイドエリア横幅分調整 */
	.column_layout:not(.ocnk038) #main_wrapper:not(.hidden_specified_side_menu) .fix_center {
		max-width: calc(1200px - 250px);
	}
	.ocnk028.responsive.column_layout:not(.ocnk038) #main_wrapper:not(.hidden_specified_side_menu) .fix_center,
	.ocnk028.responsive.column_layout:not(.ocnk038):is(.touch006, .touch008, .touch010) #inner_container:not(:has(.hidden_specified_side_menu)) {
		max-width: calc(1400px - 250px);
	}
	/* フルスクリーンテンプレート横幅最大1400px固定 */
	/*
	#ocnk :is(.touch035,.touch038).ocnk028.responsive:is(.wide_layout, .single_layout) #inner_contents,
	#ocnk :is(.touch035,.touch038).ocnk028.responsive:is(.wide_layout, .single_layout) #inner_contents .fix_center,
	#ocnk:is(.touch035,.touch038).ocnk028.responsive:is(.wide_layout, .single_layout) #inner_contents,
	#ocnk:is(.touch035,.touch038).ocnk028.responsive:is(.wide_layout, .single_layout) #inner_contents .fix_center,
	#ocnk :is(.touch035,.touch038).ocnk028.responsive:is(.wide_layout, .single_layout) .free_page_body:has(.htmleditor-content-wrapper) #inner_contents,
	#ocnk :is(.touch035,.touch038).ocnk028.responsive:is(.wide_layout, .single_layout) .free_page_body:has(.htmleditor-content-wrapper) #inner_contents .fix_center {
		max-width: 1400px;
	}
	*/
}

/* # =================================================================
   #
   # blo-sp-pa
   #
   # ================================================================= */

@media only screen and (max-width: 490px) {

/* # =================================================================
   # image-inner-flex　※画像50%表示横並び
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-small .image-inner-flex,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-small.image-inner-flex {
  column-gap: 2px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-medium .image-inner-flex,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-medium.image-inner-flex {
  column-gap: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-large .image-inner-flex,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-large.image-inner-flex {
  column-gap: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-xlarge .image-inner-flex,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-xlarge.image-inner-flex {
  column-gap: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.image-inner-flex .image-inner-flex-item + .image-inner-flex-item:nth-child(2),
#ocnk .htmleditor-content-wrapper .blo-sp-pa .image-inner-flex .image-inner-flex-item + .image-inner-flex-item:nth-child(2) {
  margin-top: 0!important;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-small .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-small.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 2px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-medium .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-medium.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-large .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-large.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-xlarge .image-inner-flex .image-inner-flex-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-xlarge.image-inner-flex .image-inner-flex-item {
  width: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper:has(.blo-sp-pa) .image-inner-flex :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-image-item, .htmleditor-item-link) {
  width: 100%;
}
	
/* # =================================================================
   # blo-image-fit　※画像object-fit: cover
   # ================================================================= */

/* blo-pa-small ============================ */
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-small .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-2column-item {
  height: calc((100% - 2px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-small .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-3column-item {
  height: calc((100% - 4px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-small .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-4column-item {
  height: calc((100% - 6px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-small .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-image-item.image-5column-item {
  height: calc((100% - 8px) / 5);
}

/* blo-pa-medium ============================ */
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-medium .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-2column-item {
  height: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-medium .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-3column-item {
  height: calc((100% - 10px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-medium .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-4column-item {
  height: calc((100% - 15px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-medium .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-image-item.image-5column-item {
  height: calc((100% - 20px) / 5);
}

/* blo-pa-large ============================ */
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-large .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-2column-item {
  height: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-large .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-3column-item {
  height: calc((100% - 20px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-large .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-4column-item {
  height: calc((100% - 30px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-large .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-image-item.image-5column-item {
  height: calc((100% - 40px) / 5);
}

/* blo-pa-xlarge ============================ */
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-2column-item {
  height: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-3column-item {
  height: calc((100% - 30px) / 3);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-4column-item {
  height: calc((100% - 45px) / 4);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-xlarge .blo-image-fit .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-image-item.image-5column-item {
  height: calc((100% - 60px) / 5);
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-image-fit {
	height: 100%;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-image-fit .htmleditor-image-item img,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-image-fit .htmleditor-image-item img {
  object-fit: cover;
  height: 100%;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-sp-wrap .blo-image-fit .htmleditor-image-item,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-sp-wrap .blo-image-fit .htmleditor-image-item {
  height: auto;
 }
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-sp-wrap .blo-image-fit .htmleditor-image-item img,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-sp-wrap .blo-image-fit .htmleditor-image-item img {
  object-fit: unset;
  height: auto;
}

/* # =================================================================
   # blo-image-fit + image-inner-flex　※同時指定
   # ================================================================= */

/* blo-pa-small～blo-pa-xlarge 2column ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit:is(.blo-pa-none, .blo-pa-small, .blo-pa-medium, .blo-pa-large, .blo-pa-xlarge) .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-2column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit:is(.blo-pa-none, .blo-pa-small, .blo-pa-medium, .blo-pa-large, .blo-pa-xlarge) .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-2column-item {
  height: 100%;
}

/* blo-pa-small ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 2px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 4px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-small .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 6px) / 4);
}

/* blo-pa-medium ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-medium .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 15px) / 4);
}

/* blo-pa-large ============================ */

#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-large .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 30px) / 4);
}

/* blo-pa-xlarge ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-4column-item {
  height: calc((100% - 15px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(2) + .image-inner-flex-item:nth-of-type(3) + .image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrappe .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item:nth-of-type(1) + .image-inner-flex-item:nth-of-type(2)):has(.image-inner-flex-item:nth-of-type(4) + .image-inner-flex-item:nth-of-type(5)) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 30px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .htmleditor-inner-anchor-content-block.blo-image-fit.blo-pa-xlarge .htmleditor-inner-content-block:has(.image-inner-flex-item + .image-inner-flex-item) .htmleditor-image-item.image-5column-item {
  height: calc((100% - 45px) / 4);
}
	
/* inner-flex column ============================ */

/* 左固定(30px) ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-list .htmleditor-inner-flex-block {
  width: 30px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-list.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(100% - 30px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-list.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 2px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-list.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 5px);
}
#ocnk.htmleditor-output-wrapper .blo-sp-pa.flex-ratio-list.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 10px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-list.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc((100% - 30px) - 15px);
}

/* 1-9 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-1-9 .htmleditor-inner-flex-block {
  width: 20%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-1-9.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 80%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-1-9.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 2px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-1-9.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 5px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-1-9.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 10px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-1-9.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 15px);
}

/* 2-8 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-2-8 .htmleditor-inner-flex-block {
  width: 20%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-2-8.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 80%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-2-8.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 2px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-2-8.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 5px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-2-8.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 10px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-2-8.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(80% - 15px);
}

/* 3-7 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-3-7 .htmleditor-inner-flex-block {
  width: 30%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-3-7.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 70%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-3-7.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 2px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-3-7.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 5px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-3-7.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 10px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-3-7.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(70% - 15px);
}

/* 4-6 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-4-6 .htmleditor-inner-flex-block {
  width: 40%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-4-6.blo-ga-none .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 60%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-4-6.blo-ga-small .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 2px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-4-6.blo-ga-medium .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 5px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-4-6.blo-ga-large .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 10px);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-4-6.blo-ga-xlarge .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: calc(60% - 15px);
}

/* 5-5 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-5-5 .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  max-width: 50%;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-5-5.blo-ga-none .htmleditor-inner-flex-block {
  width: calc(100% / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-5-5.blo-ga-small .htmleditor-inner-flex-block {
  width: calc((100% - 2px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-5-5.blo-ga-medium .htmleditor-inner-flex-block {
  width: calc((100% - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-5-5.blo-ga-large .htmleditor-inner-flex-block {
  width: calc((100% - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.flex-ratio-5-5.blo-ga-xlarge .htmleditor-inner-flex-block {
  width: calc((100% - 15px) / 2);
}

/* blo-sp-wrap ============================ */
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-sp-pa.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-content-block.blo-sp-pa.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block + .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-content-block.blo-sp-pa.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-content-block.blo-sp-pa.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) .htmleditor-inner-flex-block + .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-sp-pa.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block,
#ocnk .htmleditor-output-wrapper .htmleditor-inner-anchor-content-block.blo-sp-pa.blo-sp-wrap:is(.flex-ratio-5-5,.flex-ratio-4-6,.flex-ratio-3-7,.flex-ratio-2-8,.flex-ratio-1-9,.flex-ratio-list) > .htmleditor-inner-flex-block + .htmleditor-inner-flex-block {
  width: 100%;
  max-width: 100%;
}
	
/* # =================================================================
   # padding
   # ================================================================= */
	
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-small,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-small {
  padding: 2px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-medium,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-medium {
  padding: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-large,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-large {
  padding: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-xlarge,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-xlarge {
  padding: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-t-none,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-t-none {
  padding-top: 0;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-r-none,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-r-none {
  padding-right: 0;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-b-none,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-b-none {
  padding-bottom: 0;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-l-none,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-l-none {
  padding-left: 0;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-tb-none,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-tb-none {
  padding-top: 0;
  padding-bottom: 0;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-pa-lr-none,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-pa-lr-none {
  padding-left: 0;
  padding-right: 0;
}

/* padding image ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  padding: 0;
}
/* タブ内 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  padding: 0;
}

/* # =================================================================
   # image + title/text ※画像下タイトル/テキスト上部余白
   # ================================================================= */
	
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-small .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-small:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 2px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-medium .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-medium:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-large .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-large:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-xlarge .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-xlarge:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 15px;
}

/* タブ内 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-small .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-small:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 2px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-medium .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-medium:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-large .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-large:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)) .htmleditor-inner-content-block.blo-pa-xlarge .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link),
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block:not(:has(.htmleditor-inner-flex-block, .htmleditor-image-block)).blo-pa-xlarge:has(> .htmleditor-item) .htmleditor-image-item + :is(.htmleditor-title-item, .htmleditor-text-item, .htmleditor-item-link) {
  margin-top: 15px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-item-link:has(> :is(.htmleditor-title-item, .htmleditor-text-item)) {
	display: block;
}

/* # =================================================================
   # image ※画像+画像の上部余白
   # ================================================================= */
	
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 2px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 15px;
}

/* タブ内 ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-small .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 2px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-medium .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 5px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-large .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 10px;
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-content-block .htmleditor-inner-anchor-content-block.blo-pa-xlarge .htmleditor-image-item + .htmleditor-image-item {
  margin-top: 15px;
}

/* # =================================================================
   # gap ※カラム時の余白
   # ================================================================= */

#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-ga-small,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-ga-small {
  gap: 2px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-ga-medium,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-ga-medium {
  gap: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-ga-large,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-ga-large {
  gap: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-ga-xlarge,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-ga-xlarge {
  gap: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-col-sep.blo-ga-small,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-col-sep.blo-ga-small {
  --sep-gap: 2px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-col-sep.blo-ga-medium,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-col-sep.blo-ga-medium {
  --sep-gap: 5px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-col-sep.blo-ga-large,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-col-sep.blo-ga-large {
  --sep-gap: 10px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-col-sep.blo-ga-xlarge,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-col-sep.blo-ga-xlarge {
  --sep-gap: 15px;
}
#ocnk .htmleditor-content-wrapper .blo-sp-pa.blo-col-sep.display-flex,
#ocnk .htmleditor-content-wrapper .blo-sp-pa .blo-col-sep.display-flex {
  gap: var(--sep-gap);
}

/* 2column ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-column-block .flex-2column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .flex-2column-item {
  width: calc(var(--flexcol-width) / 2);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-small .flex-2column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-small .flex-2column-item {
  width: calc((var(--flexcol-width) - 2px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-medium .flex-2column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-medium .flex-2column-item {
  width: calc((var(--flexcol-width) - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-large .flex-2column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-large .flex-2column-item {
  width: calc((var(--flexcol-width) - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-xlarge .flex-2column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-xlarge .flex-2column-item {
  width: calc((var(--flexcol-width) - 15px) / 2);
}
  
/* 3column ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-column-block .flex-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .flex-3column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-small .flex-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-small .flex-3column-item {
  width: calc((var(--flexcol-width) - 4px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-medium .flex-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-medium .flex-3column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-large .flex-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-large .flex-3column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-xlarge .flex-3column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-xlarge .flex-3column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}

/* 4column ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-column-block .flex-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .flex-4column-item {
  width: calc(var(--flexcol-width) / 2);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-small .flex-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-small .flex-4column-item {
  width: calc((var(--flexcol-width) - 2px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-medium .flex-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-medium .flex-4column-item {
  width: calc((var(--flexcol-width) - 5px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-large .flex-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-large .flex-4column-item {
  width: calc((var(--flexcol-width) - 10px) / 2);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-xlarge .flex-4column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-xlarge .flex-4column-item {
  width: calc((var(--flexcol-width) - 15px) / 2);
}

/* 5column ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-column-block .flex-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .flex-5column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-small .flex-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-small .flex-5column-item {
  width: calc((var(--flexcol-width) - 4px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-medium .flex-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-medium .flex-5column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-large .flex-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-large .flex-5column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-xlarge .flex-5column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-xlarge .flex-5column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}

/* 6column ============================ */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.htmleditor-column-block .flex-6column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .flex-6column-item {
  width: calc(var(--flexcol-width) / 3);
  box-sizing: border-box;
}
/* gap calc */
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-small .flex-6column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-small .flex-6column-item {
  width: calc((var(--flexcol-width) - 4px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-medium .flex-6column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-medium .flex-6column-item {
  width: calc((var(--flexcol-width) - 10px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-large .flex-6column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-large .flex-6column-item {
  width: calc((var(--flexcol-width) - 20px) / 3);
}
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-ga-xlarge .flex-6column-item,
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-ga-xlarge .flex-6column-item {
  width: calc((var(--flexcol-width) - 30px) / 3);
}
}
/* sp wrap ============================ *
/*
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item),
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
  width: 100%;
}
*/
@media only screen and (max-width: 767px) {
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:has(.htmleditor-inner-content-block.display-flex).blo-sp-pa .blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
  width: 100%;
}
}
@media only screen and (max-width: 490px) {
#ocnk .htmleditor-output-wrapper .blo-sp-pa.blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item),
#ocnk .htmleditor-output-wrapper .blo-sp-pa .blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item),
#ocnk .htmleditor-output-wrapper .htmleditor-column-block:has(.htmleditor-inner-content-block.display-flex).blo-sp-pa.blo-sp-wrap :is(.flex-2column-item,.flex-3column-item,.flex-4column-item,.flex-5column-item,.flex-6column-item) {
  width: 100%;
}
}



#ocnk .htmleditor-content-wrapper .htmleditor-content-block .txt-link-btn .htmleditor-inner-btn-image-item.htmleditor-image-item {
  container-name: none;
  container-type: normal;
}