@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.css");
/* =======================================================================
CSSの名前：style.css 
--------------------------------------------------------------------------
1.reset
2.base
3.コンテナ・サイドバー・メインコンテンツ
4.ヘッダ
5.フッター
6.サイドバー
7.トップページ
8.商品一覧
9.商品詳細


======================================================================= */

/* =================================================================
0.break point
=================================================================*/
@media screen and (max-width: 767px) {

  /* スマホ */
  .view_PC {
    display: none !important;
  }
}

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

  /* デスクトップ*/
  .view_PC {
    display: block;
  }

  .view_SP {
    display: none !important;
  }
}

/* =================================================================
1.reset
=================================================================*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #FAF8F2;
  /*background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 10%, #f2f7fb 20%);
  background: -webkit-linear-gradient(top,  #ffffff 10%,#f2f7fb 20%);
  background: linear-gradient(to bottom,  #ff0000 10%,#f2f7fb 20%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f7fb',GradientType=0 );*/
  color: #333;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
  word-wrap: break-word;
  position: relative;
}

body:after {
  content: "";
  position: absolute;
  top: 66px;
  left: 0;
  width: 100%;
  height: 200px;
  background: #FAF8F2;
  /*background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 70%, #FBF8F3 100%);
  background: -webkit-linear-gradient(top, #ffffff 70%, #FBF8F3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #ffffff), color-stop(100%, #FBF8F3));
  background: -o-linear-gradient(top, #ffffff 70%, #FBF8F3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #ffffff), to(#FBF8F3));
  background: linear-gradient(to bottom, #ffffff 70%, #FBF8F3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FBF8F3', GradientType=0);*/
  z-index: -2;
}

body.page_top:after {
  height: 500px;
}

input::placeholder {
  color: #C7C7C7;
}

/* IE */
input:-ms-input-placeholder {
  color: #C7C7C7 !important;
}

/* Edge */
input::-ms-input-placeholder {
  color: #C7C7C7;
}


@media screen and (min-width: 768px) {
  body:after {
    min-width: 1040px;
    height: 300px;
    top: 107px;
  }

  body.page_top:after {
    height: 1000px;
  }
}

/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
hr {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
  max-width: 100%;
}

/* =================================================================
2.base
=================================================================*/
/* font size
-------------------------------------------------------------*/
html {
  font-size: 62.5%;
}
/* 1rem */
body {
  font-size: 14px;
  font-size: 1.4rem;
  -webkit-text-size-adjust: none;
}

@media screen and (min-width: 768px) {
  body {
    min-width: 1040px;
    font-size: 14px;
    font-size: 1.4rem;
  }
}

/*  web fonts
-------------------------------------------------------------*/
.font_en {
  font-family: 'Crimson Text', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif !important;
}

/*  clear
-------------------------------------------------------------*/
.clear {
  clear: both;
}

.clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0;
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

*:first-child + html .clearfix {
  zoom: 1;
}

/* IE7 */
.cleartext {
  text-indent: 300%;
  white-space: nowrap;
  overflow: hidden;
}

/*  padding/margin
-------------------------------------------------------------*/
.m0 {
  margin: 0 !important;
}

.mT0 {
  margin-top: 0 !important;
}

.mB0 {
  margin-bottom: 0 !important;
}

.mR0 {
  margin-right: 0 !important;
}

.mL0 {
  margin-left: 0 !important;
}

.mT10 {
  margin-top: 10px !important;
}

.mB10 {
  margin-bottom: 10px !important;
}

.mB15 {
  margin-bottom: 15px !important;
}

.mR10 {
  margin-right: 10px !important;
}

.mL10 {
  margin-left: 10px !important;
}

.mT20 {
  margin-top: 20px !important;
}

.mT25 {
  margin-top: 25px !important;
}

.mB20 {
  margin-bottom: 20px !important;
}

.mR20 {
  margin-right: 20px !important;
}

.mL20 {
  margin-left: 20px !important;
}

.mT30 {
  margin-top: 30px !important;
}

.mB30 {
  margin-bottom: 30px !important;
}

.mR30 {
  margin-right: 30px !important;
}

.mL30 {
  margin-left: 30px !important;
}

.mT45 {
  margin-top: 45px !important;
}

.mB45 {
  margin-bottom: 45px !important;
}

.mR45 {
  margin-right: 45px !important;
}

.mL45 {
  margin-left: 45px !important;
}

.mT40 {
  margin-top: 40px !important;
}

.mB40 {
  margin-bottom: 40px !important;
}

.mR40 {
  margin-right: 40px !important;
}

.mL40 {
  margin-left: 40px !important;
}

.mT50 {
  margin-top: 50px !important;
}

.mB50 {
  margin-bottom: 50px !important;
}

.mR50 {
  margin-right: 50px !important;
}

.mL50 {
  margin-left: 50px !important;
}

.mT60 {
  margin-top: 60px !important;
}

.mB60 {
  margin-bottom: 60px !important;
}

.mR60 {
  margin-right: 60px !important;
}

.mL60 {
  margin-left: 60px !important;
}

.mB80 {
  margin-bottom: 80px !important;
}

.mB100 {
  margin-bottom: 100px !important;
}

.mB150 {
  margin-bottom: 150px !important;
}

/*------------------------------*/
.p0 {
  padding: 0;
}

.pT0 {
  padding-top: 0 !important;
}

.pB0 {
  padding-bottom: 0 !important;
}

.pR0 {
  padding-right: 0;
}

.pL0 {
  padding-left: 0;
}

.pT10 {
  padding-top: 10px;
}

.pB10 {
  padding-bottom: 10px;
}

.pR10 {
  padding-right: 10px;
}

.pL10 {
  padding-left: 10px;
}

.pT20 {
  padding-top: 20px;
}

.pB20 {
  padding-bottom: 20px;
}

.pR20 {
  padding-right: 20px;
}

.pL20 {
  padding-left: 20px;
}

.pT30 {
  padding-top: 30px;
}

.pB30 {
  padding-bottom: 30px;
}

.pR30 {
  padding-right: 30px;
}

.pL30 {
  padding-left: 30px;
}

.pT40 {
  padding-top: 40px;
}

.pB40 {
  padding-bottom: 40px;
}

.pR40 {
  padding-right: 40px;
}

.pL40 {
  padding-left: 40px;
}

.pT50 {
  padding-top: 50px;
}

.pB50 {
  padding-bottom: 50px;
}

.pR50 {
  padding-right: 50px;
}

.pL50 {
  padding-left: 50px;
}

.pT60 {
  padding-top: 60px;
}

.pB60 {
  padding-bottom: 60px;
}

.pR60 {
  padding-right: 60px;
}

.pL60 {
  padding-left: 60px;
}

.v_bottom {
  vertical-align: bottom;
}

.bold {
  font-weight: bold;
}

/*  layout style
-------------------------------------------------------------*/
.content_box {
  margin-bottom: 40px !important;
}

#main {
  width: 100%;
}

.l_inner {
  margin: 0 5%;
}

@media screen and (min-width: 768px) {
  #main {
    width: 960px;
  }

  .l_inner {
    width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .content_box {
    margin-bottom: 60px !important;
  }
}

.columns {
  -ms-display: flex;
  -webkit-display: flex;
  display: -webkit-box;
  display: flex;
}

.columns_wrap {
  -ms-display: flex;
  -webkit-display: flex;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  /* flexコンテナに入るよう改行して表示 */
  -webkit-flex-wrap: wrap;
  /* flexコンテナに入るよう改行して表示 */
  flex-wrap: wrap;
}

.sp_no_columns {
  -webkit-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sp_no_columns_wrap {
  -webkit-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.columns_center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.columns_right {
  -webkit-justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.columns_between {
  -webkit-justify-content: space-between;
  /* Safari */
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.columns_top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.columns_middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.columns_end {
  -webkit-align-items: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.column_left {
  margin-right: auto !important;
}

.column_right {
  margin-left: auto !important;
}

.column01 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

.column02 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

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

  /* タブレット以下 */
  .sp_no_columns,
  .sp_no_columns_wrap {
    -webkit-display: block;
    display: block;
  }

  .sp_no_columns {
    display: block;
  }
  .sp_no_columns.h_toparea {
    display: flex;
    align-items: center;
  }
  .h-onlinestore-btn {
    margin-right: 60px;
  }
  .h-onlinestore-btn .h_button {
    padding: 17px;
  }

  .sp_no_columns_wrap {
    display: block;
  }

  .column01 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .column02 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

.columns_center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.columns_left {
  margin-right: auto;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.columns_right {
  margin-left: auto;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.column_between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/*  基本のlink color
-------------------------------------------------------------*/
a {
  color: #4084BB;
  text-decoration: underline;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none;
}

a img {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

a:hover img {
  opacity: 0.65;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*  基本のタグ
-------------------------------------------------------------*/
.attention {
  font-weight: bold;
  color: #A52026;
}
.red {color: #A52026;}
.txt_right {text-align: right;}
.txt_center {text-align: center;}
.txt_left {text-align: left;}
.txt_mb {margin-bottom: 15px;}
.text_bold {
  font-weight: bold;
  font-size: inherit;}
.mincho {
  font-family: "游明朝", YuMincho, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;}
.thin_head {
  font-size: 1.8rem;
  font-weight: normal;
  border-bottom: 1px solid #4084BB;
  color: #4084BB;
  margin-bottom: 15px;
  line-height: 1.4;
  padding-bottom: 10px;
  letter-spacing: 0;
}
.link_in_page{
    padding-top: 20px;
    margin-top: -20px;
}

@media screen and (min-width: 768px) {
  .txt_mb {
    margin-bottom: 30px;
  }

  .thin_head {
    font-size: 2.2rem;
    margin-bottom: 30px;
  }

  .link_in_page {
    padding-top: 130px;
    margin-top: -130px;
  }
}

/*  基本の矢印
-------------------------------------------------------------*/
.arrow,
.arrow_right {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.arrow::before,
.arrow::after,
.arrow_right::before,
.arrow_right::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
}

.arrow::before,
.arrow_right::before {
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 3px;
  height: 3px;
  border-top: 1px solid #010101;
  border-right: 1px solid #010101;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow_right::before {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.button.arrow_right::before {
  right: 8px;
}

.positive.arrow_right::before {
  border-color: #FFF;
}

.negative.arrow_right::before {
  border-color: #5E5E5E;
}

/*  基本のTable
-------------------------------------------------------------*/
.dl_table {
  margin-bottom: 20px;
  background: #FFF;
  padding: 5px;
}

.dl_table dt,
.dl_table dd {
  width: 100%;
  line-height: 1.8;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.dl_table dd {
  padding: 0 3% 10px;
}

.dl_table dd input,
.dl_table dd select {
  margin: 8px 0 3px !important;
}

.dl_table dt {
  padding: 4px 7px;
  background: rgba(64, 131, 186, 0.1);
  margin-bottom: 7px;
  font-weight: bold;
  line-height: 1.4;
}

.dl_table dd input[type="text"],
.dl_table dd input[type="email"],
.dl_table dd input[type="password"],
.dl_table dd input[type="tel"],
.dl_table dd input[type="number"],
.dl_table dd textarea {
  margin: 8px 0;
}

.dl_table label {
  cursor: pointer;
}


@media screen and (min-width: 960px) {
  .dl_table {
    background: transparent;
    margin-bottom: 35px;
    padding: 0;
  }

  .dl_table dl {
    display: table;
    width: 100%;
    border-bottom: 1px solid #D3DBE4;
  }

  .dl_table dl:first-child {
    border-top: 1px solid #D3DBE4;
  }

  .dl_table dt,
  .dl_table dd {
    padding: 19px;
  }

  .dl_table dt {
    width: 26%;
    vertical-align: middle;
  }

  .dl_table dt,
  .dl_table dd {
    display: table-cell;
  }

  .dl_table dd {
    background: #FFF;
  }
}



.table_normal {
  display: table;
}

.table_normal,
.table_normal th,
.table_normal td {
  border: 1px solid #D3DBE4;
}

.table_normal th,
.table_normal td {
  padding: 15px;
  font-weight: normal;
}

.table_normal .headline {
  white-space: nowrap;
  background: rgba(64, 131, 186, 0.07);
  border-right: 1px solid #D3DBE4;
  white-space: nowrap;
}

.table_normal th.headline:last-of-type {
  border-right: 1px solid #D3DBE4;
}

.table_normal .title {
  width: 120px;
  font-weight: bold;
}

/* カート、会員登録などのフォーム */
.table_form input[type="text"],
.table_form input[type="email"],
.table_form input[type="password"],
.table_form input[type="tel"],
.table_form input[type="number"],
.table_form textarea {
  margin: 8px 0;
}
.form_attention_red {
  color:#e8383d;
  border:1px solid #e8383d;
  padding:5px 10px;
  margin:-15px auto 20px;
  font-weight: bold;
}

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

  .table_form,
  .table_form tbody,
  .table_form thead,
  .table_form tr {
    display: block;
  }

  .table_form th,
  .table_form td {
    padding: 5px 0;
    display: block;
  }

  .table_form th {
    background: none;
    font-weight: bold;
    text-align: left;
  }

  .table_form td {
    margin-bottom: 0px;
  }

  .table_form td .HTMLFORM_ELEMENT {
    margin: 8px 10px 8px 0;
    display: inline-block;
  }

  .form_attention {
    font-size: 1.3rem;
    display: block;
    clear: both;
    line-height: 1.4;
  }
  .form_attention_red {
    margin:0 auto 20px;
  }
  
}

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

  /* デスクトップ */
  .table_form {
    width: 100%;
    background: #FFF;
  }

  .table_form tr:nth-child(1) th,
  .table_form tr:nth-child(1) td {
    border-top: 1px solid #D3DBE4;
  }

  .table_form + .table_form tr:nth-child(1) th,
  .table_form + .table_form tr:nth-child(1) td {
    border-top: 0;
  }

  .table_form th,
  .table_form td {
    padding: 16px 30px;
    border-bottom: 1px solid #D3DBE4;
  }

  .table_form th {
    background: rgba(64, 131, 186, 0.07);
    text-align: left;
    width: 26%;
    font-weight: normal;
    font-size: 1.3rem;
  }

  .table_form td select {
    font-size: 1.6rem;
  }

  .table_form td label {
    font-size: 1.4rem;
    margin-right: 10px;
  }

  .form_attention {
    font-size: 1.3rem;
    display: block;
    clear: both;
  }

  .table_form th .hissu {
    display: block;
    float: right;
  }
}

/* title - 見出し
-------------------------------------------------------------*/
.t_head {
  font-family: "Crimson Text", serif;
  font-size: 3.0rem;
  color: #4084BB;
  font-weight: normal;
  text-align: center;
  letter-spacing: 3px;
  line-height: 1.3;
  margin-bottom: 30px;
}

.t_head_jp {
  display: block;
  color: #333;
  text-align: center;
  font-size: 1.3rem;
  font-weight: normal;
  letter-spacing: 0;
  font-family: "游明朝", YuMincho, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
}

.t_head_jp img {
  display: block;
  height: 14px;
  margin: 0 auto;
}

.pagetitle {
  font-family: "游明朝", YuMincho, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
  font-size: 2.5rem;
  color: #4084BB;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1.3;
  margin-bottom: 30px;
  text-align: center;
}
.pagetitle.topics_detail_title {
  font-size: 2.2rem;
}
.pagetitle.topics_list {
  margin-bottom: 30px;
}
.pagetitle.care {
  margin-bottom: 20px;
}
#page_itemlist .pagetitle {
  text-align: left;
}

.sec_head {
  font-size: 2.0rem;
  color: #4084BB;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-bottom: 15px;
  background: url(../images/common/head_polkadot.png) no-repeat left top;
  background-size: 13px auto;
  padding-left: 20px;
}

.sec_sub_head {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #0e4a7b;
}

.sec_formal_head {
  font-size: 1.8rem;
  color: #4084BB;
  font-weight: normal;
  position: relative;
  padding-bottom: 7px;
  margin-bottom: 15px;
}

.sec_formal_head:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #D6D6D6;
}

.sec_formal_head:before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 20%;
  height: 2px;
  background: #98BFDC;
  z-index: 1;
}

.sec_item_head {
  font-size: 1.6rem;
  color: #4084BB;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-bottom: 15px;
  background: url(../images/common/head_polkadot.png) no-repeat left top;
  background-size: 13px auto;
  padding-left: 20px;
}

.form_head {
  font-size: 1.8rem;
  color: #4084BB;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1.3;
  margin-bottom: 15px;
}

.sec_detail_head {
  font-size: 1.6rem;
  color: #6699cc;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

@media screen and (min-width: 768px) {
  .t_head {
    font-size: 4.0rem;
    margin: 50px 0;
  }

  .t_head_jp {
    font-weight: bold;
  }

  .pagetitle {
    font-size: 4.0rem;
    line-height: 1;
    margin-bottom: 20px;
  }
  .pagetitle.care {
    margin-bottom: 30px;
  }
  .pagetitle.topics_detail_title {
    font-size: 3.0rem;
  }
  .pagetitle.topics_list {
    margin-bottom: 60px;
  }
  

  .sec_head {
    font-size: 2.4rem;
    background-size: 16px auto;
    padding-left: 26px;
    margin-bottom: 25px;
  }
}

/* 見出し2 センター */
.title_center {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1;
}

/* 見出し3 太字 */
.title_bold {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 24px;
}

/* 見出し3 ボーダー */
.title_border {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid #010101;
}

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

  /* デスクトップ */
  .title_en {
    font-size: 2.8rem;
    letter-spacing: 0.04em;
    margin-bottom: 80px;
  }

  .title_en .sub {
    font-size: 1.2rem;
    padding-left: 20px;
    display: inline-block;
  }

  .title_stripe {
    background: url(../images/common/parts/stripe_01.png) repeat-x center;
    background-size: 4px 6px;
    margin-bottom: 30px;
  }

  .title_stripe span {
    padding: 0 16px 0 0;
    font-size: 2.0rem;
  }

  .title_bold {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 30px;
  }

  .title_border {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 30px;
    padding-bottom: 4px;
    border-bottom: 1px solid #010101;
  }
}

/*  ボタンデザイン
-------------------------------------------------------------*/
/*基本デザイン-下記クラスに加えpositive　negative等のクラスを合わせて付与する*/
.button {
  overflow: hidden;
  border: none;
  display: inline-block;
  line-height: 1;
  text-align: center;
  padding: 16px 25px;
  text-decoration: none;
  font-size: 1.3rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 15px;
  min-width: 200px;
  border-radius: 22.5px;
}

.button:hover {
  opacity: .7;
}

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

  /*基本デザイン-下記クラスに加えpositive　negative等のクラスを合わせて付与する*/
  .button {
    border: none;
    display: block;
    line-height: 1;
    text-align: center;
    padding: 16px 30px;
    text-decoration: none;
    font-size: 1.4rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
    width: auto;
    min-width: 245px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
  }
}

/*マウスホバー時*/
.button:hover {
  /*opacity: 0.7;*/
}

.button {
  position: relative;
}

.button:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
  border-radius: 22.5px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.button:hover:after {
  left: 0;
}

/*次へ・入力内容を確認する・注文する・ログイン・登録する・送信・検索・ご注文手続きへ進む等*/
.positive {
  background: #3d649e;
  background: -moz-linear-gradient(-45deg, #3d649e 0%, #3887a5 100%);
  background: -webkit-linear-gradient(-45deg, #3d649e 0%, #3887a5 100%);
  background: -webkit-linear-gradient(315deg, #3d649e 0%, #3887a5 100%);
  background: -o-linear-gradient(315deg, #3d649e 0%, #3887a5 100%);
  background: linear-gradient(135deg, #3d649e 0%, #3887a5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d649e', endColorstr='#3887a5', GradientType=1);
  color: #FFF;
  border: none;
}

/*戻る・クリア・削除・ログアウト等*/
.negative {
  background: #AAA;
  color: #FFF;
  border: 1px solid #AAA;
}

/*上記以外のボタン*/
.normal {
  background: #FFF;
  color: #3887a5;
  border: 1px solid #3887a5;
}

/*押せないボタン*/
.not_click {
  background: #d2d2d2;
  color: #929292;
  cursor: inherit;
}
.not_click:hover {
  opacity: 1;
}

.not_click.medium {
  max-width: 230px;
  min-width: 200px;
}

/*テキストボタン*/
.text_link.arrow {
  padding-left: 15px;
  color: #5E5E5E;
}

.text_link.arrow::before {
  left: 0;
  right: auto;
}

/*小さいサイズの時にはクラスに下記を追加*/
.small {
  padding: 8px 16px;
  font-size: 1.2rem;
  display: inline-block;
}
@media screen and (min-width: 768px) {

  /*普通サイズの時にはクラスに下記を追加*/
  /*小さいサイズの時にはクラスに下記を追加*/
  .small {
    padding: 8px 16px;
    font-size: 1.2rem;
  }

  /* 複数のボタンを横並びにする場合 */
  .buttonarea.sp_no_columns .button {
    margin: 0 8px;
  }
}

@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
/* IE向けのCSS～START */
  .small {
    padding: 10px 10px;
  }
/* IE向けのCSS～END */
}

/*  画像の縦横比調整
-------------------------------------------------------------*/
.img_box {
  text-align: center;
  position: relative;
}

.img_box img {
  width: auto;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/*  カートフローチャート
-------------------------------------------------------------*/
.cart_step {
  position: relative;
  overflow: hidden;
  margin-top: -15px;
}

.cart_step:after {
  content: "";
  clear: both;
  display: block;
}

/* clearfix */
.cart_step ul {
  margin-bottom: 45px;
}

.cart_step ul li {
  text-align: center;
  width: 20%;
  font-size: 0.9rem;
  line-height: 1.2;
  color: #CDCDCD;
  font-weight: normal;
  padding-bottom: 20px;
  opacity: .7;
}

.cart_step ul li.active {
  color: #4084BB;
  position: relative;
}

.cart_step ul li.active::after {
  content: "";
  display: block;
  background: #4084BB;
  height: 2px;
  width: calc(100% - 20px);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.cart_step ul li strong {
  font-size: 3.0rem;
  display: block;
  font-weight: 100;
  font-family: 'Crimson Text';
}

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

  /* デスクトップ */
  .cart_step ul {
    margin-bottom: 45px;
  }

  .cart_step ul li {
    text-align: center;
    width: 140px;
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: normal;
    padding-bottom: 20px;
  }

  .cart_step ul li strong {
    font-size: 3.5rem;
    display: block;
    font-weight: 100;
  }
}

/*画像の場合*/
.step {
  display: block;
  margin: 25px auto 45px auto;
}

/*  Amazonペイメントのスタイル
-------------------------------------------------------------*/
#AmazonPayButton {
  min-height: 80px;
}

/*  ローディング表示のスタイル
-------------------------------------------------------------*/
#loading {
  position: fixed;
  top: 50%;
  left: 50%;
  padding-top: 100px;
  width: 100px;
  background-image: url("../images/loader_icon_pc.gif");
  background-position: center center;
  background-repeat: no-repeat;
}

/*  商品一覧、商品詳細ページアイコン類
-------------------------------------------------------------*/
.item_icon_area {
  margin-bottom: 8px;
}

.item_icon {
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1;
  padding: 3px 5px 5px;
  vertical-align: text-bottom;
  margin: 0 3px 3px 0;
}
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
/* IE向けのCSS～START */
  .item_icon {
    padding: 7px 5px 3px;
  }
/* IE向けのCSS～END */
}

/*アイコン共通設定*/
/*品薄*/
.item_short {
  background: #9252ad;
}

/*品切*/
.item_soldout {
  background: #888888;
}

/*NEW*/
.item_new {
  background: #d0891f;
}

/*COMING SOON*/
.item_before {
  background: #40bb93;
}

.item_type {
  background: #297AB6;
}

.item_prome {
  background: #d64444;
}

.item_padeu {
  background: #e05287;
}

/*ダウンロード商品*/
.item_download {
  background: #00cccc;
}

/*予約商品*/
.item_yoyaku {
  background: #000000;
}

/*会員割引あり*/
.item_discount {
  background: #cc0000;
}

/*タイムセール中*/
.item_timesale {
  background: #cc0000;
}

/*定期にまとめて注文可能*/
.item_teiki_together {
  background: #a52ead;
}

/*ボリュームディスカウントあり*/
.item_volume_discount {
  background: #ff6699;
}

/* まとめ買い対象*/
.item_bundle_sale {
  background: #0000ff;
}

/* =================================================================
3.コンテナ・メインコンテンツ
使用ファイル：すべてのファイル
=================================================================*/
/* container - サイドバー・メインコンテンツを格納するコンテナ
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {

  /* タブレット以下 */
  #container {
    width: 100%;
    height: 100%;
  }
}

#container:after {
  content: "";
  clear: both;
  display: block;
}

/* clearfix */
/* #breadcrumbs - パンくずリスト
-------------------------------------------------------------*/
#breadcrumbs {
  margin: 0 calc(5% - 10px) 28px;
  padding-top: 10px;
  font-size: 1.1rem;
  line-height: 1.5;
}

#breadcrumbs a {
  text-decoration: none;
  color: #333;
  padding: 0 10px;
  text-decoration: underline;
}

#breadcrumbs a:hover {
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  #breadcrumbs {
    width: 1000px;
    margin: 0 auto 30px;
    padding-top: 25px;
    font-size: 1.2rem;
    line-height: 1;
  }
}

