@charset "utf-8";

/* basic style */
body {
  background-color: #000;
}
html body * {
  color: #fff;
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "ヒラギノ明朝 W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
html body .ck_font_sans_serif * {
  font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "HGゴシックE", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
}
a:hover {
  font-weight: bold;
  color: #fff;
}

i.ck_icon_after {
  padding-left: 1.2rem;
}
.ck_display_none {
  display: none;
}
/* -------------------- */


/* override semantic ui */
.ui.text.container {
  max-width: 830px!important;
}
.ui.header {
  color: #fff;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ヒラギノ明朝 W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.ui.header .ck_text_2x {
  font-size: 175%;
  line-height: 125%;
}
h1.ui.header {
  letter-spacing: 0.2rem;
}
h2.ui.header {
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
}
h3.ui.header {
  font-size: 1.3125rem;
  letter-spacing: 0.2rem;
  
}
h2.ui.header.ck_decoration::before {
  content: '';
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-right:0.5em;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
h2.ui.header.ck_decoration::after {
  content: '';
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-left:0.5em;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
h2.ui.header.ck_decoration.ck_i_butterfly::before {
  background-image: url(../images/butterfly_left.png);
}
h2.ui.header.ck_decoration.ck_i_butterfly::after {
  background-image: url(../images/butterfly_right.png);
}
h2.ui.header.ck_decoration.ck_i_bottle::before, h2.ui.header.ck_decoration.ck_i_bottle::after {
  background-image: url(../images/header_inline_bottle.png);
}
p {
  line-height: 2rem;
  letter-spacing: 0.2rem;
}
a.ui.button {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ヒラギノ明朝 W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.ui.form .field label {
  color: #fff;
}
.ui.form textarea, input, select {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ヒラギノ明朝 W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif!important;
}
.ui.form input.ck_w50, select.ck_w50 {
  width: 50%;
}
.ui.form input.ck_w25, select.ui.dropdown.ck_w25 {
  width: 25%;
}
.ui.placeholder.segment {
  background-color: #333;
}
.ui.placeholder.segment div {
  height: 240px;
}
.ui.placeholder.segment p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* -------------------- */


/* section: navigation menu */
div.ck_section_nav {
  padding-top: 0!important;
  padding-bottom: 0!important;
}
div.ck_ha-middle {
  horizontal-align: middle;
}
div.column.ck_header-item {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  height: 54px;
  background-color: #111621;
}
div.column.ck_header-item a {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* -------------------- */

/* hero */
.ck_section_hero {
  padding-top: 0!important;
  padding-bottom: 0!important;
  overflow: hidden;
}
/* section: process */
p.ck_process_panel_content {
  font-size: 0.8rem;
  line-height: 1.45rem;
  letter-spacing: 0.1rem;  
  padding: 0.7rem 0;
}
p.ck_process_panel_image_caption {
  text-align: center;
  width: 75%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 0.7rem 0;
  font-size: 0.7rem;
  line-height: 1.3rem;
  letter-spacing: 0rem;  
}
img.ck_process_panel_image {
  text-align: center;
  height: 185px;
  width: auto;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}
img.ck_process_panel_image.small {
  height: 145px;
  width: auto;
}
div.ck_process_panel_bottom {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 0);
}
div.ck_process_panel_bottom_link {
  position: absolute;
  right: 16px;
  bottom: 8px;
}

div.column.row.ck_process_header {
  padding: 6px 0;
}
div.column.row.ck_process_header .column {
  padding-left: 6px;
  padding-right: 6px;
}
div.column.row.ck_process_header .column .ui.segment {
  background-color: #461917;
  margin-bottom: 0px;
}
div.column.row.ck_process_header .column .ui.segment .row.grid {
  padding-left: 0px!important;
  padding-right: 0px!important;
  padding-top: 18px;
  padding-bottom: 6px;
}
div.column.row.ck_process_header .column .ui.segment .row.grid .column {
  padding-left: 0px!important;
  padding-right: 0px!important;
}

/* product timeline */
div.row.grid.ck_product_timeline .ck_product_timeline_left {
  min-width: 30%!important;
}
div.row.grid.ck_product_timeline .ck_product_timeline_right {
  min-width: 65%!important;
}
div.row.grid.ck_product_timeline .ck_product_timeline_contents_1 {
  position: absolute;
  top: 30px;
}
div.row.grid.ck_product_timeline .ck_product_timeline_contents_2 {
  position: absolute;
  top: 335px;
}
div.row.grid.ck_product_timeline .ck_product_timeline_contents_3 {
  position: absolute;
  top: 635px;
}
div.row.grid.ck_product_timeline .ck_product_timeline_contents_4 {
  position: absolute;
  top: 935px;
}
img.ck_product_timeline_image {
  height: 988.8px;
  width: 180.6px;
  position: relative;
  left: 10%;
  transform: translate(-10%, 0);
}
/* here */
div.row.grid.ck_product_timeline .ck_text_large {
  font-size: 95%;
}
div.row.grid.ck_product_timeline .ck_text_small {
  font-size: 85%;
}
div.row.grid.ck_product_timeline .ck_text_red {
  color: #ED1B2F;;
}
div.row.grid.ck_product_timeline .ck_text_bold {
  font-weight: bold;
}


img.ck_process_header_image {
  height: 185px;
  width: auto;
  position: relative;
  left: 36%;
  transform: translate(-36%, 0);
}
p.ck_process_header_content {
  /* position: relative; */
  /* left: 40%; */
  /* transform: translate(-50%, 0); */
  font-size: 0.9rem;
  line-height: 1.6rem;
  letter-spacing: 0.1rem;  
  padding: 0.7rem 0;
  /* padding-right: 5rem; */
}
div.column.ck_process_header_column_left {
  padding: 0.7rem 0;
}
div.column.ck_process_header_column_left p.ck_process_panel_image_caption {
  text-align: center;
  width: 75%;
  position: relative;
  left: 35%;
  transform: translate(-35%, 0);
  padding-top: 0.7rem;
  padding-bottom: 0;
  /* padding: 0.7rem 0; */
  font-size: 0.7rem;
  line-height: 1.3rem;
  letter-spacing: 0rem;  
}
div.column.ck_process_header_column_right {
  position: relative;
  left: 40%;
  transform: translate(-90%, 0);
  font-size: 0.9rem;
  line-height: 1.6rem;
  letter-spacing: 0.1rem;  
  padding: 0.7rem 0;
}
div.column.ck_process_header_column_right p.ck_process_panel_step {
  margin-bottom: 0;
}
div.column.ck_process_header_column_right h3.ui.header {
  margin-top: 0;
}

div.column.row.ck_process_panel {
  padding: 6px 0;
}
div.column.row.ck_process_panel .column {
  padding-left: 6px;
  padding-right: 6px;
}
div.column.row.ck_process_panel .column .ui.segment {
  background-color: #461917;
  min-height: 500px;
}
div.column.row.ck_process_panel .column .ck_process_panel_step {
  margin-bottom: 0;
}
div.column.row.ck_process_panel .column h3.ui.header {
  margin-top: 0;
}




/* section: opinions */
p.ck_opinions {
  /* font-size: 1.4rem; */
  font-size: 1.8rem;
  line-height: 2.1rem;
  letter-spacing: 0.2rem;
  margin-bottom: 0.4rem;
  text-align: left;
}
p.ck_opinions_caption {
  font-size: 0.9rem;
}

div.ck_opinions {
  max-width: 80vw;
  position: relative;
  left: 28%;
  /* transform: translate(-10%, 0); */
}
p.ck_opinions.red {
  color: #ED1B2F;
  font-weight: bold;
}
p.ck_opinions.mini {
  font-size: 50%;
}
p.ck_opinions.tiny {
  font-size: 75%;
}
p.ck_opinions.small {
  font-size: 85%;
}
p.ck_opinions.medium {
  font-size: 93%;
}
p.ck_opinions.large {
  font-size: 102%;
}
p.ck_opinions.big {
  font-size: 130%;
}
p.ck_opinions.huge {
  font-size: 185%;
  letter-spacing: 0.05rem;
}
p.ck_opinions.massive {
  font-size: 250%;
}

img.ck_product_banner {
  width: 60%;
}
img.ck_product_contents {
  width: 100%;
}


/* section: order form */
.ui.checkbox span.box:hover {
  cursor: pointer;
}
div.row.ck_order_description {
  max-width: 60%;
  transform: translate(35%, 0);
}
p.ck_order_description {
  font-size: 0.9rem;
}
/* -------------------- */


div.row.ck_section_header {
  padding-bottom: 4px!important;
}
img.ck_header_chuko_logo {
  padding-top:8px;
  padding-bottom:8px;
  height: 50px;
  width: auto;
}


/* section: navigation menu */
div.column.ck_header-item p {
  /* line-height: 1.5rem;
  letter-spacing: 0rem; */
}
img.ck_nav_menu_logo {
  padding-top:8px;
  padding-bottom:8px;
}
/* -------------------- */



/* section: footer */
p.ck_copyright {
  font-size: 9pt;
}

br.ck_sp {
  display: none;
}
/* -------------------- */

/* section: contact */
div.ck_contact p {
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}
/* -------------------- */

/* common */
p.ck_cmn.bold {
  font-weight: bold;
}
p.ck_cmn.big {
  font-size: 1.5rem;
}
p.ck_cmn.huge {
  font-size: 2rem;
  letter-spacing: 0.05rem;
}
/* -------------------- */

/* more narrow mobile */
@media only screen and (max-width: 320px) {
  p {
    font-size: 0.75rem!important;
    line-height: 1.3rem!important;
    letter-spacing: 0.1rem!important;
  }
  p.ck_opinions.mini {
    font-size: 50%!important;
  }
  p.ck_opinions.tiny {
    font-size: 75%!important;
  }
  p.ck_opinions.small {
    font-size: 85%!important;
  }
  p.ck_opinions.medium {
    font-size: 90%!important;
  }
  p.ck_opinions.large {
    font-size: 90%!important;
  }
  p.ck_opinions.big {
    font-size: 110%!important;
    line-height: 1.5rem!important;
  }
  p.ck_opinions.huge {
    font-size: 160%!important;
    line-height: 1.7rem!important;
  }
  p.ck_opinions.massive {
    font-size: 200%!important;
    line-height: 2.4rem!important;
  }
  
  div.row.grid.ck_product_timeline p {
    font-size: 0.7rem!important;
    line-height: 0.9rem!important;
  }
  h1.ui.header {
    font-size: 1.2rem!important;
    letter-spacing: 0.2rem;
  }
  h2.ui.header {
    font-size: 1rem!important;
  }
  h3.ui.header {
    font-size: 0.9rem!important;
  }
  a.ui.button {
    font-size: 1.2rem!important;
  }
  .ck_section_hero {
    padding-top: 14px!important;
  }
  .ck_hero_image {
    /* min-width: 200%; */
    /* min-width: 200%; */
    min-width: 250%;
    transform: translate(-31.25%, 0);
  }
  img.ck_nav_menu_logo {
    min-height: 61.92px!important;
    min-width: 117.36px!important;
  }
  div.column.ck_header-item {
    padding-left: 6px!important;
    padding-right: 6px!important;
    max-width: 50px!important;
  }
  /* common */
  p.ck_cmn.big {
    font-size: 1.2rem!important;
  }
  p.ck_cmn.huge {
    font-size: 1.5rem!important;
  }
  /* -------------------- */
}

/* mobile / tablet */
@media only screen and (max-width: 766px) {
  div.ck_process_header div.ui.container.grid {
    padding: 0 6px;
  }
  div.column.row.ck_process_header .column .ui.segment .row.grid {
    padding-top: 14px;
    padding-bottom: 6px;
  }
  div.column.ck_process_header_column_right {
    position: relative;
    left: 0%;
    transform: translate(0, 0);
  }
  div.column.ck_process_header_column_right p.ck_process_header_content {
    position: relative;
    left: 0%;
    transform: translate(0, 0);
  }
  div.column.ck_process_header_column_left p.ck_process_panel_image_caption {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  img.ck_process_panel_image {
    height: auto!important;
    width: 75vw!important;
  }
  div.ck_process_panel_bottom {
    position: relative!important;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  div.column.row.ck_process_panel .column .ui.segment {
    min-height: 400px;
  }
  div.ui.text.container.ck_section_container {
    margin-left: 0!important;
    margin-right: 0!important;
  }
  img.ck_process_header_image {
    height: auto!important;
    width: 75vw!important;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
  p.ck_process_header_content {
    position: relative;
    left: 50%;
  }
  /* section: navigation menu */
  img.ck_nav_menu_logo {
    padding-top:4px;
    padding-bottom:4px;
    min-height: 68.8px;
    min-width: 130.4px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
  }
  div.column.ck_header-logo {
    padding-left: 4px!important;
    padding-right: 4px!important;
  }
  div.column.ck_header-item {
    padding-left: 4px;
    padding-right: 4px;
    max-width: 60px;
  }
  div.column.ck_header-item a{
    line-height: 1.1rem;
    letter-spacing: 0rem;
    font-size: 0.7rem;
    padding-left: 0px!important;
    padding-right: 0px!important;
    width: 45px!important;
  }
  
  /* product timeline */
  div.row.grid.ck_product_timeline p {
    font-size: 0.7rem;
    line-height: 0.9rem;
  }
  div.row.grid.ck_product_timeline .ck_product_timeline_left {
    padding-left: 0!important;
    padding-right: 0!important;
    min-width: 30%!important;
  }
  div.row.grid.ck_product_timeline .ck_product_timeline_right {
    padding-left: 0!important;
    min-width: 70%!important;
  }
  div.row.grid.ck_product_timeline .ck_product_timeline_contents_1 {
    position: absolute;
    top: 30px;
  }
  div.row.grid.ck_product_timeline .ck_product_timeline_contents_2 {
    position: absolute;
    top: 225px;
  }
  div.row.grid.ck_product_timeline .ck_product_timeline_contents_3 {
    position: absolute;
    top: 420px;
  }
  div.row.grid.ck_product_timeline .ck_product_timeline_contents_4 {
    position: absolute;
    top: 635px;
  }
  img.ck_product_timeline_image {
    height: 692.16px!important;
    width: 126.42px!important;
  }
  .ck_hero_image {
    /* min-width: 175%; */
    /* transform: translate(-21.5%, 0); */
    min-width: 200%;
    transform: translate(-25%, 0);
  }
  div.ck_opinions {
    max-width: 90vw;
    position: relative;
    left: 3%!important;
    /* transform: translate(-10%, 0); */
  }
  
  div.row.ck_order_description {
    max-width: 100%;
    transform: translate(0, 0);
  }
  p.ck_cmn.big {
    font-size: 1.2rem!important;
  }
  p.ck_cmn.huge {
    font-size: 1.5rem!important;
  }
}
@media only screen and (max-width: 830px) {
  /* br */
  br {
    display: none;
  }
  br.ck_sp {
    display: inline;
  }
  
  /* paragraph */
  p {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.1rem;
  }
  
  /* header */
  h1.ui.header {
    letter-spacing: 0.2rem;
  }
  h2.ui.header {
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
  }
  h3.ui.header {
    font-size: 1.05rem;
    letter-spacing: 0.2rem;
  }
  
  /* form */
  .ui.form .field input, select {
    width: 100%!important;
  }
  
  /* img */
  img.ck_product_banner {
    width: 85%;
  }
  
  /* section: header */
  img.ck_header_chuko_logo {
    padding-top:4px;
    padding-bottom:4px;
    height: 28px;
    width: auto;
  }
  
  
  /* hero */
  div.column.ck_hero {
    padding: 0!important;
  }
  .ck_section_hero {
    padding-top: 8px!important;
  }
  
  /* section: opinions */
  div.ck_opinions {
    max-width: 90vw;
    position: relative;
    left: 28vw;
    /* transform: translate(-10%, 0); */
  }
  p.ck_opinions {
    font-size: 1rem;
    line-height: 1.8rem;
    letter-spacing: 0.15rem;  
  }
  p.ck_opinions_caption {
    font-size: 0.7rem;
  }
}