/* 自由エリア編集のCSS
---------------------------------------------*/
.pc {display: none; }
.wdp50, .wdp60, .wdp70, .wdp80, .wdp90 {width: 100%;} 
.wdps100 { width: 100%; } 
.wdps80 { width: 80%; }
.wdps33 { width: 60%; }
.mg0a {margin: 0 auto; }
.mgb30 { margin-bottom: 30px!important;}
.mgb60 { margin-bottom: 10%!important;}
.mgb20sp { margin-bottom: 20%!important;}
figure {text-align: center; font-size:85%; margin-inline-start: 0px; margin-inline-end: 0px;}
li a { transition: 1.0s ;}
li a:hover {opacity:0.7; transition: 1.0s ;}
a { text-decoration: none; }
.ind2 {padding-left:2em;}
.dot-text { text-emphasis: filled; -webkit-text-emphasis: filled;}

/***************************************************
記事タイトル装飾
***************************************************/
/* 大見出し青(h2) */
.ti_beta_h2 { margin: 0px 0px 20px 0px; padding: 2% 0px; background: #345b83; }
h2.h2_beta { margin: 0px; padding: 0; font-size: 160%; text-align: center; color: #ffee00; }

/* 大見出し青(h2) */
.ti_b_h2 {margin: 0px 0px 10px 0px;padding: 7px 0px;background: url(../../../core_sys/images/sys/smartphone/con_h2_ti_bg_b.gif) left bottom repeat-x;}
h2.h2_b {margin:0px;padding: 5px 0px 5px 22px;font-size:120%;color:#666;background: url(../../../core_sys/images/sys/smartphone/h2_ti_bg_b.gif) 10px center no-repeat;}

/* 大見出し赤(h2) */
.ti_r_h2 {margin: 0px 0px 10px 0px;padding: 7px 0px;background: url(../../../core_sys/images/sys/smartphone/con_h2_ti_bg_r.gif) left bottom repeat-x;}
h2.h2_r {margin:0px;padding: 5px 0px 5px 22px;font-size:120%;color:#666;background: url(../../../core_sys/images/sys/smartphone/h2_ti_bg_r.gif) 10px center no-repeat;}

/* 大見出し緑(h2) */
.ti_g_h2 {margin: 0px 0px 10px 0px;padding: 7px 0px;background: url(../../../core_sys/images/sys/smartphone/con_h2_ti_bg_g.gif) left bottom repeat-x;}
h2.h2_g {margin:0px;padding: 5px 0px 5px 22px;font-size:120%;color:#666;background: url(../../../core_sys/images/sys/smartphone/h2_ti_bg_g.gif) 10px center no-repeat;}

/* 大見出し黄(h2) */
.ti_o_h2 {margin: 0px 0px 10px 0px;padding: 7px 0px;background: url(../../../core_sys/images/sys/smartphone/con_h2_ti_bg_o.gif) left bottom repeat-x;}
h2.h2_o {margin:0px;padding: 5px 0px 5px 22px;font-size:120%;color:#666;background: url(../../../core_sys/images/sys/smartphone/h2_ti_bg_o.gif) 10px center no-repeat;}

/* 大見出し黒(h2) */
.ti_bk_h2 {margin: 0px 0px 10px 0px;padding: 7px 0px;background: url(../../../core_sys/images/sys/smartphone/con_h2_ti_bg_bk.gif) left bottom repeat-x;}
h2.h2_bk {margin:0px;padding: 5px 0px 5px 22px;font-size:120%;color:#666;background: url(../../../core_sys/images/sys/smartphone/h2_ti_bg_bk.gif) 10px center no-repeat;}

/* 中見出し青(h3) */
h3.ti_b_h3 {margin: 10px 0px;padding: 4px 0px 4px 10px;color:#FFF;background:#0b68b1;}

/* 中見出し赤(h3) */
h3.ti_r_h3 {margin: 10px 0px;padding: 4px 0px 4px 10px;color:#FFF;background:#b70d0d;}

/* 中見出し緑(h3) */
h3.ti_g_h3 {margin: 10px 0px;padding: 4px 0px 4px 10px;color:#FFF;background:#129970;}

/* 中見出し黄(h3) */
h3.ti_o_h3 {margin: 10px 0px;padding: 4px 0px 4px 10px;color:#FFF;background:#e48b00;}

/* 中見出し黒(h3) */
h3.ti_bk_h3 {margin: 10px 0px;padding: 4px 0px 4px 10px;color:#FFF;background:#525252;}

/* 小見出し青(h4) */
h4.ti_b_h4 {margin: 10px 0px;padding: 5px 0px 5px 4px;color:#0b68b1;border-bottom: 3px solid #0b68b1;}

/* 小見出し赤(h4) */
h4.ti_r_h4 {margin: 10px 0px;padding: 5px 0px 5px 4px;color:#666;border-bottom: 3px solid #b70d0d;}

/* 小見出し緑(h4) */
h4.ti_g_h4 {margin: 10px 0px;padding: 5px 0px 5px 4px;color:#666;border-bottom: 3px solid #129970;}

/* 小見出し黄(h4) */
h4.ti_o_h4 {margin: 10px 0px;padding: 5px 0px 5px 4px;color:#666;border-bottom: 3px solid #e48b00;}

/* 小見出し黒(h4) */
h4.ti_bk_h4 {margin: 10px 0px;padding: 5px 0px 5px 4px;color:#666;border-bottom: 3px solid #525252;}

p.h_no {margin:0px;padding:0px;}

/***************************************************
トップへボタン
***************************************************/
/* ボタンのスタイル */
#page-top {
  /* buttonタグのリセットCSS */
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;

  /* ボタンの装飾 */
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #115582;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 矢印のスタイル */
#page-top::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-bottom: -6px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(-45deg);
}

/* ホバー時のスタイル */
#page-top:hover {
  transform: scale(1.1);
}

/***************************************************
CT img
***************************************************/
#ct_img img { width: 100%; height: 12rem; object-fit: cover;  }
#ct_img_product img { width: 100%; height: 20rem; object-fit: cover;  }


/***************************************************
ヘッダーの後
***************************************************/
#ext_area_01 { padding-top:75px!important; }

/***************************************************
YouTube
***************************************************/
.main_img {
  max-width: 100%;
  margin: 0 auto;
  background: #182744;
}
.youtube-top{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube-top iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/***************************************************
contents
***************************************************/
ul.contents_box { margin: 4% 0; }
ul.contents_box li { background: #fff; border-radius: 6px; text-align: center; margin: 4% 0;  padding: 4% 2%;}
ul.contents_box li h2 {color:#345b83; font-size:130%; margin-bottom: 10px; text-align: center; }
ul.contents_box li p {font-size:120% line-height: 1.9; color:#345b83; margin: 30px 0;}
ul.contents_box li .btn a { display: block; width: 70%; background: #666; margin: 10px auto; padding: 10px; font-size: 100%; font-weight: bold;text-decoration: none;}
ul.contents_box li .btn a:hover {background: #ff0;}

ul.contents_box li > ul.content_inner { display: flex;  flex-wrap: wrap; width: 90%; margin: 0 auto;}
ul.contents_box li > ul.content_inner li.txt {width: 100%; }
ul.contents_box li > ul.content_inner li.figure {width: 60%; margin: 0 auto;}
ul.contents_box li > ul.content_inner2 li.txt {width: 55%;}
ul.contents_box li > ul.content_inner2 li.figure {width: 40%;}


ul.entry_login_brn-s { display:flex; justify-content:space-around;}
ul.entry_login_brn-s li { width: 100%; }
ul.entry_login_brn-s li a {
  padding: 1em 0.5em;
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size:100%;
  border-radius: 3px;
  text-align:center;
}
ul.entry_login_brn-s li a.sign-up {color:#ff0; background: #345b83;}
ul.entry_login_brn-s li a.login {color:#345b83; background: #ff0;}
ul.entry_login_brn-s li a:hover { opacity: 0.7;}

/*キャラバン*/
.caravan {width: 100%; margin: 4% auto;}
.caravan img { width: 100%; height: 150px; object-fit: cover; }

/*会員限定サイトバナー*/
.member_bnr {margin: 4% auto; background: #254e8c; color: #fff; padding: 2% 6%;  border-radius: 6px;}
.member_bnr h2 {color: #fff; font-size: 160%; margin-bottom: 10px; text-align: center;}
.member_bnr p { margin: 0 auto; }
.member_bnr .btn a { display: block; width: 60%; background: #666; margin: 10px auto; padding: 10px; text-decoration: none;}
.member_bnr .btn a:hover {background: #ff0;}
.txtline {text-decoration: underline!important;}

/*その他ボタン */
ul.other_btn {display: flex; justify-content:space-around; flex-wrap: wrap; margin: 20px 0;}
ul.other_btn li {  width: 45%; }
ul.other_btn li a { display: flex; justify-content: center; align-items: center; background: #ff0; text-decoration: none; font-size: 100%; font-weight: bold; padding: 30% 0; border-radius: 6px; }
ul.other_btn li a:hover { background-color: #345b83; color:#fff; }
ul.other_btn li.btn_contact { width: 95%; margin-top:4%;}
ul.other_btn li.btn_contact a { font-size: 110%; text-align: center; padding: 9.5% 4%; }
ul.other_btn li.btn_contact.g100 a {display: block;}

/***************************************************
会員登録・ログインボタン（トップとGiomer 会員サイトついて）
***************************************************/
ul.entry_login_brn { width: 100%; margin: 2% auto; display:flex; list-style:none; justify-content: space-around;}
ul.entry_login_brn li {display: flex; justify-content: center; width: 100%; margin: 0 2%;}
ul.entry_login_brn li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.8em;
  color:#ff0;
  background: #345b83;
  text-decoration: none;
  font-weight: bold;
  font-size:110%;
  border-radius: 3px;
  }
ul.entry_login_brn li a.btn-sign-up:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: -3px 10px 0 0;
  background: url("../../../core_sys/images/main/icon_member.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
ul.entry_login_brn li a.btn-login:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: -3px 10px 0 0;
  background: url("../../../core_sys/images/main/icon_login.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
ul.entry_login_brn li a:hover {
  opacity: 0.7;
}

/***************************************************
Youtube
***************************************************/
.youtube{
  position: relative;
  margin: 2% auto;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/***************************************************
Giomer・S-PRG技術について
***************************************************/
ul.about_btn {display: flex; justify-content:space-around; margin: 3% 0!important; }
ul.about_btn li {  width: 30%; display: flex; }
ul.about_btn li a { display: flex; justify-content: center; align-items: center; background: #345b83; color: #ff0; font-size: 100%; font-weight: bold; padding: 8%; border-radius: 6px; width: 100%; text-align: center; }

/*バイオアクティブな３つの特長
----------------------------------------------- */
ul.bioactive {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.bioactive li.item { padding: 2%; border:1px solid #6998d3; border-radius: 8px; margin-bottom: 2%; line-height: 1.7;}
ul.bioactive_inner {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.bioactive_inner li { width: 35%; padding: 2%;  line-height: 1.7;}

/***************************************************
Giomer 製品情報
***************************************************/
ul.product_navi {display: flex; flex-wrap: wrap; justify-content: space-between; }
ul.product_navi li { width: 15%; border:1px solid #333; background: #fff; margin-bottom: 10px; line-height: 1.7; text-align: center; }
ul.product_navi li a {display: block; color: #333; font-size: 100%; padding: 2% 20%; }
ul.product_navi li a:hover {background: #333; color: #fff;}

ul.product_box { display: flex; flex-wrap: wrap; justify-content: space-around;}
ul.product_box li {width: 48%; margin-bottom: 4%; }
ul.product_box li a:hover {opacity:0.7; transition: 1.0s ; }
ul.product_box li img {border:solid 1px #999;}

h3.p_ttl{color:#333; text-align:left; font-size:140%; margin-bottom:13px; border-bottom: 1px solid #666;}
h3.p_ttl span { display:inline-block; font-size:76%; font-weight: normal; vertical-align:text-top;}

.products_name { color:#333; font-size:100%; font-weight: 600;}
.products_name span { display: block; font-size:70%; font-weight: normal;}

/*モーダル
---------------------------------------------*/
#modal_box .modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #FFF;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    transition: margin-top 0.3s ease, height 0.3s ease;
    width:90%;
    height: 18em;
    border-radius:10px; /* CSS3 */
    -webkit-border-radius:10px; /* Safari,Google Chrome */
    -moz-border-radius:10px;/* Firefox */
    display:none; 
    z-index:9999; 
    text-align:center; 
}
#modal_box .modal_box{ padding: 15px;}
#modal_box .modal_tit {
    padding: 3%;
    font-weight: bold;
    font-size: 110%;
    color: #FFF;
    background: #999;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#modal_box .come { padding: 4% 0 0 0; font-size: 80%;}
#modal_box ul.modal_btn { margin: 4% auto 0; width: 80%;  padding: 0; box-sizing: border-box;}
#modal_box ul.modal_btn li { float: left; width: 49%; list-style: none;}
#modal_box ul.modal_btn li+li {  margin-left: 2%;}
#modal_box ul.modal_btn li a {
    display: block;
    width: 100%;
    padding: 10%;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#modal_box ul.modal_btn li:nth-child(1) a {  background: #4DA5DE;}
#modal_box ul.modal_btn li:nth-child(2) a {  background: #999;}

/***************************************************
Giomer Q&A
***************************************************/
ul.QA_top_btn { display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.QA_top_btn li { width: 45%; border-radius:6px; background: #ff0; margin-bottom: 10px; line-height: 1.7; text-align: center; }
ul.QA_top_btn li a {display: block; font-weight: bold; color: #345b83; font-size: 120%; padding: 15px; }
ul.QA_top_btn li a:hover {background: #345b83; color: #ff0;}

h2.QA_ttl {font-size: 140%; font-weight: bold; color: #345b83; padding: 5px; border-bottom: 1px solid #345b83; border-top: 1px solid #345b83; text-align: center;}
h3.QA_ttl {font-size: 130%; font-weight: bold; color: #333; padding: 5px; border-bottom: 1px solid #345b83; text-align: center;}

.QA_about {background: #ccd8e2; padding: 2%;}

/* ---------- アコーディオン内---------- */
div.QA {}
div.QA dt {
  background: #fff;
  color: #333;
  border: 2px solid #ccd8e2;
  border-radius: 6px;
  padding: 2% 12% 2% 2%;
  margin: 4% 0;
  position: relative;
  cursor: pointer;
}
div.QA dt span {font-size: 130%; font-weight: bold; margin-right: 1%;}
div.QA dt:before {
  content: "＋";
  position: absolute;
  right: 20px;
  font-size: 160%;
  top:8px;
}
div.QA dd {
  display: none;
  padding: 0 2% 6%;
  margin: 0
}
div.QA dd span.answer {
    font-size: 160%;
    color: #c84646;
    margin-right: 0.7em;
    display: inline-block;
    margin-left: -1.4em;
}
div.QA dd span {color: #c84646;font-size: 100%; font-weight: bold;}
div.QA dd span.f160 {font-size: 160%; }

/***************************************************
Giomer セミナーアーカイブ
***************************************************/
/* ---------- アコーディオン内---------- */
div.sm_archive {}
div.sm_archive dt {
  background: #fff;
  color: #333;
  font-weight: bold;
  border: 2px solid #ccd8e2;
  border-radius: 6px;
  padding: 10px 15px 10px 25px;
  margin: 20px 0;
  position: relative;
  cursor: pointer;
}
div.sm_archive dt span { font-weight: normal; margin-right: 1%;}
div.sm_archive dt:before {
  content: "＋";
  position: absolute;
  right: 20px;
  font-size: 160%;
  top:2px;
}
div.sm_archive dd {
  display: none;
  padding: 0px 10px 30px 10px;
  margin: 0
}
div.sm_archive dd span.answer {
    font-size: 200%;
    color: #c84646;
    margin-right: 0.7em;
    display: inline-block;
    margin-left: -1.4em;
}
div.sm_archive dd span {color: #c84646;font-size: 100%; font-weight: bold;}
div.sm_archive dd span.f160 {font-size: 160%; }

/* ボックス */
 .sem_news {}
 .sem_news ul.sem_news_box {display: flex; flex-wrap: wrap; justify-content: space-between;}
 .sem_news ul.sem_news_box::after{ content:""; display: block; width:48%;} /* 最後左寄せ */
 .sem_news ul.sem_news_box li {width: 48%; border:1px solid #ccc; margin-bottom:1rem; padding: 0.5rem; box-sizing: border-box;}
 .sem_news ul.sem_news_box li img {width: 153px; height: 89px; object-fit: contain; background: #eee;}
 .sem_news ul.sem_news_box li p { line-height: 1.5; margin-top:0.3rem;}
 .sem_news ul.sem_news_box li p span {display: block; font-size:0.8rem; font-weight: bold;}
 .sem_news ul.sem_news_box li a {display: block; text-decoration: none; transition: 0.3s;}
 .sem_news ul.sem_news_box li a:hover {opacity: 0.75;}


/***************************************************
Giomer マスコット
***************************************************/
.bg_yellow {background: url("../../../core_sys/images/others/bg_giomerkun_y.jpg") repeat; border-radius: 20px; background-size: 30%; padding: 6%; }
.bg_blue {background: url("../../../core_sys/images/others/bg_giomerkun_b.jpg") repeat; border-radius: 20px; background-size: 30% ;padding: 6%; }
h3.g_ttl_yellow {border-top: 2px solid #ff8a00; border-bottom: 2px solid #ff8a00; background: #fff; text-align: center; font-size: 1.2rem; color:#ff8a00;  padding: 1% 0; margin-bottom: 4%;}
h3.g_ttl_blue {border-top: 2px solid #093766; border-bottom: 2px solid #093766; background: #fff; text-align: center; font-size: 1.2rem; color:#093766;  padding: 1% 0; margin-bottom: 4%;}

.btn { width: 100%; margin: 3% auto; transition: 0.3s ; }
.btn a { display: block; text-align: center; background: #345b83; text-decoration: none; color: #ff0!important; font-size: 120%; font-weight: bold; padding: 4% ; border-radius: 6px; }
.btn a:hover { background-color: #ff0; color: #345b83!important;}

/***************************************************
フォーム
***************************************************/
.main_txt { border: 1px solid #ccc; padding:4%!important; margin-botoom: 4%!important; }