/* main - コンテナ内メインコンテンツ
-------------------------------------------------------------*/
.buttonarea {
  margin-top: 20px;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-display: flex;
  -webkit-display: flex;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  /* flexコンテナに入るよう改行して表示 */
  -webkit-flex-wrap: wrap;
  /* flexコンテナに入るよう改行して表示 */
  flex-wrap: wrap;
}

.buttonarea .text_link {
  padding: 10px;
}

.buttonarea .attention {
  color: #e8383d;
  font-size: 1.2rem;
}

.buttonareaFR {
  margin: 0 0 0px;
  float: right;
}

.buttonareaFR:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}

.buttonarea .button:nth-child(1) {
  order: 2;
}

.buttonarea .button:nth-child(2) {
  order: 1;
}

/* clearfix */
.member_buttonarea .button {
  display: inline-block;
  margin: 0 10px;
}

.hissu {
  color: #e8383d;
  font-weight: normal;
  font-size: 1.1rem;
  vertical-align: baseline;
}

.amazon_comment {
  color: #e8383d;
  font-weight: bold;
}

.expiration_date {
  padding-left: 10px;
}

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

  /* デスクトップ*/
  .buttonarea {
    margin-top: 40px;
    text-align: center;
  }

  .buttonarea .button:nth-child(1) {
    order: 1;
  }

  .buttonarea .button:nth-child(2) {
    order: 2;
  }

  .buttonarea .button {
    display: inline-block;
    margin: 0 5px 10px;
  }

  .hissu {
    color: #e8383d;
    font-weight: normal;
    font-size: 1.2rem;
    vertical-align: baseline;
  }
}

/* リキャプチャー機能用
-------------------------------------------------------------*/
#main #reCAPTCHA {
  width: 304px;
  margin: 20px auto 0;
}

/* エラーメッセージ */
#error_text {
  padding: 10px 0 20px 40px;
  background: url(../images/common/parts/icon_error.svg) no-repeat left 5px top 10px;
  background-size: 30px;
}

#error_text li {
  font-weight: bold;
  color: #e8383d;
}

/* フォーム類部品
-------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
  border: solid 1px #ccc;
  padding: 5px 8px;
  height: 40px;
  font-size: 1.6rem;
  width: 70%;
  max-width: 600px;
  color: #333;
}

textarea {
  border: solid 1px #ccc;
  padding: 5px 8px;
  font-size: 1.6rem;
  width: 70%;
  max-width: 600px;
  color: #333;
}

input[type="radio"],
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}


/* IE */
/*select::-ms-expand {
    display: none;
}*/
input,
textarea,
select,
button {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 1.6rem;
}

select {
  height: 40px;
  padding: 5px 8px;
  vertical-align: middle;
  border: solid 1px #ccc;
  /* -webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	background: #FFF url(../images/common/parts/arrow_dd.svg) no-repeat right 4px center; */
}

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

  /* iPhoneでselectタグをフォーカスした際に拡大防止処理 */
  /* (商品一覧) */
  #list select {
    font-size: 1.6rem !important;
  }

  /* (お気に入り) */
  #wishList select {
    font-size: 1.6rem !important;
  }

  /* (商品詳細) */
  #itemDetail select,
  #review select {
    font-size: 1.6rem !important;
  }

  /* (購入履歴) */
  #history select {
    font-size: 1.6rem !important;
  }

  /* iPhoneの角丸をリセット */
  input[type="text"],
  input[type="tel"],
  input[type="password"],
  textarea,
  input[type="submit"],
  input[type="button"],
  input[type="number"] {
    -webkit-appearance: none;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"] {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
  }

  textarea {
    width: 100%;
    margin-bottom: 8px;
  }

  select {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    border-radius: 0;
    background: #FFF url(../images/common/parts/arrow_dd.svg) no-repeat right 4px center;
    padding: 0 20px 0 10px;
    background-size: 8px 5px;
    height: 40px;
  }

  input[type="radio"] {
    position: relative;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    content: "";
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -webkit-box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.15);
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.15);
    vertical-align: text-bottom;
    cursor: pointer;
  }

  input[type="radio"]:checked:after {
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    content: "";
    width: 8px;
    height: 8px;
    background: #777;
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
}

/* =================================================================
4.ヘッダ
=================================================================*/
/* preview - プレビュー時に表示するエリア
-------------------------------------------------------------*/
#preview {
  padding: 5px;
  border-bottom: 1px solid #CCC;
  background: #860013;
  color: #FFF;
  font-size: 1.2rem;
  text-align: center;
}

#preview table {
  width: 100%;
  margin: auto;
  text-align: center;
}

#preview table td,
#preview table th {
  display: inline-block;
}

#preview .content {
  text-align: center;
}

@media screen and (min-width: 768px) {
  #preview {
    min-width: 1040px;
  }

  #preview table td,
  #preview table th {
    display: table-cell;
  }
}

/* header - ヘッダ
-------------------------------------------------------------*/
#header {
  position: relative;
  background: #FFF;
  border-bottom: 1px solid #e5e5e5;
  z-index: 5;
  padding-top: 20px;
}

#header.is_fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

#header .inner {
  padding: 0 5%;
}

#header a {
  text-decoration: none;
  display: block;
}
.h_menu_link.login a{
  display: inline-block !important;
}
.h_toparea{
  height: 60px;
}
.h_logo {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 72px;
  height: auto;
}

.h_logo img {
  display: block;
}

.h_title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: block;
  background: #3D669E;
  color: #FFF;
  font-size: 1.1rem;
  text-align: center;
}

.h_button {
  min-width: 0;
  width: 100%;
  border-radius: 35px;
  margin-bottom: 0 !important;
  line-height: 1.3;
  padding: 17px 0;
  min-height: 50px;
}
.h_button.h_btn-text-long{
  padding: 10px 0;
}
.h_inquiry_button {
  padding: 0 !important;
  background: transparent;
  position: relative;
  /*border-left: 1px solid #3d649e !important;
  border-right: 1px solid #3887a5 !important;*/
  background: #3d649e;
  background: -moz-linear-gradient(-45deg, #3d649e 0%, #3887a5 100%);
  background: -webkit-linear-gradient(-45deg, #3d649e 0%, #3887a5 100%);
  background: -webkit-linear-gradient(315deg, #3d649e 0%, #3887a5 100%);
  background: -o-linear-gradient(315deg, #3d649e 0%, #3887a5 100%);
  background: linear-gradient(135deg, #3d649e 0%, #3887a5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d649e', endColorstr='#3887a5', GradientType=1);
  color: #4B799E;
  position: relative;
}

.h_inquiry_button .button_bg {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #f2f5f5;
  border-radius: 22.5px;
  padding: 0;
  line-height: 44px;
}

.h_inquiry_button .icon_tel {
  background: url(../images/common/ic_tel_vivid.svg) no-repeat center right;
  padding-right: 15px;
  background-size: 10px auto;
}

/* SP slidemenu
-------------------------------------------------------------*/
.slidemenu_btn {
  display: block;
  height: 25px;
  width: 30px;
  padding: 5px;
  position: absolute;
  top: 35px;
  right: 3%;
}

.slidemenu_btn span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 20px;
  height: 1px;
  background-color: #010101;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.slidemenu_btn span:nth-of-type(1) {
  top: 5px;
}

.slidemenu_btn span:nth-of-type(2) {
  top: 12px;
}

.slidemenu_btn span:nth-of-type(3) {
  top: 19px;
}

/* overlay */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
  background: rgba(0, 0, 0, 0.2);
  z-index: 200;
}

.sp-sidebar-open #overlay {
  display: block;
}

.sp-sidebar-open {
  /*overflow: hidden;*/
}

/* close */
.slidemenu_close_btn {
  position: fixed;
  top: 25px;
  right: 26px;
  display: none;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.sp-sidebar-open .slidemenu_close_btn {
  display: block;
  z-index: 300;
}

.slidemenu_con {
  width: 68%;
  height: 100%;
  background: #FFF;
  color: #010101;
  position: fixed;
  top: 0;
  right: -68%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding: 20px 3% 60px;
}

.slidemenu_con.open {
  right: 0;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  background: #FAF8F2;
}

/* SP Global navi */
.sp_gnavi{
  display: flex;
  flex-direction: column-reverse;
  /* min-height: 890px; */
  gap: 45px;
}
.sp_gnavi_account {
  margin-bottom: 20px;
}

.sp_gnavi_greeting {
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-align: center;
}

.sp_gnavi_login a,
.sp_gnavi_mypage a,
.sp_gnavi_logout a {
  display: block;
  height: 30px;
  line-height: 28px;
  width: 90%;
  min-width: 0;
  padding: 0;
  margin: 0 5% 8px;
}

.sp_gnavi_iconmenu {
  margin-bottom: 37px;
}

.sp_gnavi_iconmenu_item {
  width: 33.333%;
  text-align: center;
}

.sp_gnavi_iconmenu_item a {
  margin: 0;
  padding: 0;
  padding-top: 42px;
  line-height: 1.4;
}
.sp_gnavi_iconmenu_item:nth-child(1) a,
.sp_gnavi_iconmenu_item:nth-child(2) a{
  padding-top: 42px;
}

.bottom_close_btn {
  background: none;
  border: 1px solid #e5e5e5;
  padding: 14px 50px;
  display: block;
  margin: 0 auto 80px;
  line-height: 1;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: #5e5e5e;
}

.bottom_close_btn img {
  margin-right: 10px;
}

.h_menu_link {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 25px;
  font-size: 1rem;
  line-height: 1.1;
  margin: 0 4px;
  padding: 27px 0px 0 0px;
  display: block;
  color: #333;
  cursor: pointer;
  text-decoration: none;
}

.h_menu_link a {
  color: #333;
}

.h_menu_link.faq {
  background-image: url(../images/common/ic_quastion.svg);
  background-size: 25px 25px;
}

.h_menu_link.guide {
  background-image: url(../images/common/ic_guide.svg);
}

.h_menu_link.login {
  width: 45px;
  text-align: center;
  background-image: url(../images/common/ic_mypage.svg);
}

.h_menu_link.mypage {
  background-image: url(../images/common/ic_mypage.svg);
}

.h_menu_link.history {
  background-image: url(../images/common/ic_history.svg);
}

.h_menu_link.cart {
  background-image: url(../images/common/ic_cart_bk.svg);
  position: relative;
}
.h_menu_link.mail {
  background-image: url(../images/common/ic_mail.svg);
  background-size: 25px auto;
  background-position: center 3px;
}
.h_menu_link.cart:hover,
.h_menu_link:hover {
  opacity: .7;
  color: #4084BB;
}
.h_menu_area {
  position: absolute;
  top: 28px;
  right: 54px;
}
.h_menu_cart {
  margin-top: 2px;
  /*position: absolute;
  top: 26px;
  right: 60px;*/
}

.h_cart_badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #4084BB;
  color: #FFF;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 11px;
}
.h_menu_cart .h_menu_link {
  padding: 26px 0px 0 0px;
}

.h_cart_popup {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  position: absolute;
  top: 48px;
  right: -3px;
  width: 232px;
  background: #F4F8F9;
  border: 1px solid rgba(56, 132, 164, 0.2);
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  padding: 15px;
  font-size: 1.3rem;
  border-radius: 3px;
  z-index: 999;
}

.h_cart_popup span {
  font-weight: bold;
  font-size: 1.5rem;
}

.h_cart_popup:after {
  content: "";
  position: absolute;
  top: -16px;
  right: 17px;
  width: 0px;
  height: 0px;
  border: 6px solid transparent;
  border-bottom: 9px solid rgba(56, 132, 164, 0.2);
}

.h_cart_popup dl {
  margin-bottom: 5px;
}

.h_cart_button {
  color: #FFF !important;
  height: 36px;
  line-height: 36px;
  padding: 0;
  border-radius: 18px;
  margin: 11px 0 5px 0;
  min-width: 0;
}

.h_cart_freeshipping {
  font-size: 1.1rem;
  color: #3B6A9F;
  text-align: center;
}

.dd_menu.active {
  visibility: visible;
  opacity: 1;
}
.h_category_area{
  padding: 7px;
  background-color: rgba(64, 132, 187, 0.11);
  overflow-x:auto;
  overflow-y:hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.h_category_item{
  display: inline-block;
}
.h_category_item a{
  display: block;
  padding: 0 10px;
  margin: 0 5px 0 0;
  height: 36px;
  line-height: 34px;
  border: 1px solid #14578e;
  color: #14578e;
  background: #FFF;
  text-decoration: none;
}
.h_telarea {
  background: rgba(225, 237, 242, 0.53);
  padding: 10px;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 4px;
}
.h_mobile_tel span{
  font-size: 1.2rem;
}
.h_mobile_tel{
  font-size: 1.4rem;
}
.h_mobile_tel a{
  color: #333;
  text-decoration: none;
}
.h_tel_time {
  font-size: 1.1rem;
}

.h_free_tel {
  font-size: 3.2rem;
  color: #4084BB;
  font-family: 'Crimson Text', serif;
  line-height: 1;
}
.slidemenu-calbox-area table{
  width: 100%;
}

/* PC header
-------------------------------------------------------------*/
@media screen and (min-width: 768px) {

  /* デスクトップ*/
  #header {
    min-width: 1040px;
    position: relative;
    -webkit-box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.03);
    box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.03);
    border: none;
    padding-top: 0;
  }

  #header.is_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .h_logoarea{
    -ms-display:flex;
    -webkit-display:flex;
    display:flex;
    align-items: center;
    margin: 0px 0 0px 20px;
    width: 370px;
  }
  .h_logo {
    position: static;
    top: 0;
    left: 0;
    width: 140px;
  }
  .h_logo img {
    width: 100%;
  }
  .h_toparea{
    height: auto;
  }
  .h_title {
    background: transparent;
    font-size: 1.1rem;
    color: inherit;
    position: static;
    font-weight: normal;
    margin-top: 33px;
  }

  .header_rightarea {
    margin: 0 6% 0 0;
    white-space: nowrap;
  }

  .h_buttonarea {
    width: auto;
    background: #FFF;
    border: none;
    padding: 0 10px 0 15px;
  }

  .h_cart_badge {
    top: -10px;
    right: -2px;
  }

  .h_button {
    width: auto;
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
    padding: 0 20px;
    /* opacity: .6; */
  }
  .h_telarea {
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 10px 0;
  }

  .h_tel_time {
    font-size: 1.1rem;
  }

  .h_free_tel {
    font-size: 3.6rem;
    line-height: 1;
  }
  .h_button:hover {
    opacity: .4;
  }

  .h_menu_link {
    font-size: 1.5rem;
    line-height: 1.2;
    padding: 33px 0 0 0;
    letter-spacing: 0.03rem;
  }
  .h_menu_link.login {
    width: auto;
  }
  .h_menu_area{
    position: static;
    top: 28px;
  }
  .h_menu_cart {
    position: relative;
    top: auto;
    right: auto;
  }

  .h_menu_link.cart {
    margin: 0 4px;
    padding: 33px 5px 0 5px;
    text-indent: inherit;
    overflow: inherit;
    width: auto;
    height: auto;
    background-position: center top;
  }

  .h_cart_popup {
    top: 60px;
    right: 0;
  }

}

