@charset "utf-8";
/* CSS Document */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:rgb(140 14 21);
  --yellow:#FFFF00;
  --font-yumincho:'yu-mincho-pr6n', serif;
  --font-notosans:'noto-sans-cjk-jp', sans-serif;
  scroll-behavior:smooth;
}

html{
  background:url("https://hohju.com/system_panel/uploads/images/fv_bg.png") no-repeat center center;
  background-size:100% 100%;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}

.red{color:red}
.dark_red{color:var(--red)}
.bold{font-weight:bold}

/* spanにclass付けない運用のため、強調背景は「親（p/div）にclass」を付けて使う想定 */
.mark-yellow{background:linear-gradient(transparent 60%, #ff6 60%);font-weight:bold;}

.gap10{gap:10px}
.gap20{gap:20px}
.ft-10{font-size:10px}
.ft-11{font-size:11px}
.ft-12{font-size:12px}
.ft-13{font-size:13px}
.ft-14{font-size:14px}
.ft-15{font-size:15px}
.ft-16{font-size:16px}
.ft-17{font-size:17px}
.ft-18{font-size:18px}
.ft-19{font-size:19px}
.ft-20{font-size:20px}

.open-size-modal,#sizeModal .js-size-option{cursor:pointer;}

.yu-mincho-600{font-family:var(--font-yumincho);font-weight:600;font-style:normal}
.yu-mincho-400{font-family:var(--font-yumincho);font-weight:400;font-style:normal}
.kozuka-mincho-900{font-family:var(--font-yumincho);font-weight:900;font-style:normal}
.noto-sans-300{font-family:var(--font-notosans);font-weight:300;font-style:normal}
.noto-sans-400{font-family:var(--font-notosans);font-weight:400;font-style:normal}
.noto-sans-500{font-family:var(--font-notosans);font-weight:500;font-style:normal}
.noto-sans-700{font-family:var(--font-notosans);font-weight:700;font-style:normal}

body{width:100%;max-width:450px;margin:0 auto!important;display:block;overflow-x:hidden}
.wrapper{border:1px solid #f5efe6;box-shadow:1px 1px 16px 0px #ffcd84;overflow:hidden}
body img{width:100%;display:block}
.relative{position:relative}
.absolute{position:absolute}

.flex{display:flex}
.flex-start{display:flex;align-items:flex-start}
.row-reverse{flex-direction:row-reverse}

/* section01 */
#section01{
  position:relative;
  background:url("https://hohju.com/system_panel/uploads/images/fv-bg@4x.png") no-repeat center center;
  background-size:100% 180%;
}
.title01{margin-left:-6%}
.text01{color:var(--red);width:87%;margin:0 auto;text-align:center;font-size:13px}
.badges{width:90%;margin:0 auto}
.crystal_cover{width:80%;margin:0 auto}
.red_btn_cover{width:80%;margin:4px auto 0}
.gold_btn_cover{width:100%;margin:0 auto 0}
.nayami_cover{width:90%;margin:50px auto 0}

/* section03 */
.section03-bottom{background:rgb(250 225 199);position:relative;height:395px}
.section03-bottom-image{position:absolute;bottom:0;left:0;width:345px;padding-bottom:90px}
.section03-bottom-text{position:absolute;width:100%;bottom:0;left:0}

/* section04 */
#section04{
  background:url(https://hohju.com/system_panel/uploads/images/highquality_bg.png) no-repeat center center;
  background-size:100% 110%;
  padding-bottom:0px;
}
.section04_title{width:90%;margin:0 auto;margin-left:15px}
.good_point_wrapper{width:100%;margin:0 auto;position:relative;min-height:230px}
.good_point_left{width:80%;margin:40px 0 0 0}
.good_point_left_full{width:98%}
.good_point_left_full .good_point_title{width:80%}
.good_point_title{
  background:url(https://hohju.com/system_panel/uploads/images/gold_arrow_bg.png);
  background-size:100% 100%;
  padding:10px 0 6px 10px;
  font-size:17px;
  font-weight:bold;
}
.good_point_body{padding:20px 100px 10px 8px;background:#fff;font-size:13.5px}
.good_point_left_full .good_point_body{padding:16px 174px 20px 8px}
.good_point_image{width:170px;position:absolute;bottom:-30px;right:8px}
.good_point_image img{margin:10px}
.cv_now_wrapper{margin:70px auto 0px;background:#fff4e1}

/* section05 */
.somaticid_wrapper{
  background:url(https://hohju.com/system_panel/uploads/images/somaticid_bg.png) no-repeat center center;
  background-size:100% 100%;
  position:relative;
  background-repeat:no-repeat;
}
.section05_somaticid_bottom_crystal{position:absolute;bottom:-90px;right:-40px;width:280px;z-index:1}

.supervisor_bg{background:url(https://hohju.com/system_panel/uploads/images/supervisor_bg.png) no-repeat center center;background-size:100% 100%;padding:30px 0px}
.supervisor_wrapper{padding:10px 0px 30px;text-align:center}
.supervisor_title{
  font-size:36px;
  font-weight:bold;
  text-align:justify;
  padding:0 0 0 14px;
  color:#8B0000;
  margin-bottom:4px;
  font-family:var(--font-yumincho)
}
.supervisor_subtitle{
  font-size:20px;
  text-align:justify;
  font-weight:normal;
  padding:5px 0px 0px 20px;
  margin:0 0px 19px;
  font-family:var(--font-yumincho);
  border-radius:2px;
  background:linear-gradient(to right, #b60d22 75%, rgb(104 99 99 / 0%));
  color:white;
  width:92%;
}
.supervisor_description{
  font-size:16px;
  line-height:1.7;
  color:#333;
  text-align:justify;
  padding:0 15px;
  font-family:var(--font-yumincho);
  width:92%;
  margin:30px auto 20px;
}
.supervisor_box{
  border:2px solid #c08c8e;
  margin:9px 20px 5px;
  padding:15px 0px 25px;
  background:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
}
.supervisor_photo{width:290px;margin:0 auto 0px;display:block;border-radius:4px}
.supervisor_license{font-size:26px;color:#000;font-family:var(--font-yumincho)}
.supervisor_license_number{font-size:16px;color:#666;margin-bottom:14px;font-family:var(--font-notosans);line-height:1}
.supervisor_name{font-size:30px;font-weight:bold;margin-bottom:20px;font-family:var(--font-yumincho);margin-left:68px}
.supervisor_name span{font-size:14px} /* spanはclass無しなので要素指定でOK */
.supervisor_profile{
  font-size:14px;
  line-height:1.6;
  color:#333;
  text-align:left;
  padding:0px 18px;
  font-family:var(--font-notosans);
  letter-spacing:-0.1px;
}
.message_title{font-size:16px;font-weight:bold;color:#8B0000;margin-bottom:6px;font-family:var(--font-yumincho)}
.message_content{
  position:relative;
  background-image:url('https://hohju.com/system_panel/uploads/images/message_bg.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  padding:19px 28px 35px 25px;
  margin:0 12px;
  font-size:12px;
  line-height:1.7;
  color:#333;
  font-family:var(--font-yumincho);
  min-height:120px;
  align-items:center;
  justify-content:flex-start;
}

/* section06 */
#section06{background:url(https://hohju.com/system_panel/uploads/images/choose-with-confidence_bg_2.png) no-repeat center center;background-size:100% 100%;padding:10px 0 30px}
.section06-title{width:90%;margin-left:-12px}

.section06-medal-wrap{width:30%}
.section06-medal-wrap img{width:80%;margin:0 auto}

.microscope-man{width:46%}
.fullerene-product{width:43%}
.quality-certificate{width:43%}

.section06-item-flex{display:flex;margin:30px auto}
.appraisal-check-frame{width:74%;margin:0 auto}
.customer-graph{width:68%;margin:0 auto}

.section06-achievement-flex{display:flex;padding:50px 8px 8px 8px}
.section06-achievement-title{padding:5px;color:var(--red);font-family:var(--font-yumincho);font-size:23px}
.section06-achievement-description{padding:5px;font-size:16px}
.section06-archivement-right{width:70%}
.section06-ranking-description{padding:35px 25px 25px;font-size:17px;font-family:var(--font-notosans);line-height:1.7}

.text-with-icon{overflow:hidden;margin:10px}
.jewelry-icon{float:left;width:28px;height:auto;margin-right:8px}
.check-icon{float:left;width:28px;height:auto;margin-right:8px;margin-top:8px}
.magnifying-glass-icon{float:left;width:28px;height:auto;margin-right:8px;margin-bottom:0px}
.section06-01{margin-top:10px;line-height:25px}
.section06-02{margin-top:20px;line-height:25px}
.section06-03{margin-top:10px;line-height:25px}

.section06-flex{display:flex;width:94%;margin:0 auto}
.section06-flex-left{width:50%}
.section06-news-release{padding:5px;margin-top:100px}
.section06-flex-right{width:50%}

/* section07 */
#section07{background:#fff4e0;padding:10px 0 40px}
.section07-item{margin-bottom:20px}
.section07-title{width:70%;margin:40px auto 0px;margin-left:40px}
.section07-intro{
  padding:0 15px 13px;
  color:var(--red);
  font-size:18px;
  line-height:30px;
  font-family:var(--font-yumincho);
  margin:10px auto 20px
}
.section07-point-detail{
  padding:5px 15px;
  font-size:13px;
  letter-spacing:-0.3px;
  line-height:1.6
}
.section07-note{padding:0px 25px;font-size:13px;text-align:center}
.section07-title-flex{display:flex;align-items:center}
.section07-point-title{
  padding:5px 15px;
  color:var(--red);
  font-size:24px;
  font-weight:bold;
  font-family:var(--font-yumincho)
}
.section07-flex{display:flex}
.section07-item-img03{width:80%}
.medal-icon-00{width:93%;margin:0 auto 20px}
.medal-icon-01{width:30%}
.medal-icon-02{width:30%}
.medal-icon-03{width:30%}
.medal-icon-04{width:30%}
.medal-icon-05{width:30%}
.fullerene-white{width:60%;margin-left:auto;margin-top:-66px}
.fullerene-black{width:50%}
.comparison-list{width:97%;margin:35px auto 50px}
.red-button-07{width:100%}

/* section08 */
#section08{background:#fff4e0}
.section08-title{padding:5px 15px;font-family:var(--font-yumincho);color:var(--red);font-size:30px;text-align:center;line-height:1.4}
.section08-description{padding:5px 15px;font-size:16px;width:90%;margin:10px auto;font-family:var(--font-yumincho);line-height:1.4}
.pic_people_panel_cover{width:90%;margin:0 auto}

/* section10 */
#section10{background:url("https://hohju.com/system_panel/uploads/images/pic_bg_10.png") no-repeat center center;background-size:100% 100%;padding:10px 0 40px}
.section10-title{padding:5px 15px;font-family:var(--font-yumincho);color:var(--red);font-size:30px;text-align:center;line-height:1.4}
.section10-description{width:90%;margin:60px auto 20px;font-size:18px;font-family:var(--font-yumincho);line-height:1.7}

/* section11（ul/li廃止版） */
#section11{padding:40px 0px;background:#f8f8f8}
.section11-intro{
  width:90%;
  margin:0 auto;
  font-size:16px;
  line-height:1.5;
  font-family:var(--font-yumincho);
  text-align:center;
  color:var(--red)
}
.section11-list{width:90%;margin:20px auto 40px}
.section11-list-item{margin-bottom:12px}
.section11-list-text{
  font-family:var(--font-notosans);
  font-size:14px;
  line-height:1.6;
  color:#333;
}
.section11-cta{width:90%;margin:0 auto}

/* section12 */
#section12{background:#fff4e1;padding:30px 0 40px}
.section12-title{
  color:var(--red);
  text-align:center;
  font-size:28px;
  margin:40px auto 20px;
  line-height:1.4;
  font-family:var(--font-yumincho)
}
.section12-desc{width:92%;margin:0 auto}
.section12-item{width:94%;margin:30px auto}

/* section13（Q&A） */
#section13{background:rgb(230 230 230);padding-top:20px}
.qanda-desc{margin:30px auto;width:88%;font-size:16px;line-height:1.5}
.q_item{
  background:#fff;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:20px;
  padding:10px
}
.q_number{font-size:30px;color:#8c0e15}
.q_paragraph{font-size:16px;font-weight:bold;line-height:1.6;color:#8c0e15}
.a_item{display:flex;gap:30px;padding:14px 20px 40px;background:#fff}
.a_literal{color:var(--red);font-size:30px}
.a_paragraph{font-size:14px;line-height:1.8;color:#333;font-family:var(--font-notosans)}

/* section14 */
#section14{background:rgb(255 244 225);padding:30px 0 50px}
.section14-title{
  color:var(--red);
  text-align:center;
  font-size:28px;
  margin:40px auto 20px;
  line-height:1.4;
  font-family:var(--font-yumincho)
}
.size_intro_desc{line-height:1.4;font-size:18px;width:91%;margin:30px auto 0;font-family:var(--font-yumincho)}
.size_wrap{position:relative}
.size_image{margin-bottom:-120px;position:relative}
.size_image.small{width:80%;margin-left:auto;margin-right:auto}
.size_image.medium{width:90%;margin-left:auto;margin-right:auto}
.size_image.large{width:100%;margin-left:auto;margin-right:auto}
.size_desc_wrap{
  background:url(https://hohju.com/system_panel/uploads/images/double_gold_border.png) no-repeat center center;
  background-size:100% 100%;
  padding:10px 0;
  font-size:1.2em;
  font-weight:bold;
  width:96%;
  margin:0 auto
}
.size_desc{width:90%;margin:60px auto 30px;line-height:1.5}
.size_info{font-size:14px;line-height:1.5;margin-bottom:10px;font-family:var(--font-notosans);font-weight:400}
.size_price_line{font-family:var(--font-yumincho)}
.size_after_title{color:var(--red);text-align:center;font-size:27px;margin:40px auto 20px;line-height:1.4}
.medal_wrap{display:flex;flex-wrap:wrap;width:98%;margin:0 auto}
.medal_wrap img{width:50%}
.wbg{width:90%;margin:40px auto 10px}
.guarantee_3years_wrapper{margin-bottom:-50px}
.guarantee_desc{
  background:#fff;
  display:flex;
  border:solid 1px gray;
  width:98%;
  margin:0 auto;
  padding:60px 9px 23px;
  gap:10px;
}
.guarantee_left{width:60%}
.guarantee_right{width:40%}
.black_exclamation{float:left;width:44px}
.guarantee_desc_text{margin-top:30px}
.guarantee_text{font-size:13px;line-height:1.6;font-family:var(--font-notosans);margin-bottom:10px}
.purchase_method_wrapper{width:98%;margin:10px auto 30px}

.chooseSizeImageWrap{width:100%;padding:6px 0}
.chooseSizeImage{width:100%;display:none}

/* footer（footerタグ廃止→div.footer想定） */
.footer{display:flex;padding:6px;background:#fff;align-items:flex-start;gap:10px}
.footer-left{width:80%}
.footer-right{width:20%}
.footer-text{margin-bottom:6px;font-size:12px;font-family:var(--font-notosans)}
.footer-note{margin-top:6px;font-size:11px;color:#666;font-family:var(--font-notosans)}
.footer-link{margin-top:4px}
.footer-link a{color:#8c0e15;text-decoration:underline;font-size:12px;font-family:var(--font-notosans)}

/* modal */
.modal{
  display:none;
  position:fixed;
  z-index:9999;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgba(0,0,0,0.4);
}
.modal-content{
  background-color:#fff5e2;
  margin:15% auto;
  padding:20px;
  border:1px solid #888;
  width:100%;
  max-width:430px;
}
.modal-title{font-size:20px;font-weight:bold;line-height:1.6;padding-left:10px;color:var(--red);font-family:var(--font-yumincho)}
.modal-options{margin-top:10px}
.modal-option{
  width:100%;
  display:block;
  border:solid 1px var(--red);
  padding:10px;
  margin:10px auto;
  border-radius:6px;
  text-align:center;
  font-family:var(--font-yumincho);
  font-weight:bold;
  background:#fff;
}
.modal-option:hover{border:solid 3px var(--red)}
.size_title{font-size:16px;font-weight:bold;line-height:1.6;padding-left:10px}
.size_price{font-size:16px;font-weight:bold;line-height:1.6;padding-left:10px}
.modal-close{width:40px;height:40px;margin-left:auto;display:flex;align-items:center;justify-content:center}
.modal-close-text{font-size:28px;font-weight:bold;line-height:1;color:#666}
.modal-close:hover .modal-close-text{color:#000}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}

/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}

/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}

/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}

/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
}

/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}