/* popup style
------------------------------------------------------------------*/
.js_popup_btn {
  cursor: pointer;
}

.popup_con {
  z-index: -1;
  /*transition:.2s;*/
  opacity: 0;
  visibility: hidden;
  /*position:relative;  iOSスクロールできないハック*/
}

.popup_con.p_nobg_open,
.popup_con.p_open {
  opacity: 1;
  z-index: 10001 !important;
  visibility: visible;
}

.popup_con iframe {
  display: none;
}

.popup_con.p_open iframe {
  display: block;
}

.popup_box {
  opacity: 0;
  z-index: 101;
  position: fixed;
  top: 5%;
  left: 8%;
  width: 84%;
  height: 90%;
  background-color: #FFF;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  border-radius: 8px;
}

.p_open .popup_box {
  opacity: 1;
}

.popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.popup_box_inner {
  padding: 4%;
}

.popup_close_btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 36px;
  height: 36px;
  background: #B3B3B3;
  border-radius: 18px;
  z-index: 1;
  cursor: pointer;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  transition: all ease .3s;
}

.popup_close_btn:hover {
  opacity: .7;
}

.popup_close_btn span {
  position: absolute;
  top: 17px;
  left: 7px;
  display: block;
  background: #FFF;
  height: 3px;
  width: 21px;
  border-radius: 1.5px;
}

.popup_close_btn span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.popup_close_btn span:nth-child(2) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* popup content style
------------------------------------------------------------------*/
.popup_box h2 {
  padding-bottom: 18px;
  padding-left: 10px;
  border-bottom: 1px solid #010101;
  font-size: 2.0rem;
}

.popup_box ul li {
  border-bottom: 1px solid #e5e5e5;
}

.popup_box ul li a {
  display: block;
  padding: 20px 10px;
  line-height: 1;
  text-decoration: none;
  font-size: 1.1rem;
}

@media screen and (min-width: 768px) {
  .popup_box {
    width: 600px;
    left: calc(50% - 300px);
    height: 600px;
    top: calc(50% - 300px);
  }
}

/* =================================================================
5.フッター
=================================================================*/
#footer {
  margin-top: 0;
}

.pagetop {
  position: fixed;
  bottom: 130px;
  right: 30px;
  height: 80px;
  text-decoration: none;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.5rem;
  color: #0D3054;
  opacity: .9;
  cursor: pointer;
  transition: opacity .3s ease;
  z-index: 10;
  transform: rotate(90deg);
  text-align: center;
  letter-spacing: 0.2em;
}
.icon_pagetop {
  content: "";
  display: block;
  width: 1px;
  height: 64px;
  background: #0D3054;
  transform: rotate(270deg);
  position: absolute;
  top: 0;
  left: 0;
}
.icon_pagetop::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 10px;
  border-top: solid 1px;
  transform: rotate(50deg);
  transform-origin: left top;
}
.pagetop:hover {
  opacity: .6;
}
.text_pagetop {
  position: absolute;
  top: 24px;
  left: 38px;
}
@media screen and (min-width: 768px) {
  .pagetop {
    bottom: 200px;
    right: 40px;
    height: 80px;
    font-size: 12px;
  }
  .text_pagetop {
    left: 50px;
  }  
}
.fixed_contact_btn {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 10;
}
.fixed_contact_btn a {
  display: block;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  width: 180px;
  height: 56px;
  box-sizing: border-box;
  padding: 10px 15px 0 50px;
  border-radius: 10px 0 0 0;
  text-decoration: none;
  background: #3887A5 url(../images/common/hukidashi.svg) no-repeat 18px center;
  background-size: 24px auto;
}
@media screen and (min-width: 768px) {
  .fixed_contact_btn {
    bottom: 0px;
  }
  .fixed_contact_btn a {
    font-size: 13px;
    width: 260px;
    height: 78px;
    padding: 15px 15px 0 80px;
    border-radius: 10px 0 0 0;
    background: #3887A5 url(../images/common/hukidashi.svg) no-repeat 30px center;
    background-size: 35px auto;
    letter-spacing: 0.1em;
  }
  .fixed_contact_btn a:hover {
    opacity: .6;
  }
}
.f_contact_area {
  position: relative;
  background-color: #FFF;
  text-align: center;
  padding: 40px 0 5px;
}

.f_contact_area .t_head {
  margin-bottom: 30px;
}

.f_contact_area:after {
  position: absolute;
  top: -12vw;
  left: 0;
  content: "";
  width: 100%;
  background: url(../images/common/f_bg_whip_sp.png) no-repeat center top;
  background-size: 100% auto;
  padding-top: 12.35%;
}

.f_contact_area .buttonarea {
  margin: 20px 0 10px;
}

.f_menulist_areawrap {
  background-color: #FFF;
}

.f_menulist_area {
  border-top: 1px solid #ccdfec;
  padding: 20px 0;
}

.f_menulist_area a {
  color: #4084BB;
  text-decoration: none;
  font-size: 1.2rem;
}

.f_menulist_item {
  margin-bottom: 8px;
}

.f_menulist_item a {
  background: url(../images/common/ic_polkadot.png) no-repeat left top 4px;
  background-size: 7px auto;
  padding-left: 13px;
}

.f_menulist_item a:hover {
  text-decoration: underline;
}

.f_sns_area {
  margin-top: 40px;
}

.f_sns_item {
  width: 35px;
  margin: 0 8px;
}

.f_sns_item a {
  display: block;
}

.f_copyright_area {
  padding: 18px 0 6px;
  background-color: #3D669E;
  color: #FFF;
  text-align: center;
  font-size: 1.1rem;
}

.f_copyright {
  opacity: .7;
}

.f_sns_item img {
  width: 20px;
}

@media screen and (min-width: 768px) {
  #footer {
    min-width: 1040px;
  }


  .f_menulist_area {
    background: url(../images/common/f_menu_line.png) no-repeat center top;
    padding: 34px 0;
    border: none;
  }

  .f_menulist_area a {
    padding: 0 10px;
    background: none;
  }

  .f_contact_area:after {
    background-image: url(../images/common/f_bg_whip.png);
    padding-top: 6.6428%;
    top: -6.5vw;
  }

  .f_contact_area .buttonarea {
    margin: 40px 0 20px;
  }

  .f_menulist_item {
    margin-bottom: 0;
  }

  .f_sns_area {
    margin: 0 0 0 30px;
  }

  .f_sns_item {
    width: 32px;
    margin: 0 6px;
  }

  .f_sns_item a {
    padding: 0;
  }

  .f_sns_item img {
    display: block;
  }

  .f_copyright_area {
    background: #3d649e;
    background: -moz-linear-gradient(-45deg, #3d649e 0%, #3887a5 100%);
    background: -webkit-linear-gradient(-45deg, #3d649e 0%, #3887a5 100%);
    background: -webkit-linear-gradient(315deg, #3d649e 0%, #3887a5 100%);
    background: -o-linear-gradient(315deg, #3d649e 0%, #3887a5 100%);
    background: linear-gradient(135deg, #3d649e 0%, #3887a5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d649e', endColorstr='#3887a5', GradientType=1);
  }
}

/* =================================================================
6.サイドバー
=================================================================*/
#side {
  width: 186px;
  margin-top: 7px;
}

.side_wrap {
  width: 186px;
}

.sidemenu_list {
  background: url(../images/common/side_line.png) no-repeat center bottom;
  margin-bottom: 20px;
}

.sidemenu_item {
  background: url(../images/common/side_line.png) no-repeat center top;
  background-size: 100% auto;
}

.sidemenu_info_itemwrap {
  padding: 20px;
}

.sidemenu_info_item {
  margin: 7px 0;
}

.sidemenu_info_item a {
  color: #333;
  text-decoration: none;
}

.sidemenu_link {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 18px 10px 15px 20px;
}
.sidemenu_link:hover{
  opacity: .7;
}
.sidemenu_link.shopping {
  background: url(../images/common/ic_cart_bl.svg) no-repeat left 15px center;
  background-size: 25px 26px;
  padding-left: 50px;
}
.sidemenu_link.blog {
  background: url(../images/common/ic_blog.svg) no-repeat left 15px center;
  background-size: 25px 25px;
  padding-left: 50px;
}

.sidemenu_subtxt {
  display: block;
  font-size: 1.0rem;
  color: #4084BB;
}

.sidemenu_bnr_item {
  margin-bottom: 20px;
}

.sidemenu_bnr_item:last-child {
  margin-bottom: 0;
}

.sidemenu_bnrarea {
  text-align: center;
}
.side-calbox-area table{
  width: 100%;
}
div.cal_wrapper table.cal tr td div{
  padding: 5px !important;
}
div.cal_wrapper table.cal tr td{
  border: none !important;
  padding: 0 !important;
}
div.cal_wrapper table.cal tr.headline{
  background-color: #d6e6ef !important;
}
div.cal_wrapper table.cal tr:nth-child(n+3){
  background: #FFF;
}
.side-calbox-txt,
.slidemenu-calbox-txt{
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.4;
}
div.cal_wrapper table.cal tr td div{
  border-radius: 0 !important;
}
div.cal_wrapper{
  padding: 0 0 10px !important;
}
div.cal_wrapper table.cal tr td div span{
  top: 0 !important;
  left: 30px !important;
  width: max-content !important;
}

/* WEB_0001-9718 リニューアル */
.side_standard {
  background: #fff;
  border-left: 1px solid #4084BB;
  margin-bottom: 15px;
}
.side_allitem {
  background: #fff;
  padding: 20px 20px;
  border-left: 1px solid #0D3054;
  margin-bottom: 15px;
}
.side_allitem a {
  text-decoration: none;
  font-size: 14px;
  /*font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', sans-serif;*/
  color: #333;
}
.side_allitem a:hover {
  opacity: 0.6;
}
.side_standard_top {
  background: #F2F9FF;
  padding: 10px 20px;
  color: #4084BB;
  font-size: 12px;
  line-height: 1.2;
}
.side_standard_ttl {
  padding: 15px 20px 0;
  font-size: 24px;
  color: #4084BB;
  line-height: 0.8;
}
.side_standard_ttl a {
  color: #4084BB;
  text-decoration: none;
  font-family: "Crimson Text", serif;
}
.side_standard_ttl a:hover{
  opacity: .6;
}
.side_standard_ttl_jp {
  display: block;
  font-size: 12px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
  margin-top: 10px;
  border-bottom: 1px solid #E0E0DE;
  padding-bottom: 15px;
}
.side_premium {
  background: #fff;
  border-left: 1px solid #d1a731;
  margin-bottom: 15px;
}
.side_premium_top {
  background: #fdf2f6;
  padding: 10px 20px;
  color: #cd9f1d;
  font-size: 12px;
  line-height: 1.2;
}
.side_premium_ttl {
  padding: 15px 20px 0;
  font-size: 24px;
  color: #cd9f1d;
  line-height: 0.8;
}
.side_premium_ttl a {
  text-decoration: none;
  color: #cd9f1d;
  font-family: "Crimson Text", serif;
}
.side_premium_ttl a:hover{
  opacity: .6;
}
.side_premium_ttl_jp {
  display: block;
  font-size: 12px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
  margin-top: 10px;
  border-bottom: 1px solid #E0E0DE;
  padding-bottom: 15px;
}
.side_standard_list {
  padding: 5px 20px 10px;
}
.side_standard_list a {
  display: block;
  font-size: 13px;
  color: #333333;
  padding: 10px 0;
  line-height: 1;
  text-decoration: none;
}
.side_standard_list a:hover {
  opacity: 0.6;
}
.side_care {
  background: #fff;
  border-left: 1px solid #0D3054;
  margin-bottom: 50px;
}
.side_care_ttl {
  padding: 15px 20px 0;
  font-size: 24px;
  color: #3E5B7D;
  line-height: 0.8;
}
.side_care_ttl a {
  color: #3E5B7D;
  text-decoration: none;
  font-family: "Crimson Text", serif;
}
.side_care_ttl a:hover{
  opacity: .6;
}
.side_care_ttl_jp {
  display: block;
  font-size: 12px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
  margin-top: 10px;
  padding-bottom: 15px;
}
@media screen and (min-width:768px) {
  .side_premium {
    /*margin-bottom: 50px;*/
  }
}

/* =================================================================
7.トップページ
=================================================================*/
.t_polkadot_ilst span {
  display: none;
  position: absolute;
  background-repeat: no-repeat;
  z-index: -1;
}

.t_polkadot_ilst span:nth-child(1) {
  top: 1450px;
  right: 53px;
  width: 95px;
  height: 163px;
  background-image: url(../images/common/bg_polkadot1.png);
}

.t_polkadot_ilst span:nth-child(2) {
  bottom: 1200px;
  left: 267px;
  width: 119px;
  height: 122px;
  background-image: url(../images/common/bg_polkadot2.png);
}

.t_mainslider {
  width: 100%;
  padding: 0;
  margin-bottom: 30px;
}

.t_philosophy_link {
  display: block;
  color: #333;
  text-decoration: none;
}

.t_philosophy_link:hover {
  opacity: .7;
}

.t_philosophy_link:hover img {
  opacity: 1;
}
.t_philosophy_catch {
  text-align: center;
  margin-bottom: 35px;
  font-size: 1.8rem;
  line-height: 2;
}

.t_philosophy_catch img {
  width: 227px;
}

.t_philosophy_sec {
  border-radius: 7.5px;
  background: #FFF;
  margin-bottom: 17px;
  overflow: hidden;
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.t_philosophy_sec a {
  text-decoration: none;
  color: #333;
}

.t_philosophy_head {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  margin: 25px 20px 9px;
  color: #4084BB;
  font-size: 1.7rem;
  font-weight: normal;
}

.t_philosophy_head span {
  background: url(../images/common/ic_polkadot.png) no-repeat left top -1px;
  background-size: 13px auto;
  padding-left: 20px;
}

.t_philosophy_img {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  display: block;
  width: 100%;
  height: 47vw;
  -o-object-fit: cover;
  object-fit: cover;
}

.t_philosophy_txt {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
  margin: 0 20px 25px;
}

.t_news_item {
  border-bottom: 1px solid #ccdfec;
  padding: 15px 0 13px;
	-ms-display:flex;
	-webkit-display:flex;
	display:flex;
  justify-content: space-between;
  align-items: center;
}

.t_news_item:first-child {
  border-top: 1px solid #ccdfec;
}

.t_news_item_img {
  width: 30%;
}
.t_news_item_text {
  width: 65%;
}  

.t_news_link {
  color: #333;
}

.t_news_tag {
  display: inline-block;
  line-height: 1;
  color: #333;
  padding: 4px 9px;
  font-size: 1.2rem;
  border: 1px solid #BCBCBC;
  border-radius: 20px;
  margin-right: 6px;
}

.t_news_date {
  font-size: 1.1rem;
  color: #949191;
  display: block;
}

@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
/* IE向けのCSS～START */
  .t_news_tag {
    padding-top: 2px;
  }
/* IE向けのCSS～END */
}
@media screen and (min-width: 768px) {
  .t_news_item_img {
    width: 13%;
  }
  .t_news_item_text {
    width: 85%;
  }
}

/*.t_news_tag.tag_care {
  background: #cf345c;
}

.t_news_tag.tag_iteminfo {
  background: #cf8134;
}

.t_news_tag.tag_news {
  background: #0f8e02;
}

.t_news_tag.tag_important {
  background: #F3280C;
}

.t_news_tag.tag_blog {
  background: #038D7C;
}

.t_news_tag.tag_movie {
  background: #8634CF;
}

.t_news_tag.tag_new_item {
  background: #3463CF;
}

.t_news_tag.tag_campaign {
  background: #FDCC09;
}
*/
.t_news_ttl {
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 1.4rem;
}

.t_product_item {
  width: calc(50% - 7px);
  margin-right: 14px;
}

.t_product_item:nth-child(2n) {
  margin-right: 0;
}

.t_product_item img {
  width: 100%;
  height: auto;
  border-radius: 7px;
}

.t_product_link {
  display: block;
  text-decoration: none;
  color: #333;
  text-align: center;
}

.t_product_name {
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .t_polkadot_ilst span {
    display: block;
  }

  .t_mainslider {
    margin: 20px auto;
    padding: 0 0px;
    text-align: center;
  }
  .t_mainslider .slick-initialized .slick-slide {
    width: 530px;
  }

  .t_mainslider_item {
    padding: 0 15px;
  }

  .t_philosophy_catcharea {
    margin-bottom: 70px;
  }

  .t_philosophy_catch {
    font-weight: bold;
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: 0;
  }

  .t_philosophy_image img {
    border-radius: 10px;
  }

  .t_philosophy_sec {
    width: calc(34% - 13.333px);
    margin-right: 20px;
    background: transparent;
    display: block;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .t_philosophy_sec:last-child {
    margin-right: 0;
  }

  .t_philosophy_head {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin: 0 0 10px;
    width: 100%;
    text-align: center;
  }

  .t_philosophy_head img {
    height: 28px;
    padding: 5px 0 5px 20px;
    background-position: left top 1px;
  }

  .t_philosophy_imgarea {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .t_philosophy_img {
    border-radius: 8px;
    height: auto;
  }

  .t_philosophy_txt {
    margin: 15px 0 0;
  }

  .t_product_item {
    width: 184px;
    margin-right: 15px;
  }

  .t_product_item:nth-child(2n) {
    margin-right: 15px;
  }

  .t_product_item:nth-child(4n) {
    margin-right: 0;
  }

  .t_product_name {
    margin: 10px 0 25px;
  }
}
.t_philosophy_text {
  font-size: 1.9rem;
  font-family: "游明朝", YuMincho, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", serif;
  font-weight: bold;
  margin-bottom: 0px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .t_philosophy_text {
    font-size: 2.4rem;
  }
}
/* WEB_0001-9718 トップ商品一覧 */
.t_product_finish {
  border: 1px solid #FE2727;
  background: #fff;
  padding: 20px;
  text-align: center;
  margin-bottom: 24px;
}
.t_product_finish p {
  font-size: 14px;
  margin-bottom: 5px;
}
.t_product_finish a {
  display: block;
}
.t_product_box {
  background: #fff;
  padding: 35px 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .05);
  margin-bottom: 20px;
}
.t_product_box.premium {
  margin-bottom: 30px;
}
.t_product_ttl_wrap {
  border-bottom: 1px solid #E0E0DE;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.t_product_ttl {
  font-size: 30px;
  font-family: "Crimson Text", serif;
  color: #4084BB;
  line-height: 1;
  font-weight: normal;
  letter-spacing: 0.074em;
  border-left: 1px solid #4084BB;
  padding-left: 20px;
}
.t_product_ttl.premium {
  color: #d1a731;
  border-left: 1px solid #d1a731;
}
.t_product_ttl span {
  display: block;
  font-size: 14px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', '游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
  margin-top: 10px;
}
.t_product_img {
  margin-bottom: 20px;
}
.t_product_point {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 15px;
}
.t_product_point:before {
  content: "";
  width: 25px;
  height: 15px;
  background: url(../images/top/point.svg) no-repeat left center;
  margin-right: 6px;
  display: inline-block;
}
.t_product_ul {
  margin-bottom: 30px;
}
.t_product_ul li {
  font-size: 14px;
  margin-bottom: 10px;
}
.t_product_ul li:before {
  content: "";
  width: 10px;
  height: 8px;
  background: url(../images/top/li_suisai.png) no-repeat left center;
  background-size: 100% auto;
  margin-right: 10px;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .t_product_finish {
    margin-bottom: 30px;
  }
  .t_product_box {
    padding: 40px;
    margin-bottom: 30px;
  }
  .t_product_box.premium {
    margin-bottom: 30px;
  }
  .t_product_ttl_wrap {
    margin-bottom: 40px;
  }
  .t_product_col {
    -ms-display:flex;
    -webkit-display:flex;
    display:flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .t_product_img {
    width: 314px;
    margin-bottom: 0px;
  }
  .t_product_img img {
    width: 100%;
  }
  .t_product_point {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
  }
  .t_product_point:before {
    content: "";
    width: 25px;
    height: 15px;
    background: url(../images/top/point.svg) no-repeat left center;
    margin-right: 6px;
    display: inline-block;
  }
  .t_product_ul {
    margin-bottom: 30px;
  }
  .t_product_ul li {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .t_product_ul li:before {
    content: "";
    width: 10px;
    height: 8px;
    background: url(../images/top/li_suisai.png) no-repeat left center;
    background-size: 100% auto;
    margin-right: 10px;
    display: inline-block;
  }
}
.t_prologue {
  padding: 35px 20px 0;
}
.t_prologue p {
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .t_prologue {
    padding: 30px 0px 0;
    margin-bottom: 45px !important;
  }
  .t_prologue p {
    font-size: 1.5rem;
    line-height: 2;
    text-align: center;
  }
}



/* =================================================================
ページ共通
=================================================================*/
.fadeup {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all cubic-bezier(0.4, 0.71, 0.67, 0.98) 1s;
  -o-transition: all cubic-bezier(0.4, 0.71, 0.67, 0.98) 1s;
  transition: all cubic-bezier(0.4, 0.71, 0.67, 0.98) 1s;
}

.fadeup.is_show {
  opacity: 1;
  visibility: visible;
}


/* =================================================================
自社工場
=================================================================*/
.factory_ttl {
  font-size: 1.7rem;
  color: #4084BB;
  margin-bottom: 15px;
}

.factory_staff_img img {
  border-radius: 5px;
}

.factory_txt {
  margin-bottom: 20px;
}

.factory_higashiyama_illust {
  width: 110px;
  margin: 0 auto;
}

.factory_movie {
  text-align: center;
  margin-bottom: 10px;
}

.factory_movie iframe {
  width: 100%;
  height: 51vw;
}

.factory_balloon_area,
.consultation_balloon_area {
  margin-bottom: 20px;
}

.factory_balloon_txt,
.consultation_balloon_txt {
  background-color: #72B2CE;
  color: #FFF;
  border-radius: 10px;
  padding: 15px;
}

.factory_balloon_txt span,
.consultation_balloon_txt span {
  font-weight: bold;
}

.factory_balloon,
.consultation_balloon {
  padding-bottom: 17px;
  background-image: url(../images/factory/balloon_mouth.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}

.factory_flow {
  margin-bottom: 20px;
}

.factory_flow_item {
  width: calc(50% - 5px);
  margin-right: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.factory_flow_item:nth-child(2n) {
  margin-right: 0;
}

.factory_flow_item:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.factory_flow_item img {
  border-radius: 5px;
}

.factory_offer_txt {
  border: 2px solid #72B2CE;
  padding: 15px;
  color: #72B2CE;
  border-radius: 8px;
  font-weight: bold;
  background: #FFF;
  line-height: 1.7;
}

@media screen and (min-width: 768px) {
  .factory_ttl {
    font-size: 2.0rem;
    text-align: center;
    position: relative;
    margin-bottom: 60px;
  }

  .factory_ttl:before,
  .factory_ttl:after {
    content: "";
    height: 1px;
    width: 140px;
    position: absolute;
    top: 50%;
    background: #4084BB;
  }

  .factory_ttl:before {
    left: 0;
  }

  .factory_ttl:after {
    right: 0;
  }

  .factory_txt {
    width: 420px;
    margin-right: 30px;
    margin-bottom: 0;
  }

  .factory_movie {
    text-align: center;
    margin-bottom: 40px;
  }

  .factory_movie iframe {
    width: 100%;
    height: 440px;
  }

  .factory_balloon,
  .consultation_balloon {
    background: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .factory_balloon_area,
  .consultation_balloon_area {
    margin-bottom: 60px;
  }

  .factory_balloon_txt,
  .consultation_balloon_txt {
    text-align: center;
    background: url(../images/factory/balloon.png) no-repeat center center;
  }
  .factory_balloon_txt{
    width: 330px;
    height: 187px;
    padding-top: 66px;
    background-size: 330px auto;
  }
  .consultation_balloon_txt {
    width: 300px;
    height: 172px;
    padding: 62px 10px 0 0;
    background-size: 300px auto;
  }

  .factory_higashiyama_illust {
    width: 133px;
    margin: 0;
    margin-left: 10px;
  }

  .factory_flow_item {
    width: calc(33.333% - 20px);
    margin-right: 30px;
  }
  .factory_flow_item p{
    font-size: 1.6rem;
  }
  .factory_flow_item img{
    margin-bottom: 12px;
  }
  .factory_flow_item:nth-child(2n) {
    margin-right: 30px;
  }

  .factory_flow_item:nth-child(3n) {
    margin-right: 0;
  }

  .factory_offer_txt {
    text-align: center;
    padding: 30px;
    font-size: 1.8rem;
  }
}

/* =================================================================
お肌の相談室
=================================================================*/
.consultation_ttl {
  font-size: 2.0rem;
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: bold;
}

.consultation_txt {
  margin-bottom: 20px;
}

.consultation_imgarea {
  width: 250px;
  text-align: center;
  margin: 0 20px 20px 0;
  font-size: 1.3rem;
}

.consultation_imgarea img {
  width: 100%;
  display: block;
  border-radius: 5px;
  margin: 0 0 7px;
  height: 175px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .consultation_ttl {
    font-size: 3.0rem;
    margin-bottom: 40px;
  }

  .consultation_txt {
    margin-bottom: 40px;
  }

  .consultation_imgarea {
    margin-bottom: 40px;
  }

  .consultation_imgarea img {
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
  }

  .consultation_buttonarea {
    padding-top: 0;
  }
  .consultation_imgname{
    font-size: 1.5rem;
    font-weight: bold;
  }
}

/* =================================================================
理念・会社概要
=================================================================*/
.page_company #main {
  margin: 0 auto;
}

.company_txt {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.title_border_bottom {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #3F84B8;
  line-height: 1.5;
  padding-bottom: 10px;
  position: relative;
  border-bottom: 2px solid #D6D6D6;
  text-align: left;
}

.title_border_bottom:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #98BFDC;
  bottom: -2px;
  width: 20%;
  left: 0;
}

.company_imgarea {
  width: 100%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  margin: 15px 0;
  text-align: center;
}

.company_imgarea img {
  width: 145px;
}

.company_president {
  font-size: 1.2rem;
}

.company-link-wrap {
  margin: 40px 0 80px;
}

.company-link-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}

@media screen and (min-width: 768px) {
  .company_txt {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 650px;
  }

  .title_border_bottom {
    font-size: 2.2rem;
  }

  .company_imgarea {
    margin: 0 0 0 auto;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: 30%;
  }

  .company_imgarea img {
    width: auto;
  }

  .company_president {
    font-size: 1.3rem;
  }

  .company-link-wrap {
    margin: 60px 0 120px;
  }

  .company-link-list {
    flex-direction: row;
    gap: 15px;
    padding-top: 20px;
  }
}

/* =================================================================
はじめての方へ
=================================================================*/
.beginners_sec {
  margin-bottom: 0;
}
.beginners_sec:nth-of-type(5) {
  margin-bottom: 80px;
}
.beginners_head {
  line-height: 1.5;
  font-size: 2rem;
  margin-bottom: 11px;
}

.beginners_txt {
  line-height: 2;
}

.beginners_imgarea {
  width: 60%;
  margin: 15px 20% 0;
}
.beginners_skincare_sec {
  border: 1px solid #72B2CE;
  border-radius: 5px;
  background: #FFF;
  padding: 15px;
}

.beginners_skincare_head {
  color: #72B2CE;
  font-size: 1.8rem;
}

.beginners_skincare_catch {
  font-size: 1.3rem;
}

.beginners_skincare_imgarea {
  width: 100%;
  text-align: center;
  margin: 10px 0;
}

.beginners_skincare_imgarea img {
  width: 135px;
}

.beginners_sec {
  margin-bottom: 20px;
}

.beginners_contact_sec {
  border: 1px solid #72B2CE;
  border-radius: 5px;
  background: #FFF;
  padding: 15px;
}
.beginners_skincare_link{
  display: block;
  text-decoration: none;
  color:#333;
}
.beginners_skincare_link:hover{
  opacity: .7;
}
.beginners_skincare_link:hover img{
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .beginners_sec {
    position: relative;
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 70px;
  }

  .beginners_txtarea {
    min-height: 300px;
  }

  .beginners_num {
    width: auto;
  }

  .beginners_num img {
    width: auto;
  }

  .beginners_head {
    font-size: 2.7rem;
    margin-bottom: 20px;
  }

  .beginners_imgarea {
    width: auto;
    position: absolute;
    top: -27px;
    right: 0;
    margin: 0;
  }
  .beginners_sec:nth-of-type(2n) .beginners_imgarea {
    left: 0;}
  .beginners_skincare_sec {
    padding: 30px 40px;
    border-radius: 8px;
  }

  .beginners_skincare_imgarea {
    width: 213px;
    margin: 0;
  }

  .beginners_skincare_imgarea img {
    width: auto;
  }

  .beginners_skincare_head {
    font-size: 2.4rem;
  }

  .beginners_contact_sec {
    padding: 30px 40px;
    border-radius: 8px;
  }

  .beginners_contact_sec .button {
    margin-bottom: 0;
  }
}

/* topリニューアル */
.page_top #main{
  width: 100%;
  /* overflow: hidden; */
}
.t_floating-btn{
  position: fixed;
  top: 70%;
  z-index: 5;
  width: 59px;
}
.t_mv-container{
  position: relative;
  height: calc(100vh - 50px);
}
.t_mv-container::after{
  content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #D8D3C8;
	mix-blend-mode: multiply;
}
.t_mv-area{
  height: 100%;
}
.t_mv-area p{
  font-family: "Shippori Mincho", serif;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-size: 1.9rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
  z-index: 1;
}
.mv-video{
  object-fit: cover;
	width: 100%;
	height: 100%;
}
.t_mv-container.is-fallback {
  height: auto;
}
.mv-image{
  width: 100%;
  height: auto;
}
.t_wave01{
  background-size: cover;
	overflow: visible;
	width: 100%;
	aspect-ratio: 1366/232;
	position: absolute;
	left: 0;
	bottom: -0.63vw;
	z-index: 1;
	background-image: url(../images/top/top_wave1_image.png);
	background-position: center bottom;
}

@keyframes bg-position-abuku {
	0% {
		background-position: 0% 0;
	}
	100% {
		background-position: -113.9rem 0;
	}
}

.top-content{
  position: relative;
}
.spacer01 {
	margin-top: -1px;
	background-image: linear-gradient(#FAF8F2 30%, #E3EFF5 70%, #C7DFEB 100%);
}
.spacer02 {
	margin-top: -1px;
	background-image: linear-gradient(#E3EFF5 45%, #FAF8F2 100%);
}
.spacer03 {
	background: #FAF8F2;
}
.spacer03 .texture{
  position: relative;
}
.texture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/top/top_texture_image.png);
	mix-blend-mode: color-burn;
	opacity: 1;
}
.t_wave02 {
	position: relative;
	top: -1px;
}
.animated-text .char {
  opacity: 0;
  display: inline-block;
  transition: opacity 0.5s ease;
}

.t_read-text-area{
  color: #14578E;
  overflow: hidden;
}
.t_read-text-wrap{
  padding: 62px 0 0 36px;
  position: relative;
  z-index: 3;
}
.t_read-text-wrap p:not(:first-child){
  margin-top: 30px;
}
.t_read-text-wrap p{
  font-family: "Shippori Mincho", serif;
  font-size: 1.5rem;
  color: #14578E;
  letter-spacing: 0.01em;
  line-height: 2.3;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}
.t_fade-in{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease-out, transform 2s ease-out;
  position: relative;
  z-index: 2;
}
.t_fade-in.is-fade-in {
  opacity: 1;
  transform: translateY(0);
}
.t_read-text-area .buttonarea{
  margin-top: 55px;
  position: relative;
  z-index: 3;
}
.t_prome-rule{
  margin-top: 122px;
  padding: 0 22px 20% 20px;
  position: relative;
}
.t_rule-list{
  margin-top: 49px;
}
.t_prome-rule-headline{
  font-family: "Zen Old Mincho", sans-serif;
  writing-mode: vertical-lr;
  text-orientation: upright;
  margin: 0 auto;
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  color: #4084BB;
}
.t_rule-item:not(:first-child){
  margin-top: 70px;
}
.t_rule-item-headline{
  font-family: "Shippori Mincho", serif;
  font-size: 2.1rem;
  font-weight: 600;
  display: flex;
  gap: 15px;
  align-items: center;
}
.t_rule-number{
  font-family: "Crimson Text", sans-serif;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(64, 132, 187, 0.3);
  color: #FFFFFF;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  vertical-align: middle;
  padding-top: 10px;
  position: relative;
}
.t_rule-item-headline-text{
  font-size: 2.1rem;
  line-height: 1.3;
  letter-spacing: 0.16em;
}
.t_rule-item-headline-subtext{
  display: block;
  font-size: 1.1rem;
  line-height: 2;
}
.t_rule-detail{
  margin-top: 19px;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.045em;
}
.top-content.t_base-set{
  overflow: hidden;
}
.t_base-set-wrap{
  padding-top: 50%;
  color: #14578E;
  position: relative;
}
.t_base-set-headline{
  font-family: "Zen Old Mincho", sans-serif;
  padding: 0 38px 0 22px;
  font-size: 2.1rem;
  color: #4084BB;
  line-height: 1.7;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.t_base-set-headline .t_base-set-indent{
  display: inline-block;
  margin-left: 34%;
}
.t_base-text-wrap{
  margin-top: 37px;
  padding: 77px 35px 45%;
  background-image: url(../images/top/top_10_image.png);
  background-size: 160%;
  background-position: top;
  background-repeat: no-repeat;
  font-size: 1.4rem;
  letter-spacing: 0.016em;
  font-weight: 300;
  position: relative;
}
.t_base-set-title{
  font-family: "Zen Old Mincho", sans-serif;
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 23px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.t_base-item-list{
  margin: 23px 0 30px 0;
}
.t_base-set-image-wrap{
  position: relative;
  margin-top: -125px;
}
.t_base-set-image{
  width: 48%;
}
.t_base-product01{
  margin-left: 33%;
}
.t_base-product02{
  margin-top: -28%;
  width: 52%;
}
.t_base-product03{
  margin: -74% 0 0 55%;
  width: 38%;
}
.t_base-set-textimage{
  width: 100%;
  position: absolute;
  top: 0;
  left: -3;
}
.t_base-link-wrap .buttonarea, .t_base-link-wrap .buttonarea a{
  margin: 0;
}
.t_base-link-wrap{
  margin-top: 32%;
  padding-bottom: 200px;
}
.link-product-page{
  margin-top: 22px !important;
}
.link-product-page a{
  background: linear-gradient(45deg, #3d649e 65%, #3887a5 100%);
}
.bg_t_atelier-prome-content{
  background-image: url(../images/atelier-prome/atelier-prome_18_image.jpg);
  background-size: cover;
  height: 100vh;
  /* background-attachment: fixed; */
  background-position: 76% top;
  background-repeat: no-repeat;
  position: sticky;
  top: 0;
}
.t_atelier-prome{
  /* background-image: url(../images/atelier-prome/atelier-prome_18_image.jpg); */
  background-size: cover;
  background-attachment: scroll;
  background-position: -45%;
  padding: 0 20px 150px;
  margin: -365px 0 0;
}
.t_atelier-prome-inner{
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 50px 32px 76px;
  border-radius: 10px;
}
.t_atelier-prome-text{
  color: #8C4B8C;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  line-height: 2.3;
  margin-top: 25px;
}
.t_atelier-prome-text p:not(:first-child){
  margin-top: 32px;
}
.btn_atelier-detail{
  margin-top: 35px;
  letter-spacing: 0.2em;
}
.btn_atelier-detail .positive{
  background: linear-gradient(60deg, #8c4b8c 55%, #b38296);
}
.btn_atelier-detail .t_prome-link img{
  width: 13px;
  height: 13px;
  vertical-align: bottom;
  margin-left: 13px;
}
.t_news-wrap{
  margin: 0 5%;
}
.t_news-headline{
  font-size: 3.6rem;
  letter-spacing: 0.22em;
  margin-bottom: 48px;
}
.t_news-headline .t_head_jp{
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.5em;
  margin-top: 9px;
}
.t_news-list{
  position: relative;
}
.t_buttonarea.buttonarea.t_news-btn{
  margin-top: 47px;
}
.t_large-link-wrap{
  position: relative;
  margin: 103px 5% 133px;
}
.t_large-link:not(:first-child){
  margin-top: 15px;
}
.t_large-link a{
  display: inline-block;
  height: 100%;
}
.t_icon-circle::before{
  content: "";
  display: inline-block;
  background-image: url(../images/history/history_0_image.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}
.t_prome-rule-headline.t_icon-circle::before{
  margin-bottom: 7px;
}
.t_base-set-headline.t_icon-circle::before{
  margin-right: 12px;
}
.t_img-blueraindrops{
  position: absolute;
  top: 14px;
  right: 12%;
  width: 21%;
  z-index: -1;
}
.t_img-yellowraindrops{
  position: absolute;
  top: 10%;
  right: -4%;
  width: 15%;
}
.t_img-beigeraindrops{
  position: absolute;
  top: 17%;
  right: 3%;
  width: 39%;
  z-index: -1;
}
.t_img-light-blueraindrops{
  position: absolute;
  top: -26%;
  left: -17%;
  width: 50%;
}
.t_img-beigesmallraindrops{
  position: absolute;
  top: -10%;
  left: 21%;
  width: 23%;
}
.t_img-smalllight-blueraindrops{
  position: absolute;
  top: 19%;
  right: -10%;
  width: 30%;
}
.t_img-smalllight-blueraindrops02{
  position: absolute;
  bottom: 41%;
  left: 6%;
  width: 26%;
}
.t_img-pinkraindrops{
  position: absolute;
  bottom: -21%;
  right: 5%;
  width: 23%;
}
.t_hand-image{
  width: 100%;
}
.t_hand-image img{
  position: absolute;
  top: 0;
  right: -10px;
  transform: translate(50px, -50px);
  transition: transform 1s ease-out;
}
.t_hand-image img.is-move{
  transform: translate(0px, 0px);
}
.t_fade-in-item{
  opacity: 0; 
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: var(--animation-delay, 0s); 
}
.t_fade-in-item.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease-out var(--animation-delay, 0s), 
              transform 0.8s ease-out var(--animation-delay, 0s);
}
.t_buttonarea .button{
  min-width: 250px;
  padding: 22px 30px;
  border-radius: 30px;
  margin: 0;
  display: block;
}
@media screen and (min-width: 768px) {
  .spacer01 {
    margin-top: -1px;
  }
  .spacer02 {
    margin-top: -1px;
  }
  .spacer03 {
    background: #FAF8F2;
  }

  .t_floating-btn{
    top: 40%;
    width: 85px;
  }
  .t_mv-container{
    height: calc(100vh - 50px);
  }
  .t_mv-area p{
    font-size: 3.2rem;
    white-space: nowrap;
  }

  .t_read-text-wrap{
    padding: 0;
    text-align: center;
  }
  .t_read-text{
    max-width: 615px;
    margin: 0 auto;
    padding-top: 5px;
  }
  .t_read-text-wrap p:not(:first-child){
    margin-top: 45px;
  }
  .t_read-text-wrap p{
    font-size: 20px;
    letter-spacing: 0.016em;
  }
  .t_read-text-area .buttonarea{
    margin-top: 100px;
  }
  .t_prome-rule{
    margin-top: 220px;
    padding: 0;
  }
  .t_rule-list{
    margin-top: 0;
    max-width: 900px;
    margin: 0 auto;
  }
  .t_prome-rule-headline{
    margin: 0;
    font-size: 20px;
    position: absolute;
    right: 21%;
    top: -19%;
  }
  .t_rule-item:not(:first-child){
    margin-top: 58px;
  }
  .t_rule-item-headline{
    gap: 22px;
  }
  .t_rule-number{
    width: 59px;
    height: 59px;
    font-size: 17px;
    padding-top: 15px;
  }
  .t_rule-item-headline-text{
    font-size: 32px;
    line-height: 1.2;
  }
  .t_rule-item-headline-subtext{
    display: block;
    font-size: 16px;
  }
  .t_rule-detail{
    margin: 9px 0 0 81px;
    font-size: 16px;
    letter-spacing: 0.1em;
  }
  .t_rule-attention{
    font-size: 13px;
    text-align: center;
    margin-top: 65px;
    letter-spacing: 0.1em;
  }
  .t_base-set-wrap{
    padding-top: 10%;
    margin-top: 0;
  }
  .t_base-set-headline{
    padding: 0 18% 0 0;
    font-size: 32px;
    line-height: 1.8;
    text-align: right;
  }
  .t_base-set-headline .t_base-set-indent{
    display: inline-block;
    margin-left: 0;
    margin-right: -12%;
  }
  .t_base-detail-wrap{
    max-width: 88%;
    margin: 0 auto;
    position: relative;
  }
  .t_base-text-wrap{
    margin: 37px 0 0 0;
    padding: 150px 116px 144px 134px;
    background-size: 100%;
    font-size: 16px;
    letter-spacing: 0.1em;
    position: relative;
    width: 740px;
    transform: scale(-1);
  }
  .t_base-text-wrap-inner{
    transform: scale(-1);
    padding: 19px 0 0 15px;
  }
  .t_base-set-title{
    font-size: 2.6rem;
    margin-bottom: 37px;
  }
  .t_base-item-list{
    margin: 37px 0;
  }
  /* .t_base-set-image-wrap{
    position: absolute;
    margin-top: 0;
    top: 0;
    right: 0;
  } */
  /* .t_base-set-image{
    width: 40%;
  } */
  .t_base-product01{
    margin-left: 48%;
    position: relative;
    top: 26px;
    width: 45%;
  }
  .t_base-product02{
    margin: -20% 0 0 16%;
    width: 47%;
  }
  .t_base-product03{
    margin: -70% 0 0 65%;
    width: 38%;
  }
  .t_base-set-textimage{
    width: 80%;
    top: 10%;
    left: 22%;
  }
  .t_base-link-wrap .buttonarea, .t_base-link-wrap .buttonarea a{
    margin: 0;
  }
  .t_base-link-wrap{
    margin-top: 140px;
    display: flex;
    gap: 40px;
    justify-content: center;
    padding-bottom: 230px;
  }
  .link-product-page{
    margin-top: 0 !important;
  }
  .bg_t_atelier-prome-content{
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .t_atelier-prome{
    padding: 0 0 230px 10%;;
    /* background-size: 100%; */
    margin-bottom: 153px;
    background-position: top;
    background-attachment: fixed;
    margin: -750px 0 0;
  }
  .t_atelier-prome-inner{
    padding: 90px 75px 80px;
    max-width: 605px;
  }
  .t_atelier-prome-text{
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-top: 33px;
    padding-left: 20px;
  }
  .t_atelier-prome-text p:not(:first-child){
    margin-top: 42px;
  }
  .btn_atelier-detail{
    margin-top: 55px;
    justify-content: flex-start;
  }
  .btn_atelier-detail .t_prome-link img{
    width: 14px;
    height: 14px;
    margin-left: 17px;
  }
  .t_news-wrap{
    max-width: 1000px;
    margin: 0 auto;
  }
  .t_news-headline{
    font-size: 36px;
    text-align: left;
    letter-spacing: 0.2em;
    margin: 0 0 33px 0;
  }
  .t_news-headline .t_head_jp{
    display: inline-block;
    font-size: 20px;
    padding-left: 31px;
  }
  .t_buttonarea.buttonarea.t_news-btn{
    margin-top: 47px;
  }
  .t_large-link-wrap{
    margin: 145px 0 191px;
    display: flex;
    gap: 34px;
    padding: 0 10%;
  }
  .t_large-link:not(:first-child){
    margin-top: 0;
  }
  .t_large-link a{
    display: inline-block;
    height: 100%;
  }
  .t_icon-circle::before{
    width: 36px;
    height: 36px;
    vertical-align: sub;
  }
  .t_prome-rule-headline.t_icon-circle::before{
    margin-bottom: 20px;
  }
  .t_base-set-headline.t_icon-circle::before{
    margin-right: 17px;
  }
  .t_img-blueraindrops{
    position: absolute;
    top: 0;
    right: 18%;
    width: 9%;
    z-index: -1;
  }
  .t_img-yellowraindrops{
    position: absolute;
    top: 11%;
    right: 7%;
    width: 7%;
  }
  .t_img-beigeraindrops{
    position: absolute;
    top: 20%;
    right: 14%;
    width: 14%;
    z-index: -1;
  }
  .t_img-light-blueraindrops{
    position: absolute;
    top: -90%;
    left: 6%;
    width: 20%;
  }
  .t_img-beigesmallraindrops{
    position: absolute;
    top: -42%;
    left: 21%;
    width: 10%;
  }
  .t_img-smalllight-blueraindrops{
    position: absolute;
    top: 7%;
    right: 7%;
    width: 12%;
  }
  .t_img-smalllight-blueraindrops02{
    position: absolute;
    top: 3%;
    left: 10%;
    width: 16%;
  }
  .t_img-pinkraindrops{
    position: absolute;
    bottom: -34%;
    right: 1%;
    width: 23%;
  }
  .t_hand-image img{
    position: absolute;
    top: -17%;
    right: -15%;
    width: 80%;
    transform: translate(100px, -100px);
  }
  .t_buttonarea .button{
    min-width: 280px;
  }
}

@media screen and (min-width: 1290px) {
.t_base-set-image-wrap{
    position: absolute;
    margin-top: 0;
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1289px) {
  .t_base-set-image-wrap{
    left: -10%;
  }
  .t_hand-image img{
    top: -8%;
  }
}

@media screen and (min-width: 400px) and (max-width: 549px) {
  .t_base-text-wrap{
    padding: 15% 35px 45%;
    background-size: 135%;
  }
}

@media screen and (min-width: 550px) and (max-width: 767px) {
  .t_base-text-wrap{
    padding: 22% 35px 42%;
    background-size: 110%;
  }
}

/* .h_left-content{
  border-bottom: solid 1px #C7DFEB;
} */
.h_right-content{
  margin-top: 35px;
  padding-left: 6%;
}
.h_right-content li:not(:first-child){
  margin-top: 20px;
}
.h_side-list li a{
  text-decoration: none;
}
.h_side-item{
  font-weight: 600;
}
.h_side-sublist{
  margin: 10px 0 0 20px;
}
.h_side-sublist li a{
  color: #333333;
  font-weight: 300;
}
.h_side-sublist li:not(:first-child){
  margin-top: 14px;
}
.h_side-subitem{
  text-indent: -1em;
  padding-left: 1em;
}
.h_side-subitem a::before{
  content: "";
  width: 10px;
  height: 1px;
  background-color: #333333;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.h_icon-link{
  display: inline-block;
  background-image: url(../images/top/icon_link.svg);
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  margin-left: 10px;
}
.h_icon-link-blue{
  position: relative;
}
.h_icon-link-blue{
  display: inline-block;
  background-image: url(../images/top/icon_link-blue.svg);
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  margin-left: 10px;
}

@media screen and (min-width: 768px) {
  .slidemenu_btn{
    padding: 0;
    right: 2.5%;
  }
  .slidemenu_con{
    width: 40%;
    padding: 63px 3% 33px;
    overflow: auto;
  }
  .slidemenu_con.open .h_mobile_tel{
    letter-spacing: 0.06em;
  }
  .slidemenu_con.open .h_mobile_tel span{
    font-size: 1.8rem;
  }
  .slidemenu_con.open .h_mobile_tel a{
    font-size: 2rem;
  }
  .slidemenu_con.open .h_free_tel{
    font-size: 4.9rem;
  }
  .slidemenu_con.open .h_tel_time{
    font-size: 1.6rem;
  }
  .slidemenu_con.open .h_telarea{
    background: rgba(225, 237, 242, 0.53);
    margin: 0;
    padding: 23px;
  }
  .slidemenu_con.open .h_buttonarea{
    background: none;
    padding: 66px 0 0 0;
  }
  .slidemenu_con.open .h_buttonarea .button{
    display: block;
    opacity: 1;
    height: 80px;
    border-radius: 60px;
    padding: 30px 0;
    font-size: 16px;
    line-height: 1.4;
  }
  .slidemenu_con.open .h_buttonarea .button:hover{
    opacity: 0.7;
  }
  .slidemenu_con.open .h_buttonarea .button:not(:first-child){
    margin-top: 20px !important;
  }
  .slidemenu_con.open .sp_gnavi_account{
    margin-bottom: 67px;
  }
  .sp_gnavi_iconmenu{
    gap: 50px;
  }
  .slidemenu_con.open .h_menu_link.faq, .slidemenu_con.open .h_menu_link.guide, .slidemenu_con.open .h_menu_link.mail{
    background-size: 40px 40px;
    padding-top: 65px;
    background-position: center top;
  }
  .h_left-content{
    width: 100%;
    /* height: 100vh; */
    padding-right: 36px;
    border-bottom: none;
    /* border-right: solid 1px #C7DFEB; */
  }
  .h_right-content{
    width: 49%;
    margin-top: 0;
    padding-left: 0;
  }
  .h_side-item{
    font-size: 18px;
  }
  .h_right-content li:not(:first-child){
    margin-top: 27px;
  }
  .h_side-sublist{
    margin: 5px 0 0 36px;
  }
  .h_side-sublist li a{
    font-size: 16px;
  }
  .h_side-sublist li:not(:first-child){
    margin-top: 5px;
  }
  .h_side-subitem a::before{
    width: 12px;
    margin-right: 9px;
  }
  .h_icon-link{
    width: 14px;
    height: 14px;
  }
  .h_icon-link-blue{
    width: 14px;
    height: 14px;
  }
}


/* プロメの歴史リニューアル */
#page_history img{
  display: block;
}
.hi_mv-container{
  position: relative;
}
.hi_mv-area{
  position: relative;
  z-index: 1;
  min-height: 400px;
}
.hi_mv-area img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t_wave01-blue{
  background-size: cover;
	overflow: visible;
	width: 100%;
	aspect-ratio: 750/232;
	position: absolute;
	left: 0;
	bottom: -0.5vw;
	z-index: 1;
	background-image: url(../images/history/sp_history_2_image.png);
	background-position: center top;
}
.hi_headline{
  font-family: "Zen Old Mincho", sans-serif;
  position: absolute;
  bottom: 18px;
  left: 5%;
  font-size: 2.0rem;
  color: #4084BB;
  letter-spacing: 0.5em;
}
.hi_headline.t_icon-circle::before{
  vertical-align: sub;
  margin-right: 12px;
}
.hi_bg{
  background: linear-gradient(to bottom, #DBE9F0 0%, #DEEFE7 50%, #DBE9F0 100%);
  padding: 13px 0 105px;
}
.hi_year-number-content{
  position: relative;
}
.hi_year-block{
  position: relative;
}
.hi_year-block:not(:first-child){
  margin-top: 90px;
}
.timeline-fill {
  position: absolute;
  left: 5%;
  top: 65px;
  width: 2px;
  height: 0;
  background-image: radial-gradient(rgba(20, 87, 142, 0.5) 1px, transparent 1px);
  background-size: 3px 6px;
  background-repeat: repeat-y;
  transition: height 0.8s ease-out;
  z-index: 1;
}
.hi_small-year-wrap{
  font-family: "Crimson Text", sans-serif;
  color: rgba(20, 87, 142, 0.5);
  font-size: 2.1rem;
  position: absolute;
  top: 22px;
  left: 0%;
  writing-mode: sideways-rl;
}
.hi_year-content-wrap{
  width: 100%;
  padding-left: 12%;
  color: #3D649B;
}
.hi_year-headline-wrap{
  position: relative;
  z-index: 2;
}
.large-year-display{
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
  width: 1ch;
}
.slot-year{
  font-family: "Crimson Text", sans-serif !important;
  color: #FFFFFF;
  font-size: 8.5rem;
  letter-spacing: 0;
  z-index: 1;
}
.small-slot-year{
  font-size: 7rem;
}
.small-year-bar{
  display: inline-block;
  background: #FFFFFF;
  width: 20px;
  height: 7px;
  margin-left: 20px;
  /* position: absolute;
  top: 50%;
  left: 47%; */
  transform: translate(-50%, -50%);
}
.year-underline{
  display: block;
  background: #14578E;
  width: 0;
  height: 3px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  transition: width 0.7s ease-out;
}
.animation-bar.is-in-view .year-underline {
  width: 14px;
}
.hi_year-detail{
  font-family: "Zen Old Mincho", sans-serif;
  margin: 4px 0 15px 9px;
  font-size: 1.3rem;
  line-height: 1.7;
  font-weight: 500;
  position: relative;
  z-index: 1;
  letter-spacing: 0.15em;
}
.hi_year-content-title{
  font-family: "Zen Old Mincho", sans-serif;
  margin: 20px 0 15px 0;
  font-size: 2.1rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.hi_year-right-content{
  margin: -5px 0 0 8px;
}
.hi_year-textwrap p:not(:first-child){
  margin-top: 23px;
}
.hi_year-textwrap p{
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: 0.14em;
}
.hi_transition-content{
  margin-top: 90px;
  padding-bottom: 90px;
}
.hi_transition-headline{
  font-family: "Zen Old Mincho", sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.2em;
  text-align: center;
}
.hi_transition-wrap{
  padding: 33px 5% 0;
}
.hi_transition-item:not(:first-child){
  margin-top: 85px;
}
.hi_period{
  margin-bottom: 10px;
}
.hi_period-number{
  font-family: "Crimson Text", sans-serif;
  font-size: 6rem;
  color: #4084BB;
  border-bottom: solid 1px #4084BB;
  line-height: 1.1;
}
.hi_period-number span{
  font-family: "Zen Old Mincho", sans-serif;
  font-size: 1.8rem;
  /* background: #F9D3D4; */
  margin-left: 5px;
}
.hi_period-title{
  font-family: "Zen Old Mincho", sans-serif;
  margin-top: 12px;
  color: #4084BB;
  letter-spacing: 0.2em;
}
.hi_period-detail-text{
  margin-top: 20px;
}
.hi_period-detail-text p:not(:first-child){
  margin-top: 14px;
}
.hi_date{
  font-family: "Crimson Text", sans-serif;
  font-size: 5rem;
  color: #FFFFFF;
  vertical-align: bottom;
}
.t_large-link-wrap.hi_link-wrap{
  margin: 103px 5% -14px;
}
.image1945{
  width: 85%;
  position: relative;
  left: 8px;
}
.image1945-1951{
  width: 48%;
  position: relative;
  left: 24%;
}
.image1951{
  margin-left: 9px;
  width: 95%;
}
.image1952{
  width: 45%;
  position: relative;
  left: 46%;
  margin-top: -40%;
}
.image1953{
  width: 86%;
  position: relative;
  left: 9px;
  top: -7px;
}
.image1953-2{
  width: 60%;
  position: relative;
  left: 18%;
  top: -6px;
}
.image1953-3{
  width: 73%;
  position: relative;
  left: 12%;
  top: -5px;
}
.image1953-4{
  width: 85%;
  position: relative;
  left: 9px;
  top: -7px;
}
.hi_dat{
  font-family: "Crimson Text", sans-serif;
  color: #FFFFFF;
  font-size: 50px;
  vertical-align: bottom;
}
.image1957{
  width: 52%;
  position: relative;
  left: 32%;
  margin-top: -12%;
}
.image1960{
  width: 49%;
  position: relative;
  left: 46%;
  margin-top: -42%;
}
.image1961{
  width: 60%;
  position: relative;
  left: 19%;
  top: -3px;
}
.image1976{
  width: 59%;
  position: relative;
  left: 18%;
  top: -5px;
}
.image1977{
  width: 48%;
  position: relative;
  left: 46%;
  top: -19px;
}
.image1978{
  width: 60%;
  position: relative;
  left: 18%;
  top: -10px;
}
.image1984{
  width: 75%;
  position: relative;
  left: 12%;
}
.image1984-2{
  position: relative;
  left: 9px;
  top: -5%;
  width: 97%;
}
.image1987{
  width: 59%;
  position: relative;
  left: 17%;
}
.hi_year-number10 .hi_year-right-content{
  margin-top: -30px;
}
.hi_year-number13 .hi_year-right-content{
  margin-top: -57px;
}
.hi_year-number14 .hi_year-right-content{
  margin-top: -12px;
}
.hi_year-number23 .hi_year-right-content{
  margin-top: -20px;
}
.hi_year-number24 .hi_year-right-content{
  margin-top: -12px;
}
.care-session{
  background-image: url(../images/history/sp_history_20_image.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 20px 0 40px;
}
.text-s{
  font-family: "Crimson Text", sans-serif;
  font-size: 6rem;
  color: #FFFFFF;
  vertical-align: top;
  padding-left: 5px;
}
.care-session .hi_year-detail{
  color: #FFFFFF;
}
.care-session .hi_year-content-wrap{
  color: #FFFFFF;
}
.care-session .hi_year-right-content{
  margin-top: 195px;
}
.hi_period-list{
  margin-top: 25px;
}
.hi_period-list .hi_period-icon{
  width: 7px;
  height: 7px;
  display: inline-block;
  background-color: #C7DFEB;
  border-radius: 50%;
  margin-right: 10px;
}
.image1992{
  width: 31%;
  position: relative;
  left: 59%;
  margin-top: -44%;
}
.image1998-2{
  width: 60%;
  position: relative;
  left: 13%;
  top: -6px;
}
.image2024{
  width: 61%;
  position: relative;
  left: 18%;
  top: -5px;
}
.hi_fade-in{
  opacity: 0;
  transform: translateY(30px);
}
.hi_fade-in.is-fade-in-order{
  opacity: 1;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .hi_mv-area{
    height: 74vh;
  }
  /* .hi_mv-area img{
    object-position: 0 -35px;
  } */
  .t_wave01-blue{
    background-size: cover;
    overflow: visible;
    width: 100%;
    aspect-ratio: 1366/232;
    position: absolute;
    left: 0;
    bottom: clamp(-9vw, calc(-148px + (80 * (1520px - 100vw) / 410)), -48px);
    z-index: 1;
    background-image: url(../images/history/history_2_image.png);
    background-position: center top;
  }

  .hi_headline{
    bottom: 50px;
    left: 10%;
    font-size: 4.0rem;
    letter-spacing: 0.58em;
  }
  .hi_headline.t_icon-circle::before{
    vertical-align: sub;
    margin-right: 12px;

  }
  .hi_bg{
    padding: 140px 0 180px;
  }
  .hi_year-number-content{
    position: relative;
  }
  .hi_year-block{
    position: relative;
    max-width: 1040px;
    margin: 0 auto
  }
  .hi_year-block.care-session{
    max-width: 100%;
  }
  .care-session-inner{
    max-width: 1040px;
    margin: 0 auto;
    position: relative;
  }
  .hi_year-left-content{
    width: 50%;
  }
  .hi_year-right-content{
    width: 50%;
    margin-top: 55px;
    position: relative;
  }
  .hi_year-number18 .hi_year-right-content{
    width: 100%;
  }
  .hi_year-block:not(:first-child){
    margin-top: 90px;
  }
  .timeline-fill {
    position: absolute;
    left: 3%;
    top: 115px;
  }
  .hi_small-year-wrap{
    font-size: 3.6rem;
    position: absolute;
    top: 40px;
    left: 0;
    writing-mode: sideways-rl;
  }
  .hi_year-content-wrap{
    padding-left: 10%;
    display: flex;
  }
  .hi_column{
    display: block;
  }
  .large-year-display{
    position: relative;
    white-space: nowrap;
  }
  .slot-year{
    font-size: 14rem;
  }
  .small-slot-year{
    font-size: 12rem;
  }
  .small-year-bar{
    display: inline-block;
    background: #FFFFFF;
    width: 25px;
    margin-left: 30px;
  }
  .year-underline{
    width: 0;
    height: 5px;
    left: 22px;
    bottom: 25px;
  }
  .animation-bar.is-in-view .year-underline {
    width: 25px;
  }
  .hi_year-detail{
    margin: 0 0 15px 20px;
    font-size: 1.6rem;
  }
  .hi_year-content-title{
    font-size: 3rem;
  }
  .hi_year-textwrap p:not(:first-child){
    margin-top: 40px;
  }
  .hi_year-textwrap p{
    font-size: 1.4rem
  }
  .hi_transition-content{
    margin-top: 100px;
    padding-bottom: 90px;
  }
  .hi_transition-headline{
    font-size: 3.2rem;
  }
  .hi_transition-wrap{
    padding: 108px 0 0 0;
    max-width: 900px;
    margin: 0 auto;
  }
  .hi_transition-item{
    display: flex;
  }
  .hi_transition-item:not(:first-child){
    margin-top: 103px;
  }
  .hi_period{
    margin: 52px 0 0 0;
    width: 36%;
  }
  .hi_period-number{
    font-size: 9rem;
    line-height: 1;
    width: 110%;
    position: relative;
  }
  .hi_period-number span{
    font-size: 2.2rem;
  }
  .hi_period-title{
    margin-top: 13px;
    font-size: 24px;
    line-height: 1.7;
  }
  .hi_period-detail{
    width: 72%;
  }
  .hi_period-detail-text{
    margin-top: 20px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
  .hi_date{
    font-size: 8rem;
  }
  .t_large-link-wrap.hi_link-wrap{
    margin: 145px 0 -17px;
  }
  .image1945{
    width: 100%;
    left: 20px;
  }
  .image1945-1951{
    width: 50%;
    left: 35%;
    top: -12%;
  }
  .image1952{
    width: 60%;
    left: 37%;
    margin-top: -42%;
  }
  .image1953{
    width: 41%;
    position: absolute;
    left: 52%;
    top: 30px;
  }
  .image1953-2{
    width: 69%;
    left: 23%;
    top: -13%;
  }
  .image1953-3{
    width: 87%;
    left: 20px;
  }
  .image1953-4{
    width: 40%;
    position: absolute;
    left: 52%;
    top: 40px;
  }
  .hi_dat{
    font-family: "Crimson Text", sans-serif;
    color: #FFFFFF;
    font-size: 50px;
    vertical-align: bottom;
  }
  .image1957{
    width: 45%;
    left: 37%;
    top: 20px;
  }
  .image1960{
    width: 50%;
    left: 48%;
    top: -2%;
  }
  .image1961{
    width: 80%;
    left: 24%;
  }
  .image1976{
    width: 83%;
    left: 23%;
  }
  .image1977{
    width: 65%;
    left: 29%;
    top: -5%;
  }
  .image1978{
    width: 81%;
    left: 22%;
    top: 5px;
  }
  .image1984{
    width: 88%;
    left: 20px;
  }
  .image1987{
    width: 82%;
    left: 21%;
    top: -7%;
  }
  .care-session{
    background-image: url(../images/history/history_20_image.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 51px 0;
  }
  .text-s{
    font-size: 9rem;
    vertical-align: bottom;
    padding-left: 5px;
    line-height: 1.5;
  }
  .care-session .hi_year-detail{
    color: #FFFFFF;
  }
  .care-session .hi_year-content-wrap{
    color: #FFFFFF;
  }
  .care-session .hi_year-right-content{
    margin: 207px 0 0 20px;
  }
  .image1992{
    width: 35%;
    left: 53%;
    top: -8%;
  }
  .image1998-2{
    width: 83%;
    left: 21%;
    top: -29px;
  }
  .image2024{
    width: 69%;
    left: 21%;
    top: 2px;
  }
  .hi_year-number01 .hi_year-right-content{
    margin-left: -30px;
  }
  .hi_year-number02 .hi_year-right-content{
    margin: 12% 0 0 -25px;
  }
  .hi_year-number03-wrap, .hi_year-number16-wrap{
    position: relative;
  }
  .hi_year-number03-wrap .image1951.view_PC, .hi_year-number16-wrap .image1984-2.view_PC{
    position: absolute;
    right: 0;
    left: initial;
    top: 30px;
    width: 47%;
  }
  .hi_year-number03 .hi_year-right-content{
    margin: 55px 0 0 20px;
  }
  .hi_year-number05 .hi_year-right-content{
    margin: 60px 0 0 20px;
  }
  .hi_year-number02{
    margin-top: 15% !important;
  }
  .hi_year-number06{
    margin-top: 13% !important;
  }
  .hi_year-number08 .hi_year-right-content{
    margin: 58px 0 0 20px;
  }
  .hi_year-number10 .hi_year-right-content{
    margin-top: 55px;
  }
  .hi_year-number13 .hi_year-right-content{
    margin-top: 64px;
  }
  .hi_year-number14 .hi_year-right-content{
    margin-top: 64px;
  }
  .hi_year-number16 .hi_year-right-content{
    margin: 58px 0 0 20px;
  }
  .hi_year-number23 .hi_year-right-content{
    margin-top: 55px;
  }
  .hi_year-number24 .hi_year-right-content{
    margin-top: 55px;
  }
}

/* アトリエプロメ */
.text-red{
  color: #FF0000;
}
.loading-screen {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FAF0F3; 
  z-index: 1000; 
  transition: opacity 1s ease-in-out; 
}
.loading-image{
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#page_care{
  color: #595757;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.page_care-header{
  position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
  height: 85px;
  transition: background-image 0.5s ease, height 0.5s ease;
}
.page_care-header-inner{
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 20px 28px 0 5%;
}
.page_care-header-inner .header_logo-image{
  padding-top: 10px;
  width: 73%;
}
.page_care-header-inner .header_logo-image img{
  width: 100%;
  display: block;
  transition: width 0.3s ease;
}
.page_care-header-inner.scrolled .header_logo-image img{
  width: 70%;
}
.page_care-header-bg img{
  display: none;
}
.page_care-header.menu-active .page_care-header-bg img{
  display: block;
  margin-top: -1px;
}
.page_care-header.menu-active .page_care-header-inner{
  background: #85B1DF;
  margin-left: 8.5%;
  margin-top: -1px;
  padding-top: 0;
}
.page_care-header.menu-active{
  /* background-image: url(../images/atelier-prome/menu/sp_atelier-prome_menu_back.png); */
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  overflow-y: auto;
}
.page_care-header.menu-active .header_logo-image {
  opacity: 0 !important; 
  pointer-events: none; 
}
.bg_page-care-header{
  position: absolute;
  right: 0;
  width: 100px;
}
.bg_page-care-header img{
  width: 100%;
}
.prome-headermenu-buttonarea{
  height: 100%;
  /* width: 37%; */
  display: flex;
  justify-content: center;
}
.page_care-header.menu-active .prome-headermenu-buttonarea{
  position: relative;
  top: -11px;
  right: 8px;
}
.prome-headermenu-button{
  border: none;
  outline: none;
  background: none;
  width: 26px;
  height: 32px;
  position: relative;
  padding: 0;
}
.headermenu-bar{
  display: block;
  width: 100%;
  height: 1px;
  background-color: #FFFFFF;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
}
.headermenu-bar1{
  top: 5px;
}
.headermenu-bar2{
  top: 15px;
}
.headermenu-text{
  display: inline-block;
  font-size: 1.1rem;
  padding-top: 25px;
  color: #FFFFFF;
  letter-spacing: 0.06em;
}
.page_care-header.menu-active .headermenu-bar1{
  transform: rotate(25deg); 
  top: 50%; 
}
.page_care-header.menu-active .headermenu-bar2{
  transform: rotate(-25deg); 
  top: 50%; 
}
.page_care-header.menu-active .headermenu-text {
  opacity: 1; 
  transform: translateY(0); 
}
.prome-headermenu-wrap{
  right: 100%;
  padding: 0 15% 90px 23%;
  position: relative;
}
.prome-headermenu-list:nth-child(2){
  margin-top: 20px;
}
.prome-headermenu-listwrap{
  border-bottom: solid 1px #C2D8EF;
  padding-bottom: 30px;
}
.page_care-header.menu-active .prome-headermenu-wrap{
  right: 0;
  background: #85B1DF;
  margin-left: 8.5%;
  margin-top: -1px;
}
.page_care-header.menu-active
.prome-headermenu-list a{
  text-decoration: none;
}
.prome-headermenu-list a .english-label{
  color: #C2D8EF;
}
.prome-headermenu-list a .japanese-label{
  color: #FFFFFF;
}
.prome-headermenu-linkbutton{
  margin-top: 30px;
}
.prome-headermenu-linkbutton a{
  display: inline-block;
  height: 100%;
}
.prome-headermenu-snslink-wrap{
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}
.prome-headermenu-snslink-wrap img{
  width: 21px;
}
.prome-header-snslink-wrap .prome-line.prome-header-line{
  color: #FFFFFF;
  text-decoration: none;
  margin-top: 17px;
}
.prome-line.prome-header-line img{
  width: 32px;
  object-fit: contain;
}
#about-prome,
#prome-experience,
#prome-participant-comments,
#prome-place-of-execution,
#prome-corporations-service-wrap {
  scroll-margin-top: 170px; /* ヘッダーの高さ + 少しの余白 */
  padding-top: 110px; /* セクション自体のパディング */
}
.prome_main-movie{
  width: 92.6%;
	height: 70vh;
	margin: 0 auto;
	position: relative;
}
.main-video{
	width: 100%;
  height: 100%;
	border-radius: 8px;
  object-fit: cover;
}
.prome-bg-container{
	position: fixed;
	width: 100%;
  height: 100%;
	top: 0;
	z-index: -1;
	background-size: cover;
	background-color: #ffffff;
	/* 初期背景色 */
	transition: background-color 0.5s ease-in-out, background 0.5s ease-in-out;
}
.bg-bubble__top,
.bg-bubble__experience {
	opacity: 0;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.bg-bubble__top>div,
.bg-bubble__experience>div {
	position: absolute;
	transform-origin: center;
}
.bg-bubble__top>div {
	width: 85.8%;
	top: -50%;
	right: -32.5%;
	animation: rotate 50s ease-in infinite;
}
.bg-bubble__top>div img {
	animation: bubble-float 50s ease-out infinite;
	transform-origin: center;
}
.bg-bubble__experience .--01 {
	width: 65%;
	top: 5%;
	right: 5%;
	animation: rotate 60s ease-in-out infinite;
}
.bg-bubble__experience .--02 {
	width: 75%;
	bottom: 38%;
	left: -15%;
	animation: rotate 60s ease-in-out infinite;
}
.bg-bubble__experience .--01 img {
	animation: bubble-float 40s ease-out infinite;
}
.bg-bubble__experience .--02 img {
	animation: bubble-float 40s ease-in infinite;
}
.prome-bg-video{
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	mix-blend-mode: screen;
	filter: grayscale(1);
}
.prome-bg-video.prome-bg-image{
  opacity: 1;
}
.prome-bg-video.prome-bg-image img{
  height: 100%;
  object-fit: cover;
}
.js-blurIn.is-show {
	opacity: 1;
	filter: blur(0px);
	transform: translateY(0);
}
.js-blurIn {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(20px);
	transition: opacity 0.75s ease-out, filter 0.75s ease-out, transform 0.25s ease-out;
}
.pagetop.prome_pagetop{
  transform: rotate(0deg);
  color: #924E94;
  font-weight: normal;
  font-size: 1.6rem;
  min-width: 70px;
  position: absolute;
  top: 50px;
}
.prome_pagetop .text_pagetop{
  right: 0;
  left: 0;
}
.prome_pagetop .text_pagetop::after{
  content: "";
  background-image: url(../images/atelier-prome/icon_purple-arrow.svg);
  display: inline-block;
  background-repeat: no-repeat;
  width: 15px;
  height: 10px;
  vertical-align: middle;
  margin-left: 5px;
}

/* ふわふわと揺れるシャボン玉のアニメーション */
@keyframes bubble-float {
	0% {
		transform: translateY(0) translateX(0) scale(1) skew(0deg, 0deg);
		opacity: 1;
	}

	25% {
		transform: translateY(-15px) translateX(10px) scale(1.1) skew(5deg, 5deg);
		opacity: 0.9;
	}

	50% {
		transform: translateY(-30px) translateX(-10px) scale(1) skew(-10deg, -10deg);
		opacity: 0.8;
	}

	75% {
		transform: translateY(-20px) translateX(5px)scale(1.15) skew(8deg, 8deg);
		opacity: 0.9;
	}

	100% {
		transform: translateY(0) translateX(0) scale(1) skew(0deg, 0deg);
		opacity: 1;
	}
}
@keyframes rotate {
	0%,
	100% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(60deg);
	}
}

.prome-floating-btn{
  position: fixed;
  right: 10px;
  bottom: 25px;
  z-index: 5;
  text-align: center;
  background: linear-gradient(-20deg, #8c4b8c 46%, #b38296);
  border-radius: 50%;
}
.prome-floating-btn a:hover{
  opacity: 0.7;
}
.prome-floating-btn a{
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 1.3rem;
  padding: 15px 17px;
  transition: all 0.3s ease;
}
.prome-floating-btn span{
  display: block;
  line-height: 1.4;
}
.prome-headtitle{
  padding: 0 5% 20px;
  display: flex;
  justify-content: end;
}
.prome-headtitle img{
  width: 87%;
}
.prome-mvarea{
  margin-top: 40%;
}
.prome-text-content{
  padding: 100px 5% 200px;
}
.prome-sec-title{
  color: #BE95BF;
  font-size: 1.1rem;
  line-height: 2.7;
  min-width: 60px;
}
.sec-title-circle{
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #D3B8D4;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: baseline;
}
.prome-story-text{
  margin-top: 85px;
  font-size: 1.3rem;
  line-height: 2.4;
}
.prome-story-text-image{
  margin-top: 60px;
}
.prome-experience{
  padding: 0 5% 160px;
  position: relative;
  overflow: hidden;
}
.prome-section-headline{
  color: #924E94;
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  line-height: 1.9;
}
.prome-experience-item-wrap{
  margin-top: 45px;
}
.prome-experience-item.sec-experience-item{
  padding-left: 28px;
}
.prome-experience-image img{
  display: block;
}
.prome-experience-number{
  font-size: 1.9rem;
  color: #85B1DF;
  font-weight: bold;
  letter-spacing: 0.06em;
}
.prome-experience-detail{
  margin: 26px 5% 44px;
}
.prome-experience-detail p{
  letter-spacing: 0.14em;
  line-height: 1.6;
}
.prome-experience-detail-headline{
  font-size: 1.6rem;
  margin-bottom: 25px;
}
.prome-experience-detail-text{
  font-size: 1.3rem;
}
.experience-right{
  display: flex;
  justify-content: end;
}
.img-experience01 img{
  width: 38%;
}
.prome-experience-image.img-experience02{
  margin-bottom: 45px;
}
.img-experience02 img{
  width: 64%;
}
.prome-experience-image.img-experience03{
  margin: 0 5% 23px 0;
}
.img-experience03 img{
  width: 50%;
}
.img-experience04 img{
  width: 50%;
  margin-bottom: 40px;
}
.img-experience05 img{
  width: 80%;
}
.prome-swiper{
  padding-left: 7%;
}
.prome-participant-comments{
  padding: 0;
  overflow: auto;
}
.prome-participant-comments .prome-experience-headline{
  padding-left: 5%;
}
.prome-comments-wrap{
  margin-top: 75px;
}
.prome-comments-item{
  position: relative;
  cursor: pointer;
  max-width: 450px;
}
.prome-comments-item:nth-child(even){
  margin-top: 40px;
}
.swiper-scrollbar{
  background: rgba(0,0,0,0.1);
  height: 8px;
  border-radius: 4px;
  margin-top: 20px;
}
.swiper-scrollbar-drag {
  background: #4a90e2; 
  border-radius: 4px;
}
.swiper-button-next, .swiper-button-prev {
  display: block;
  color: #4a90e2;
  background-color: #85B1DE;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 7%;
  transform: translateY(-50%);
  z-index: 5;
}
.swiper-button-prev {
  left: 5%; 
}
.swiper-button-next {
  right: 5%; 
}
.swiper-button-prev::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  position: relative;
  left: 2px;
}
.swiper-button-next::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: relative;
  right: 3px;
}
.prome-comment-bg-top img,.prome-comment-bg-bottom img{
  display: block;
}
.prome-comment-text{
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  line-height: 1.8;
  padding: 0 40px 0 45px;
  background: #FFFFFF;
  margin-right: 9.2%;
}
.prome-comments02 .prome-comment-text,.prome-comments04 .prome-comment-text{
  margin-right: 8.6%;
}
.prome-comment-bg-top {
  position: relative;
  top: 1;
}
.prome-comment-bg-bottom {
  position: relative;
  top: -1px;
}
.prome-place-of-execution{
  padding: 150px 5% 30px;
}
.prome-place-list{
  border-top: solid 1px #D3B8D4;
  border-bottom: solid 1px #D3B8D4;
  margin-top: 42px;
}
.prome-place-list .accordion-item:not(:first-child){
  border-top: solid 1px #D3B8D4;
}
.prome-accordion-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 25px 15px;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
  color: #924E94;
  border: none;
  outline: none;
  background: none;
}
.prome-accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
.prome-accordion-content.-open{
  max-height: 1500px;
}
.prome-accordion-icon-container{
  position: relative;
  width: 18px; 
  height: 18px; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.5rem; 
}
.prome-accordion-icon-container::before{
  content: '';
  position: absolute;
  width: 100%; 
  height: 1px; 
  background-color: currentColor; 
  transition: transform 0.3s ease-out; 
  transform-origin: center; 
}
.prome-accordion-icon-container::after{
  content: '';
  position: absolute;
  width: 1px; 
  height: 100%; 
  background-color: currentColor; 
  transition: transform 0.3s ease-out; 
  transform-origin: center; 
}
.prome-accordion-header.is-open .prome-accordion-icon-container::before,
.prome-accordion-header.is-open .prome-accordion-icon-container::after{
  transform: rotate(45deg);
}
.prome-accordion-inner-content{
  padding: 0 18px 95px;
  color: #924E94;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  line-height: 1.7;
}
.prome-inner-detail{
  margin-top: 38px;
}
.prome-inner-detail .prome-inner-tel{
  text-decoration: underline !important;
}
.prome-inner-title{
  font-weight: 600;
}
.prome-inner-address .prome-inner-title::before{
  content: "";
  background-image: url(../images/atelier-prome/icon_address.svg);
  display: inline-block;
  background-size: cover;
  width: 25px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
}
.prome-inner-access .prome-inner-title::before{
  content: "";
  background-image: url(../images/atelier-prome/icon_access.svg);
  display: inline-block;
  background-size: cover;
  width: 25px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
}
.prome-inner-tel .prome-inner-title::before{
  content: "";
  background-image: url(../images/atelier-prome/icon_tel.svg);
  display: inline-block;
  background-size: cover;
  width: 25px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
}
.prome-inner-access a::after{
  content: "";
  background-image: url(../images/atelier-prome/icon_link.svg);
  display: inline-block;
  background-size: cover;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 8px;
}
.prome-inner-access a, .prome-inner-tel a{
  color: #924E94;
}
.prome-contact-btn{
  width: 270px;
  margin: 20px auto 15px;
  border-radius: 50px;
  text-align: center;
  background: linear-gradient(-45deg, #8c4b8c 40%, #b38296);
}
.prome-contact-btn a{
  display: inline-block;
  color: #FFFFFF;
  text-decoration: none;
  padding: 11px 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  width: 100%;
}
.prome-contact-btn a:hover{
  opacity: 0.7;
}
.prome-next-schedule{
  margin: 0 5% 100px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 28px;
}
.prome-next-schedule-inner{
  padding: 30px 17px;
}
/* .prome-schedule-list{
  margin-top: 40px;
} */
.prome-schedule-list .tab_content_list li a{
  background: #FFFFFF;
  border-bottom: none;
  margin-bottom: 8px;
  padding: 15px;
}
.prome-schedule-list .tab_content_list li a:first-child{
  margin-top: 0;
}
.prome-schedule-item{
  background: #FFFFFF;
  padding: 15px;
}
.prome-schedule-date{
  font-size: 1.3rem;
  line-height: 1.8;
  letter-spacing: 0.14em;
}
.prome-place-name{
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: 600;
}
.prome-schedule-item:not(:first-child){
  margin-top: 8px;
}
.prome-schedule-contact-btn p{
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}
.prome-schedule-corporations-btn{
  text-align: center;
  border-bottom: solid 1px #595757;
  height: 30px;
  width: 155px;
  margin: 65px auto 0;
}
.prome-schedule-corporations-btn a{
  font-size: 1.3rem;
  font-weight: 600;
  text-underline-offset: 10px;
  color: #595757;
  text-decoration: none;
}
.prome-schedule-corporations-btn a::after{
  content: "";
  background-image: url(../images/atelier-prome/icon_arrow.svg);
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  width: 26px;
  height: 16px;
  margin-left: 10px;
}
.prome-customized-service-wrap.prome-corporations-service-wrap{
  padding: 100px 5% 0;
}
.prome-business-trip .prome-experience-headline{
  background: #FFFFFF;
}
.prome-business-trip .prome-experience-headline-inner{
  padding: 0 5%;
}
.prome-business-trip .prome-customized-service, .prome-business-trip .prome-service-contact-wrap{
  padding: 0 5%;
}
.img-prome-wave img{
  width: 100%;
  display: block;
}
.prome-customized-service-wrap .prome-sec-title{
  margin-bottom: 62px;
}
.prome-section-subtitle{
  display: block;
  font-size: 1.4rem;
}
.prome-customized-service-text{
  padding: 42px 0 37px;
  letter-spacing: 0.18em;
}
.prome-customized-service-text-inner{
  padding: 0 5%;
}
.prome-business-trip .prome-customized-service-text{
  background-color: #FFFFFF;
}
.prome-accordion-header.prome-service-case-header{
  background: #F4EDF4;
  border-radius: 10px;
}
.prome-case-no{
  font-size: 3.3rem;
  font-style: italic;
  color: #85B1DF;
  letter-spacing: 0.06em;
  font-weight: normal;
}
.prome-case-place{
  padding-left: 9px;
  color: #85B1DF;
  font-weight: normal;
}
.prome-case-title{
  color: #595757;
  display: block;
  font-size: 1.3rem;
}
.prome-case-right-wrap{
  display: flex;
  gap: 10px;
  align-items: center;
}
.prome-case-access{
  font-size: 1.4rem;
  font-weight: normal;
  white-space: nowrap;
}
.prome-case-access::before{
  content: "";
  background-image: url(../images/atelier-prome/icon_purple-access.svg);
  display: inline-block;
  background-repeat: no-repeat;
  width: 12px;
  height: 16px;
  margin-right: 5px;
}
.prome-accordion-inner-content.prome-case-inner{
  padding: 30px 15px 37px;
  background: #FFFFFF;
  border-radius: 0 0 10px 10px;
}
.prome-customized-service-summary{
  margin-top: 33px;
}
.prome-customized-service-summary-title{
  font-weight: 600;
  border-bottom: solid 1px #DECADF;
  padding-bottom: 10px;
}
.prome-customized-service-summary-text{
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  line-height: 1.7;
  margin-top: 15px;
  color: #595757;
}
.customized-service-comment{
  margin-top: 50px;
  background: #F7F3F8;
}
.customized-service-comment-title{
  position: relative;
  width: 43%;
  top: -15px;
  left: 20px;
}
.customized-service-comment-title p{
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  line-height: 1.5;
  color: #FFFFFF;
}
.customized-service-comment-detail{
  padding: 0 20px 26px;
  color: #595757;
}
.prome-case-inner-image{
  position: relative;
}
.prome-case-inner-image p{
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 1.2rem;
  color: #595757;
}
.prome-service-case:not(:first-child){
  margin-top: 40px;
}
.prome-contact-btn.service-contact-btn{
  background: linear-gradient(120deg, #d9e6f5, #85b1df);
}
.prome-contact-btn.service-contact-btn a::before{
  content: "";
  background-image: url(../images/atelier-prome/icon_white-tel.svg);
  display: inline-block;
  background-size: cover;
  width: 24px;
  height: 30px;
  vertical-align: middle;
  margin-right: 11px;
  background-repeat: no-repeat;
}
.service-contact-btn a{
  text-decoration: none !important;
  padding: 25px 0;
  font-size: 1.8rem;
}
.prome-corporations-service-wrap{
  padding-top: 100px;
}
.prome-service-contact-wrap{
  margin-top: 40px;
}
.service-contact-text{
  color: #595757;
}
.prome-purchase-link-inner{
  padding: 0 5%;
  margin-top: 117px;
}
.prome-purchase-text{
  text-align: center;
  font-size: 1.8rem;
  line-height: 2;
  color: #595757;
}
.prome-purchase-btn-wrap{
  margin-top: 40px;
}
.prome-purchase-btn-wrap a{
  display: inline-block;
  height: 100%;
}
.prome-purchase-btn-wrap a:not(:first-child){
  margin-top: 26px;
}
.prome-purchase-image{
  margin-top: 110px;
}
.prome-purchase-image img{
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: 75%;
  display: block;
}

.prome-footer{
  margin-top: 90px;
  padding: 0 5%;
}
.prome-footer a{
  color: #595757;
  text-decoration: none;
  display: block;
}
.prome-footer-image{
  text-align: center;
}
.prome-footer-image img{
  width: 50%;
}
.prome-footermenu-listwrap{
  margin-top: 63px;
  display: flex;
  gap: 30px;
}
.prome-footermenu-list{
  width: 50%;
}
.h_icon-link-blue.h_icon-link-black {
  background-image: url(../images/atelier-prome/icon_link-black.svg);
  vertical-align: middle;
}
.english-label{
  color: #BE95BF;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}
.japanese-label{
  font-size: 1.2rem;
  display: block;
  letter-spacing: 0.14em;
}
.menu-item-link{
  display: block;
}
.menu-item-link:not(:first-child){
  margin-top: 22px;
}
.menu-item-link.menu-single{
  margin-top: 10px !important;
}
.prome-footer-detailwrap{
  margin-top: 78px;
  padding: 0 12%;
}
.prome-footer-address{
  text-align: center;
  font-size: 1.1rem;
  color: #924E94;
  line-height: 2;
  letter-spacing: 0.14em;
}
.prome-footer-tel-wrap{
  color: #924E94;
  display: flex;
  gap: 10px;
  font-size: 1.1rem;
  line-height: 2;
  letter-spacing: 0.14em;
  margin-left: -45px;
  justify-content: center;
}
.prome-footer-tel-detail a{
  color: #924E94;
}
.prome-footer-btn-wrap{
  margin-top: 23px;
}
.prome-footer-btn-wrap a:not(:first-child){
  margin-top: 15px;
}
.prome-footer-snslink{
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 44px;
}
.prome-footer-snslink img{
  width: 21px;
}
.prome-line{
  font-size: 1.2rem;
  line-height: 1.5;
  display: flex !important;
  gap: 15px;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}
.prome-footer-snslink-wrap .prome-footer-line{
  margin-top: 27px;
  color: #924E94;
}
.prome-footer-line img{
  width: 32px;
  object-fit: contain;
}
.prome-copyright{
  text-align: center;
  color: #BE95BF;
  text-align: center;
  margin: 60px 0 19px;
}
@media screen and (min-width: 768px) {
  .loading-image{
    width: 30%;
  }
  .bg-bubble__experience .--01 {
    width: 43.9%;
    top: 2%;
    right: -8%;
    animation: rotate 60s ease-in-out infinite;
  }
  .bg-bubble__experience .--02 {
    width: 43.9%;
    bottom: 20%;
    left: -10%;
    animation: rotate 60s ease-in-out infinite;
  }
  .prome-floating-btn a{
    font-size: 1.6rem;
    padding: 35px;
  }
  .page_care-header{
    height: 150px;
  }
  .page_care-header-inner{
    padding: 20px 40px 0 4%;
    align-items: flex-start;
  }
  .page_care-header-inner .header_logo-image img{
    width: 40%;
    padding-top: 30px;
  }
  .page_care-header.menu-active .page_care-header-inner .header_logo-image img{
    padding-top: 51px;
  }
  .page_care-header-inner.scrolled .header_logo-image img{
    width: 30%;
  }
  .page_care-header.menu-active .page_care-header-inner{
    background: none;
    margin-left: 0;
  }
  .page_care-header.menu-active{
    background-image: url(../images/atelier-prome/menu/atelier-prome_menu_back.png);
    background-size: 70%;
    background-position: top right;
    overflow: hidden;
  }
  .page_care-header.menu-active .header_logo-image {
    opacity: 1; 
  }
  .bg_page-care-header{
    position: absolute;
    right: 0;
    width: 142px;
  }
  .bg_page-care-header img{
    width: 100%;
  }
  /* .prome-headermenu-buttonarea{
    width: 3%;
  } */
  .prome-headermenu-button{
    width: 34px;
    height: 41px;
    cursor: pointer;
    top: 12px;
  }
  .page_care-header.menu-active .prome-headermenu-button{
    top: 30px;
  }
  .headermenu-bar{
    display: block;
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: absolute;
  }
  .headermenu-bar1{
    top: 0px;
  }
  /* .headermenu-bar2{
    top: 15px;
  } */
  .headermenu-text{
    font-size: 1.2rem;
    padding-top: 20px;
  }
  .page_care-header.menu-active .headermenu-bar1{
    transform: rotate(25deg); 
    top: 50%; 
  }
  .page_care-header.menu-active .headermenu-bar2{
    transform: rotate(-25deg); 
    top: 50%; 
  }
  .page_care-header.menu-active .header_logo-image {
    opacity: 1 !important; 
  }
  .page_care-header.menu-active .headermenu-text {
    opacity: 1; 
    transform: translateY(0); 
    padding-top: 35px;
  }
  .prome-headermenu-wrap{
    padding: 2% 9% 0 49%;
  }
  .prome-headermenu-listwrap{
    padding-bottom: 37px;
    display: flex;
    gap: 30px;
  }
  .page_care-header.menu-active .prome-headermenu-wrap{
    right: 0;
    background: none;
    margin-left: 0;
  }
  .prome-headermenu-list{
    width: 50%;
  }
  .prome-headermenu-list:nth-child(2){
    margin-top: 0;
  }
  .prome-headermenu-list .menu-item-link:not(:first-child){
    margin-top: 20px;
    display: block;
  }
  .prome-headermenu-list a .english-label{
    font-size: 1.6rem;
  }
  .prome-headermenu-list a .japanese-label{
    font-size: 1.6rem;
  }
  .prome-headermenu-linkbutton{
    display: flex;
    gap: 20px;
  }
  .prome-headermenu-linkbutton a{
    display: inline-block;
    height: 100%;
  }
  .prome-header-snslink-wrap{
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 30px;
    align-items: baseline;
  }
  .prome-headermenu-snslink-wrap{
    margin-top: 0;
  }
  .prome-headermenu-snslink-wrap img{
    width: 21px;
  }
  .prome-header-snslink-wrap .prome-line.prome-header-line{
    margin-top: 0;
  }
  .prome-line.prome-header-line img{
    width: 34px;
  }
  .prome-line{
    margin-top: 0;
  }
  #about-prome,
  #prome-experience,
  #prome-participant-comments,
  #prome-place-of-execution,
  #prome-corporations-service-wrap {
    scroll-margin-top: 170px; /* ヘッダーの高さ + 少しの余白 */
    padding-top: 130px; /* セクション自体のパディング */
  }

  .prome_main-movie{
    width: 92.6%;
    height: auto;
    margin: 0 auto;
    position: relative;
  }
  .main-video{
    width: 100%;
    border-radius: 8px;
  }

  .prome-headtitle{
    padding: 0 5% 40px;
    display: flex;
    justify-content: end;
  }
  .prome-headtitle img{
    width: 40%;
  }
  .prome-mvarea{
    margin-top: 15%;
  }
  .prome-text-content{
    padding: 100px 0 400px;
    max-width: 945px;
    margin: 0 auto;
    display: flex;
    gap: 168px;
  }
  .prome-sec-title{
    font-size: 1.6rem;
  }
  .sec-title-circle{
    vertical-align: middle;
  }
  .prome-story-text{
    margin-top: 100px;
    font-size: 1.5rem;
    line-height: 2.6;
  }
  .prome-story-text:first-child{
    margin-top: 0;
  }
  .prome-story-text-image{
    margin-top: 110px;
  }
  .prome-experience{
    padding: 0 0 340px;
    max-width: 1000px;
    margin: 0 auto;
    overflow: initial;
  }
  .prome-section-headline{
    font-size: 2.8rem;
  }
  .prome-experience-item-wrap{
    margin-top: -70px;
  }
  .prome-experience-item{
    display: flex;
    margin-top: 94px;
  }
  .prome-experience-item:nth-child(even){
    flex-direction: row-reverse;
  }
  .prome-experience-texts{
    width: 44%;
  }
  .prome-experience-number{
    font-size: 2.8rem;
    position: relative;
    top: -14px;
    left: -13%;
  }
  .prome-experience-detail{
    margin: 5px 0 0 -4px;
  }
  .prome-experience-detail-headline{
    font-size: 2.4rem;
    margin-bottom: 30px;
  }
  .prome-experience-detail-text{
    font-size: 1.5rem;
  }
  .img-experience01 img{
    width: 40%;
  }
  .prome-experience-image{
    width: 60%;
  }
  .prome-experience-image.img-experience01{
    position: relative;
    top: -10px;
    left: 30%;
  }
  .prome-experience-image.img-experience02{
    margin-bottom: 45px;
    width: 40%;
    position: relative;
    left: -21%;
  }
  .img-experience02 img{
    width: 100%;
  }
  .prome-experience-image.img-experience03{
    margin: 0;
  }
  .img-experience03 img{
    width: 50%;
    position: relative;
    right: -2%;
    top: -86px;
  }
  .img-experience04 img{
    width: 50%;
    margin-bottom: 0;
    position: relative;
    top: 25px;
  }
  .prome-experience-image.img-experience05{
    width: 100%;
    justify-content: center;
    margin: 130px 0 0 -20px;
  }
  .img-experience05 img{
    width: 50%;
  }
  .prome-participant-comments{
    padding: 0 0 0 30px;
    overflow: auto;
    max-width: 1100px;
    margin: 0 auto;
  }
  .prome-participant-comments .prome-experience-headline{
    padding-left: 0;
    width: 100%;
  }
  .prome-swiper{
    padding: 0;
  }
  .swiper-button-next, .swiper-button-prev {
    display: none;
  }
  .prome-comments-item:nth-child(even){
    margin-top: 0;
  }
  .prome-comments-wrap{
    margin-top: 75px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 50px;
    column-gap: 80px;
  }
  .prome-comments-item{
    max-width: 570px;
    /* min-width: 450px; */
    margin-right: 0 !important;
  }
  .prome-comment-text{
    font-size: 1.5rem;
    padding: 0 30px;
  }
  .prome-place-of-execution{
    padding: 207px 0 40px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .prome-place-of-execution-inner{
    /* display: flex;
    justify-content: space-between;
    gap: 150px; */
  }
  .prome-place-of-execution .prome-experience-headline{
    /* width: 14%; */
    margin-top: -15px;
  }
  .prome-place-list{
    margin-top: 0;
  }
  .prome-place-list .prome-accordion-header{
    cursor: pointer;
    letter-spacing: 0.1em;
  }
  .prome-accordion-header{
    padding: 33px;
    font-size: 2rem;
    line-height: 1.7;
  }
  .prome-accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .prome-accordion-content.-open{
    max-height: 1500px;
  }
  .prome-accordion-icon-container{
    width: 27px; 
    height: 27px; 
  }
  .prome-accordion-icon-container::before{
    content: '';
    position: absolute;
    width: 100%; 
    height: 1px; 
    background-color: currentColor; 
    transition: transform 0.3s ease-out; 
    transform-origin: center; 
  }
  .prome-accordion-icon-container::after{
    content: '';
    position: absolute;
    width: 1px; 
    height: 100%; 
    background-color: currentColor; 
    transition: transform 0.3s ease-out; 
    transform-origin: center; 
  }
  .prome-accordion-header.is-open .prome-accordion-icon-container::before,
  .prome-accordion-header.is-open .prome-accordion-icon-container::after{
    transform: rotate(45deg);
  }
  .prome-accordion-inner-content{
    padding: 0 40px 95px 33px;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    line-height: 1.7;
  }
  .prome-inner-address, .prome-inner-access, .prome-inner-tel{
    display: flex;
  }
  .prome-access-tel{
    display: flex;
    gap: 5px;
  }
  .prome-inner-detail{
    margin-top: 25px;
  }
  .prome-inner-detail .prome-inner-tel{
    text-decoration: none !important;
  }
  .prome-inner-title{
    font-weight: 600;
    min-width: 140px;
    font-size: 1.6rem;
  }
  .prome-inner-text p{
    letter-spacing: 0.14em;
  }
  .prome-inner-text .prome-contact-btn{
    width: 340px;
  }
  .prome-inner-access a, .prome-inner-tel a{
    color: #924E94;
  }
  .prome-contact-btn{
    width: 420px;
    border-radius: 55px;
  }
  .prome-contact-btn a{
    padding: 25px 0;
    font-size: 1.5rem;
  }
  .prome-next-schedule{
    max-width: 1000px;
    margin: 0 auto 25px;
    border-radius: 28px;
  }
  .prome-next-schedule-inner{
    padding: 40px 45px;
    display: flex;
    gap: 76px;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .prome-next-schedule-inner .prome-experience-headline{
    width: 20%;
  }
  .prome-next-schedule-inner .prome-section-headline{
    writing-mode: vertical-rl;
    margin-top: 40px;
    line-height: 1.5;
  }
  .prome-schedule-list{
    margin-top: 0;
    width: 100%;
  }
  .prome-schedule-list .tab_content_list li a{
    padding: 23px 15px;
  }
  .prome-schedule-list .tab_content_list{
    padding: 0;
  }
  .prome-schedule-item{
    padding: 20px;
    display: flex;
    gap: 84px;
    align-items: center;
  }
  .prome-schedule-date{
    font-size: 1.4rem;
    line-height: 1.8;
  }
  .prome-schedule-contact-wrap{
    display: flex;
    justify-content: center;
    gap: 64px;
    align-items: center;
  }
  .prome-place-name{
    font-size: 1.8rem;
    line-height: 1.8;
  }
  .prome-schedule-contact-btn p{
    font-size: 1.3rem;
    line-height: 1.8;
    margin-top: 15px;
  }
  .prome-schedule-corporations-btn{
    text-align: center;
    width: 100%;
    margin: 0 5px;
  }
  .prome-schedule-corporations-btn a{
    font-size: 1.5rem;
    color: #595757;
    letter-spacing: 0.1em;
  }
  .prome-schedule-corporations-btn a::after{
    width: 15px;
    height: 10px;
  }
  .prome-customized-service-wrap{
    margin-top: -10px;
    padding: 0;
  }
  .prome-customized-service-inner{
    padding: 0;
    /* max-width: 1000px;
    margin: 0 auto; */
  }
  .prome-experience-headline .prome-experience-headline-inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
  }
  .prome-customized-service-wrap .prome-sec-title{
    margin-bottom: 62px;
  }
  .prome-section-subtitle{
    font-size: 1.7rem;
  }
  .prome-customized-service-text{
    letter-spacing: 0.14em;
    font-size: 1.7rem;
  }
  .prome-customized-service-text-inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
  }
  .prome-customized-service{
    max-width: 1000px;
    margin: 0 auto;
  }
  .prome-business-trip .prome-customized-service, .prome-business-trip .prome-service-contact-wrap{
    padding: 0;
  }
  .prome-accordion-header.prome-service-case-header{
    padding: 20px;
  }
  .prome-case-no{
    font-size: 4.8rem;
  }
  .prome-case-place{
    padding-left: 9px;
    font-size: 1.4rem;
  }
  .prome-case-title{
    display: inline-block;
    font-size: 1.7rem;
    padding-left: 10px;
  }
  .prome-service-case .prome-accordion-content{
    max-height: 1020px;
  }
  .prome-accordion-inner-content.prome-case-inner{
    padding: 30px 15px 37px;
  }
  .prome-summary-wrap{
    display: flex;
    gap: 30px;
  }
  .prome-customized-service-summary{
    margin-top: 0;
    width: 50%;
  }
  .prome-customized-service-summary-title{
    font-weight: 600;
    border-bottom: solid 1px #DECADF;
    padding-bottom: 10px;
  }
  .prome-customized-service-summary-text{
    font-size: 1.5rem;
  }
  .customized-service-comment{
    margin-top: 50px;
  }
  .customized-service-comment-title{
    width: 20%;
    top: -20px;
  }
  .customized-service-comment-title p{
    top: 15%;
    font-size: 1.5rem;
  }
  .customized-service-comment-detail{
    padding: 0 20px 26px;
    margin-top: -15px;
  }
  .prome-case-inner-image{
    width: 50%;
  }
  .prome-case-inner-image p{
    font-size: 1.3rem;
  }
  .prome-service-case:not(:first-child){
    margin-top: 40px;
  }
  .service-contact-btn a{
    text-decoration: none !important;
    padding: 25px 0;
    font-size: 1.8rem;
  }
  .prome-corporations-service-wrap{
    padding-top: 100px;
  }
  .prome-corporations-service-wrap .prome-customized-service-inner{
    max-width: 1000px;
    margin: 0 auto;
  }
  .prome-service-contact-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    max-width: 1000px;
    margin: 40px auto 0;
  }
  .service-contact-text{
    font-size: 1.7rem;
    width: 45%;
  }
  .prome-service-contact-wrap .prome-contact-btn{
    margin-top: 0;
  }
  .prome-purchase-link-inner{
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
    padding: 230px 0 140px;
  }
  .prome-purchase-text{
    font-size: 2.4rem;
    line-height: 2.2;
  }
  .prome-purchase-btn-wrap{
    margin-top: 45px;
    display: flex;
    gap: 60px;
  }
  .prome-purchase-btn-wrap a:not(:first-child){
    margin-top: 0;
  }
  .prome-purchase-image{
    margin-top: 140px;
  }
  .prome-purchase-image img{
    height: 620px;
    object-position: top;
  }

  .prome-footer{
    padding: 130px 0 0 0;
    margin-top: 0;
    position: relative;
  }
  .prome-footer-inner{
    max-width: 1200px;
    margin: 0 auto 70px;
  }
  .prome-footer-link-wrap{
    display: flex;
    justify-content: space-between;
  }
  .prome-footer-image{
    text-align: left;
  }
  .prome-footer-image img{
    width: 60%;
  }
  .prome-footermenu-listwrap{
    margin-top: 0;
    display: flex;
    gap: 106px;
    width: 40%;
  }
  .prome-footermenu-list{
    width: 50%;
    white-space: nowrap;
  }
  .english-label{
    font-size: 1.2rem;
  }
  .japanese-label{
    font-size: 1.4rem;
  }
  .menu-item-link:not(:first-child){
    margin-top: 40px;
  }
  .prome-footer-detailwrap{
    margin-top: 78px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
  .prome-footer-address{
    text-align: left;
    font-size: 1.2rem;
  }
  .prome-footer-tel-wrap{
    font-size: 1.2rem;
    margin-left: 0;
    justify-content: left;
  }
  .prome-footer-btn-wrap{
    margin-top: 23px;
    display: flex;
    gap: 20px;
    max-width: 540px;
  }
  .prome-footer-btn-wrap a:not(:first-child){
    margin-top: 0;
  }
  .prome-footer-snslink-wrap{
    display: flex;
    gap: 43px;
    align-items: center;
  }
  .prome-footer-snslink{
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 44px;
  }
  .prome-footer-snslink img{
    width: 21px;
  }
  .prome-footer-snslink-wrap .prome-footer-line{
    margin-top: 27px;
    color: #924E94;
    font-size: 1.2rem;
    line-height: 1.5;
    display: flex !important;
    gap: 15px;
    justify-content: center;
  }
  .prome-footer-line img{
    width: 32px;
    object-fit: contain;
  }
  .prome-copyright{
    text-align: center;
    color: #BE95BF;
    text-align: center;
    margin: 0;
  }
}


/* プロメの想い */
.page_about-headline.t_icon-circle::before{
  padding-bottom: 10px;
  background-image: url(../images/omoi/blue-circle.png);
}

.about_scrollable-content-wrapper {
  position: absolute; /* 親要素（page_about）を基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* 縦方向のスクロールを有効にする */
  z-index: 1; /* 背景より前面に配置 */
  -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
}

.about_text-container{
  font-family: "Zen Old Mincho", sans-serif;
  opacity: 0;
  transform: translateY(30px); 
  transition: opacity 1s ease-out, transform 1s ease-out; 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  padding: 0 5%; 
  box-sizing: border-box; 
  text-align: center; 
  line-height: 2.2; 
  max-width: 700px; 
  margin-left: auto; 
  margin-right: auto; 
  color: #14578E; 
  /* scroll-snap-align: start; */
  text-align: left;
}

.about_text-container.text-fade-in{
  opacity: 1;
  transform: translateY(0); 
}
.page_about-headline{
  font-size: 2rem; 
  margin-bottom: 0; 
  writing-mode: vertical-lr;
  color: #4084BB; 
  letter-spacing: 0.64em;
}
.about_text-container p{
  width: 100%;
  font-size: 1.4rem;
  margin-bottom: 50px; 
}
#text-block-8 p:last-child {
  font-size: 1.9rem; 
  font-weight: 600; 
  color: #14578E; 
}
.page_about .t_large-link-wrap{
  margin: 0 5% 100px;
}
.page_about #footer{
  position: relative;
}
@media screen and (min-width: 768px) {
  .page_about-headline.t_icon-circle::before{
    vertical-align: baseline;
    padding-bottom: 25px;
  }
  .about_text-container{
    line-height: 2.2; 
    max-width: 100%; 
    margin: 0 auto;
    text-align: center;
  }
  .page_about-headline{
    font-size: 3rem; 
    writing-mode: vertical-lr;
    color: #4084BB; 
  }
  /* pタグのスタイル */
  .about_text-container p{
    font-size: 1.8rem;
    margin-bottom: 70px; 
  }
  /* 最後のpタグのスタイル */
  #text-block-8 p:last-child {
    font-size: 3rem;
  }
  .page_about .t_large-link-wrap{
    margin: 0 0 200px;
  }
}


.bl-bggradation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* 背景要素として一番下に配置 */
}

/* グラデーション要素のリストコンテナ */
.bl-bggradation_gradetions {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 各グラデーション要素の親コンテナ */
.bl-bggradation_gradetions_item {
  position: relative;
}

/* 動く丸いグラデーション要素 */
.bl-round {
  position: absolute; 
  border-radius: 50%; 
  filter: blur(90px); 
  opacity: 0.5; 
  transform: translate(-50%, -50%); 
  will-change: transform; 
}

/* 各 .bl-round 要素のアニメーションと初期位置、サイズ、色を設定 */
/* 色のパレット: #DEEFE7, #D2E6E3, #DBE9F0, #C7DFEB, #FFFFFF, #B3CEE4, #8CB5D6, #4084BB, #FAF8F2 */

/* 1つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(1) .bl-round {
  background-color: #DEEFE7;
  width: 400px; height: 400px;
  top: 10%; left: 15%; /* 左上よりに配置 */
  animation: moveCircle1 28s ease-in-out infinite alternate; 
  z-index: 5; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(1) .bl-round {
    width: 700px; height: 700px;
  }
}
@keyframes moveCircle1 {
  0% { transform: translate(20%, 70%) scale(1); }
  30% { transform: translate(-80%, 30%) scale(1.2); } 
  60% { transform: translate(10%, 20%) scale(0.9); } /* 下方向への動きを強化 */
  100% { transform: translate(20%, 70%) scale(1.1); } /* 最終位置をより下に */
}

/* 2つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(2) .bl-round {
  background-color: #D2E6E3;
  width: 400px; height: 400px; 
  top: 70%; right: 10%; /* 右下よりに配置 */
  animation: moveCircle2 25s ease-in-out infinite alternate-reverse; 
  z-index: 10; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(2) .bl-round{
    width: 800px; height: 800px; 
  }
}
@keyframes moveCircle2 {
  0% { transform: translate(-50%, -50%) scale(0.9); }
  40% { transform: translate(0%, -10%) scale(1.1); } /* 下から少し上へ、またはそのまま */
  80% { transform: translate(-80%, 80%) scale(0.95); } /* 下方向への動きを強化 */
  100% { transform: translate(30%, 60%) scale(0.8); } /* 最終位置をより下に */
}

/* 3つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(3) .bl-round {
  background-color: #DBE9F0;
  width: 350px; height: 350px; 
  top: 25%; left: 80%; /* 右上よりに配置 */
  animation: moveCircle3 34s ease-in-out infinite alternate; 
  z-index: 2; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(3) .bl-round {
    width: 700px; height: 700px; 
  }
}
@keyframes moveCircle3 {
  0% { transform: translate(-50%, -50%) scale(1.1); }
  20% { transform: translate(-90%, 20%) scale(0.9); } 
  70% { transform: translate(-10%, 30%) scale(1.05); } /* 下方向への動きを強化 */
  100% { transform: translate(-30%, 40%) scale(1.0); } /* 最終位置を中央より下に */
}

/* 4つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(4) .bl-round {
  background-color: #C7DFEB;
  width: 350px; height: 350px; 
  top: 85%; left: 40%; /* 下部中央よりに配置 */
  animation: moveCircle4 32s ease-in-out infinite alternate-reverse; 
  z-index: 2; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(4) .bl-round {
    width: 550px; height: 550px; 
  }
}
@keyframes moveCircle4 {
  0% { transform: translate(-50%, -50%) scale(1.0); }
  35% { transform: translate(-20%, 0%) scale(1.2); } /* 下の方に留まるように */
  70% { transform: translate(-70%, 30%) scale(0.9); } 
  100% { transform: translate(10%, 50%) scale(1.1); } /* 最終位置をより下に */
}

/* 5つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(5) .bl-round {
  background-color: #FFFFFF;
  width: 350px; height: 350px; 
  top: 80%; left: 50%; /* 中央に配置 */
  animation: moveCircle5 26s ease-in-out infinite alternate; 
  z-index: 5; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(5) .bl-round {
    width: 550px; height: 550px; 
  }
}
@keyframes moveCircle5 {
  0% { transform: translate(50%, 70%) scale(0.8); }   /* 画面の真下から開始 */
  45% { transform: translate(-60%, -20%) scale(1.1); } 
  90% { transform: translate(20%, 80%) scale(0.85); } 
  100% { transform: translate(-50%, 40%) scale(0.9); } /* 最終位置をより中央寄りの下へ */
}

/* 6つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(6) .bl-round {
  background-color: #B3CEE4;
  width: 300px; height: 300px; 
  top: 90%; right: 0%; /* 右上よりに配置 */
  animation: moveCircle6 30s ease-in-out infinite alternate-reverse; 
  z-index: 2; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(6) .bl-round {
    width: 600px; height: 600px;  
  }
}
@keyframes moveCircle6 {
  0% { transform: translate(0%, 0%) scale(1.1); }
  25% { transform: translate(-80%, 30%) scale(0.9); } 
  65% { transform: translate(-10%, 20%) scale(1.15); } /* 下方向への動きを強化 */
  100% { transform: translate(40%, 30%) scale(1.0); } /* 最終位置をより中央よりの下へ */
}

/* 7つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(7) .bl-round {
  background-color: #8CB5D6;
  width: 250px; height: 250px; 
  top: 90%; left: 0%; /* 左下よりに配置 */
  animation: moveCircle7 27s ease-in-out infinite alternate; 
  z-index: 2; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(7) .bl-round {
    width: 500px; height: 500px;  
  }
}
@keyframes moveCircle7 {
  0% { transform: translate(0%, 0%) scale(0.9); }
  30% { transform: translate(30%, 0%) scale(1.05); } /* 上がりすぎないように調整 */
  70% { transform: translate(-60%, 20%) scale(1.1); } 
  100% { transform: translate(-20%, 60%) scale(1.0); } /* 最終位置をより下へ */
}

/* 8つ目の丸 (濃い青) */
.bl-bggradation_gradetions_item:nth-child(8) .bl-round {
  background-color: #4084BB; 
  width: 400px; height: 400px;
  top: 60%; right: 0; /* 左下よりに配置 */
  animation: moveCircle8 30s ease-in-out infinite alternate-reverse; 
  z-index: 1; /* 重なりを一番下にする（ベース背景よりは手前） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(8) .bl-round {
    width: 800px; height: 800px;
  }
}
@keyframes moveCircle8 {
  0% { transform: translate(20%, 80%) scale(1); }
  30% { transform: translate(10%, 40%) scale(0.9); } 
  70% { transform: translate(-80%, 100%) scale(1.1); } /* 下方向への動きを強化 */
  100% { transform: translate(30%, 80%) scale(0.9); } /* 最終位置をより下へ */
}

/* 9つ目の丸 */
.bl-bggradation_gradetions_item:nth-child(9) .bl-round {
  background-color: #FAF8F2; 
  width: 300px; height: 300px;
  top: 30%; left: 15%; /* 右上よりに配置 */
  animation: moveCircle9 29s ease-in-out infinite alternate; 
  z-index: 3; /* 他の丸より手前（濃い青以外） */
}
@media screen and (min-width: 768px) {
  .bl-bggradation_gradetions_item:nth-child(9) .bl-round {
      width: 600px; height: 600px;
  }
}
@keyframes moveCircle9 {
  0% { transform: translate(70%, 20%) scale(0.85); }
  40% { transform: translate(-70%, 10%) scale(1.1); }
  80% { transform: translate(20%, 30%) scale(0.95); } /* 下方向への動きを強化 */
  100% { transform: translate(-10%, 40%) scale(1.0); } /* 最終位置をより中央寄りの下へ */
}

/* ノイズ効果 */
/* .bl-bggradation_noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px); 
  background-size: 2px 2px; 
  opacity: 0.15; 
  pointer-events: none; 
  z-index: 10; 
} */