@charset "utf-8";

/*----------------------------------------------------------
    Styles for keyvisual
----------------------------------------------------------*/
#kv { position:relative; background: #00769C; margin-bottom: 0; padding-top: 1.2rem; }
#kv img { display: block; }
#kv + section.cta { margin-top: -3px !important; padding-top: 0 !important; }
#kv.bg2{
    background: #F4F3F3;
    padding-bottom: 1px;
}
.kv_bg { background:url(../img/kv_bg.jpg) no-repeat; background-position: right bottom; background-size:cover; }
.kv_title { color:#fff; font-size:2.0rem; line-height:1.2; font-weight:bold; text-align:center; margin:0 0 1rem; }
.kv_content { position:relative; padding:1rem 1rem 1rem; }
.kv_content img{ width: 90%;}
.kv_logo { width:57.8%; text-align:left; margin:0 0 2.4rem; position:relative; left:-.3rem }
.kv_caption { color:#fff; font-size:1.8rem; font-weight:bold; line-height:1.2; margin:1rem 0 0; }
.kv_caption_year { font-size:2.4rem; }
.kv_sub-title { color: #007297; font-size:1.6rem; letter-spacing:.0.5rem; font-weight:bold; padding:0 0 1rem; text-align:center; background:#fff; }
.kv_os{ width: 25%; margin: 10px 0 10px }
.kv_os_txt{color:#fff; line-height: 1.3;  text-shadow:0 1px 0 #666;}

/*----------------------------------------------------------
    Styles for banner
----------------------------------------------------------*/
#bottom-bar {
  width: 100%;
  max-width: 640px;
  text-align: center;
  position: fixed;
  bottom: 0px;
  z-index: 10;
}
#bottom-bar.static {
position: static;
}
#bottom-bar img {
width: 100%;



/*----------------------------------------------------------
    Styles for banner
----------------------------------------------------------*/
#bottom-bar {
}


/*----------------------------------------------------------
    Free trial banner (above こんな経験はありませんか)
----------------------------------------------------------*/
.free-trial-banner { margin: 0; padding: 0 0 1.5rem; box-sizing: border-box; }
.free-trial-banner_inner {
  width: 100%;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 114, 151, 0.08);
  border: none;
  border-top: 1px solid rgba(0, 114, 151, 0.12);
  border-bottom: 1px solid rgba(0, 114, 151, 0.12);
}
.free-trial-banner_left {
  background: linear-gradient(135deg, #007297 0%, #005a75 100%);
  padding: 1.4rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.free-trial-banner_badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.free-trial-banner_badge-line1 { font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1.1; letter-spacing: 0.02em; }
.free-trial-banner_badge-line2 { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.1; }
.free-trial-banner_left-txt { flex: 1; }
.free-trial-banner_left-txt1 { margin: 0; font-size: 1.05rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); line-height: 1.3; }
.free-trial-banner_left-txt2 { margin: 0.25rem 0 0; font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: 0.02em; }
.free-trial-banner_right {
  background: #f8fafb;
  padding: 1.4rem 1.2rem;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.75rem;
}
.free-trial-banner_circle {
  flex: 1;
  max-width: 120px;
  min-height: 92px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  box-sizing: border-box;
  border: 1px solid rgba(0, 114, 151, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.free-trial-banner_circle-txt {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #333;
  text-align: center;
  font-weight: 500;
}

/*----------------------------------------------------------
    Styles for header buttons
----------------------------------------------------------*/
.upper .btn2 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background: #e7004f;
  padding: 0 15px;
  text-decoration: none;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 1;
}

.upper .btn2:hover {
  color: #fff;
  background: #dc0442;
  text-decoration: none;
}

.upper .btn {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #007297;
  font-size: 14px;
  font-weight: bold;
  background: #fff;
  padding: 0 15px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 1;
}

.upper .btn:hover {
  color: #fff;
  background: #007297;
  text-decoration: none;
}

/*----------------------------------------------------------
    Styles for .cta
----------------------------------------------------------*/
.cta_head { color:#fff; font-size:1.5rem; font-weight:bold; padding:.8rem 0; background:#007297; }
.cta_btn-area { padding: 1rem 0 1px !important; margin: 0 15px !important; }
.cta_btn-01 { margin:0 0 1rem; }


.cta_btn_wrap{
    padding-bottom: 1px;
    margin:0 15px;
}
.cta_btn_wrap .cta_btn-red { margin:20px 0; }
.cta_btn_wrap .cta_btn_note { margin:1rem 0 20px; }
.cta_btn-yellow{background: #FFDB00;
box-shadow: 2px 2px 0px #CABA29;
border-radius: 6px;color:#00769C;
font-weight: bold;
font-size: 18px;
display: block;
text-align: center;
padding:20px 5px 20px;
margin:20px 15px 20px;
position: relative;
line-height: 1;
}
.cta_btn-yellow i{color:#00769C;position: absolute;
right:10px;top:21px;}

.cta_btn-red{background:#e7004f;
box-shadow: 0 4px 8px rgba(176, 176, 176, 0.5);
border-radius: 12px;color:#fff;
font-weight: bold;
font-size: 17px;
display: block;
text-align: center;
padding:20px 50px 20px 20px;
margin:20px 0;
position: relative;
line-height: 1.4;
text-decoration: none;
transition: background-color 0.3s ease;
box-sizing:border-box;
}
.cta_btn-red:hover{background:#dc0442;}
.cta_btn-red i{color:#fff;position: absolute;
right:20px;top:50%;transform:translateY(-50%);font-size:20px;}
.cta_btn_note { font-size:0.8rem; color:#333; text-align:center; margin:1rem 15px 20px; padding:1.2rem; background:#fff; border:1px solid #ddd; border-radius:12px; line-height:1.6; box-sizing:border-box; }
.cta_btn-02 { margin:0; }
.cta_btn-02 .cta_btn-red { margin:20px 0; }
.cta_prices + .cta_btn-area .cta_btn-red { margin-top:0.5rem; margin-bottom:20px; }


/*----------------------------------------------------------
    Styles for #intro
----------------------------------------------------------*/
.intro_bg { background:#ebebeb; }
.intro_head-area { background:#474a4e; padding:1rem 0 0; }
.intro_head-h2 { color:#ffdb00; font-size:2.2rem; font-weight:bold; }
.intro_slanting { margin:0 0 1.8rem; }
.intro_trouble-01 { margin:0 0 1.8rem; }
.intro_trouble-02 { margin:0 0 1.8rem; }
.intro_list-01 { font-size:1.4rem; font-weight:bold; line-height:1.4; text-align:left; padding:0 0 1rem 2rem; margin:0 1.4rem 2rem 0; width:64%; border-bottom:thin solid #474a4e; float:left; }
.intro_list-02 { font-size:1.4rem; font-weight:bold; line-height:1.4; text-align:left; padding:0 2rem 1rem 0; width:64%; border-bottom:thin solid #474a4e; float:right; }
.intro_head-h3 { font-size:2.2rem; font-weight:bold; line-height:1.3; letter-spacing:.1rem; margin:0 0 2rem; }
.intoro_trouble-image01 { width:21.2%; float:left; margin:-1.8rem 0 0; }
.intoro_trouble-image02 { width:24.2%; float:left; margin:-1rem 0 0 .6rem; }
.intro_asked_question { background:url(../img/intro_img05.jpg) no-repeat 50% 0; background-size:cover; padding:4.4rem 0 4rem; }
.intro_asked_head01 { color:#fff; font-size:2rem; font-weight:bold; text-align:center; margin:0 auto 2rem; background:#999; width:5rem; height:5rem; line-height:5rem; border-radius:100px; font-family:Georgia, "Times New Roman", Times, serif; }
.intro_asked_head02 { color:#fff; font-size:2rem; font-weight:bold; text-align:center; margin:1rem auto ; background:#ec0044; width:5rem; height:5rem; line-height:5rem; border-radius:100px; font-family:Georgia, "Times New Roman", Times, serif; }
.intro_asked_copy { color:#fff; font-size:1.8rem; font-weight:bold; text-align:center; margin-bottom: 1rem; }
.intro_ans { padding:0rem 1.8rem 1rem; font-size:1.2rem; text-align: center;font-weight: bold;}
.intro_aseked { padding: 0 0 2rem;}
.intro_aseked_copy { line-height:2; }
.intro_asked_answer { color:#ec0044; font-size:2rem; font-weight:bold; text-align:center; line-height:1.4; margin:0 0 0.5rem; }
.intro_asked_caution { background:url(../img/intro_img09.png) repeat-y; background-size: 100%; padding:1rem 1.8rem; font-weight:bold; font-size:1.2rem; position:relative; line-height: 0; }
.intro_asked_caution_before { background:url(../img/intro_img08.png) no-repeat; content:""; display:block; height:3px; background-size: 100%; }
.intro_asked_caution_after { background:url(../img/intro_img10.png) no-repeat; content:""; display:block; height:1.5rem; background-size: 100%; padding-bottom: 3rem;}
.intro_asked_caution:after { background:url(../img/intro_img12.png) no-repeat; background-size:100%; content:''; display:block; height:2.2rem; position:absolute; bottom:-2.4rem; right:0; left:0; margin:0 auto; width: 13%; }

/*----------------------------------------------------------
    Styles for training
----------------------------------------------------------*/
.training_head { position:relative; }
.training_head .head { color:#fff; font-size:2.2rem; font-weight:bold; letter-spacing:.1rem; position:absolute; top:2rem; left:0; right:0; margin:0; }
.training_caption { position:relative; margin:0 0 1.4rem; }
.training_caption .caption { color:#fff; font-size:1.5rem; font-weight:bold; letter-spacing:0; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; line-height:1.3; width: 100%; text-align: center; }
.training_head-span01 { color:#ffdb00; font-size:2.8rem; }
.training_head-span02 { color:#ffdb00; font-size:2.2rem; }
.training_device { width:45.6%; margin:0 1.4rem 0 1.6rem; float:left; position:relative; }
.training_device-image { position:absolute; top: 3rem; left: .7rem; width: 90%; }
.training_head-h3 { margin:0 auto 2.4rem; width: 80% }
.training_head-h3 img { width: 100%; }
.training_head-h3jp {font-size:1.5rem; font-weight:bold; position:relative; line-height:1; color: #007297; margin: -20px auto 20px;}
.training_list { float:left; width:41.2%; }
.training_appli li { color:#fff; font-size:1.5rem; font-weight:bold; position:relative; line-height:1.2; }
.training_number01 { font-size:3.6rem; }
.training_number02 { font-size:2.8rem; }
.training_number03 { font-size:3.6rem; }
.training_appli li:first-child { padding:1.4rem 0 2rem; background:#007297 url(../img/training_img05.png) no-repeat right 50%; background-size:32.8%; margin:0 0 .8rem; }
.training_appli li:nth-child(2) { padding:1.4rem 0 2rem; background:#007297 url(../img/training_img06.png) no-repeat right 50%; background-size:32.8%; margin:0 0 .8rem; }
.training_appli li:nth-child(3) { padding:1.4rem 0 2rem; background:#007297 url(../img/training_img06.png) no-repeat right 50%; background-size:32.8%; }
.training_appli li:before { content:''; position:absolute; top:0; bottom:0; margin:auto; left:-.8rem; width: 0; height: 0; border-style: solid; border-width:1.2rem 1rem 1.2rem 0; border-color: transparent #007297 transparent transparent; }
.training_os{ width: 25%; margin: 10px auto; padding-top: 10px; }
.training_os_txt{text-align: center;}


/*----------------------------------------------------------
    Styles for #mypace
----------------------------------------------------------*/
.mypace_head { color:#fff; font-weight:bold; font-size:2.2rem; padding:4.8rem 0 4.6rem; background:url(../img/mypace_img01.jpg) no-repeat; background-size:100%; line-height:1.4; letter-spacing:.1rem; }
.mypace_head_span { font-size:1.5rem; }
.mypace_list { position:relative; }
.mypace_list li { font-size:1.5rem; font-weight:bold; line-height:1.3; padding:2rem 0 4rem; background:url(../img/mypace_img02.png) no-repeat; background-size:contain; width:43%; }
.mypace_list li:first-child { position:absolute; top:-1rem; left:0; right:0; margin:auto; }
.mypace_list li:nth-child(2) { position:absolute; top:4rem; left:-1rem; font-size:1.36rem; }
.mypace_list li:nth-child(3) { position:absolute; top:4rem; right:-1rem; }
.mypace_list_image01 { width:20%; margin:0 auto 1.2rem; }
.mypace_list_image03 { width:16%; margin:0.5rem auto 0.5rem; }
.mypace_list_image02 { width:18%; margin:0 auto 1.2rem; position: relative; left: -.5rem; }
.mypace_list_small { font-size:1.4rem; }

/*----------------------------------------------------------
    Styles for #why
----------------------------------------------------------*/
#why { padding:40px 0; }
#why .header { color:#007297; font-size:22px; font-weight:bold; text-align: center; border-bottom: 5px solid #007297; padding-bottom: 10px;}
.why_box {border: 5px solid #007297; padding: 0px; margin-top: 40px;}
.why_box_ttl {color:#007297; font-size:20px; font-weight:bold; text-align: left; background: #ffdb00; padding: 1.5rem ; line-height: 1.2;}
.why_box_reason{color: #fff; font-weight: bold; font-size: 1.5rem; background: #007297; border-radius: 20px; border:#007297;padding: 10px 20px; margin: 0px 20px 20px 0; vertical-align: top;display: inline-block;}
.why_box_inner {padding: 1.5rem; }
.why_box_inner_ttl{ font-size:1.6rem; font-weight:bold; text-align: left; color:#007297;}
.why_box_inner_txt{padding-top: 30px; font-size:1.3rem; text-align: left; line-height: 2;}
.txt_red{color:#ec0044; }
.why_box_inner_mb1 {margin-bottom: 2em;}

/*----------------------------------------------------------
    Styles for #shotrcut
----------------------------------------------------------*/
#shortcut figure { position:relative; }
.shortcut_title { background:#007297; padding:2.6rem 1rem 1.4rem; position:relative; overflow: hidden; }
.shortcut_head { color:#ffdb00; font-weight:bold; text-align:left; font-size:3rem; line-height:1.2; }
.shortcut_head_span { color:#fff; font-size:2.7rem; }
.shortcut_title_image { width:23.4%; position:absolute; top:.4rem; right:1rem; }
.shortcut_before { color:#fff; }
.shortcut_before_bg { background:#576466; padding:2.4rem 0; }
.shortcut_before_head { font-weight:bold; font-size:2.3rem; letter-spacing:.2rem; line-height:1.4; margin:0 0 1.4rem; }
.shortcut_before_notes { font-size:1.4rem; }
.shortcut_before_list-01 { width:30.6%; position:relative; float:left; margin:0 0 0 .6rem; }
.shortcut_before_list-02 { width:30.6%; position:absolute; left:0; right:0; margin:auto; }
.shortcut_before_list-03 { width:30.6%; position:relative; float:right; margin:0 .6rem 0 0; }
.shortcut_after_list-02 { width:30.6%; position:absolute; left:0; right:0; margin:auto; }
.shortcut_images { display:block; margin:0 0 .8rem; }
.shortcut_caption { font-weight:bold; font-size:1.6rem; }
.shortcut_before_list-02 .shortcut_caption { position:absolute; top:3.4rem; left:0; right:0; }
.shortcut_after { color:#fff; }
.shortcut_after_head img {width: 70%; margin-top: -5px;}.shortcut_after_bg { background:#007297 url(../img/shortcut_img05.jpg) no-repeat; background-size:contain; padding:7.4rem 0 2rem; }
.shortcut_footer:before { background:url(../img/shortcut_img07.png) no-repeat 50% 0; content:""; display:block; height:2.3rem; background-size: 100%; position: relative; }
.shortcut_after_head { font-size:2.2rem; font-weight:bold; line-height:1.4; margin:0 0 1rem; }
.shortcut_footer_bg { background:url(../img/shortcut_img08.jpg) no-repeat; background-size:cover; margin:-2.3rem 0 0; padding:5.6rem 0 1.6rem; }
.shortcut_footer_head { color:#fff; font-weight:bold; background:rgba(237,27,84,0.80); border:thin solid #fff; width:78.2%; margin:0 auto; padding:2rem 1rem; text-align:left; font-size: 1.7rem; line-height:1.8; }
.shortcut_before_head_span { font-size:2.2rem; }

/*----------------------------------------------------------
    Styles for #reason
----------------------------------------------------------*/
#reason:before { background:url(../img/reason_img01.png) no-repeat 50% 0; content:""; display:block; height:2rem; background-size: 100%; }
#reason:after { background:url(../img/reason_img12.png) no-repeat 50% 0; content:""; display:block; height:2rem; background-size: 100%; }
.reason_bg { background:url(../img/reason_img05.png) repeat-y; background-size:contain; padding:2.2rem 0 .6rem;  }
.reason_head { color:#fff; font-size:2.4rem; font-weight:bold; line-height:1.2; padding:1.8rem 0; background:#007297; }
.reason_block01 { margin:0 0 1.6rem; }
.reason_block01 p { font-weight:bold; text-align:center; }
.reason_list01 { width:27.8%; float:left; margin:0 0 0 1.4rem; }
.reason_list02 { width:27.8%; position:absolute; left:0; right:0; margin: auto; }
.reason_list03 { width:27.8%; float:right; margin:0 1.4rem 0 0; }
.reason_list_image { margin:0 0 .8rem; }
.reason_list_copy { font-size:1.4rem; line-height:1.3; }
.reason_list_number01 { font-size:2.4rem; }
.reason_list_number02 { font-size:1.9rem; }
.reason_list_number03 { font-size:2.6rem; }
.reason_number01 { font-size:3.4rem; }
.reason_number02 { font-size:2.4rem; }
.reason_number03 { font-size:3rem; }
.reason_icon { width:10%; }
.reason_image01 { width:87.5%; margin:0 auto 1rem; }
.reason_copy01 { font-size:1.4rem; padding:0 2rem; }
.reason_accordion { margin:0 0 2.4rem; }
.reason_text01 { font-size:1.6rem; }
.reason_notes { font-size:1.2rem; }
.reason_accordion-btn { color:#ffdb00; font-size:2rem; font-weight:bold; padding:0 0 0 4rem; margin:0 .4rem .8rem; text-align:left; height:6rem; line-height:6rem; }
.reason_accordion-btn.icon01 { background:#007297 url(../img/reason_img06.png) no-repeat 3% 50%; background-size:8%; }
.reason_accordion-btn.icon02 { background:#007297 url(../img/reason_img08.png) no-repeat 3% 50%; background-size:8%; }
.reason_accordion-btn.icon03 { background:#007297 url(../img/reason_img10.png) no-repeat 3% 50%; background-size:8%; }

/*----------------------------------------------------------
    Styles for #step
----------------------------------------------------------*/
.try_step1 { margin:0 0 1rem; }
.try_step2 { margin:0 0 2rem; }
.try_step3 { margin:0 0 2rem; }
.try_step1_block01 { position:relative; }
.try_step1_block02 { position:relative; }
.try_step1_block03 { position:relative; }
.try_text01 { color:#fff; font-size:1.5rem; font-family:Arial, Helvetica, sans-serif; position:absolute; top:0.5rem; left:1rem; }
.try_text02 { color:#fff; font-size:2rem; font-weight:bold; text-align:right; margin-right:1rem; }
.try_text03 { color:#fff; font-size:6rem; font-family:Arial, Helvetica, sans-serif; line-height:.7; position:absolute; right:.5rem; }
.try_head { color:#ffdb00; font-size:2.4rem; font-weight:bold; line-height:1.2; position:absolute; left:0; right:0; margin:auto; bottom:20px; }
.try_head_span { color:#fff; font-size:1.8rem; margin-bottom: 0; line-height: 1; }
.try_head img {width: 70%; margin-top: -5px;}
.try_head-h3-01 { color:#007297; font-size:2.3rem; font-weight:bold; text-align:left; margin:0 0 0 1.2rem; }
.try_head-h3-02 { color:#007297; font-size:2.3rem; font-weight:bold; text-align:left; margin:0.5rem 0 0 1.6rem; }
.try_txt01 { position:absolute; left:0; right:0; margin:auto; top:0; }
.try_txt02 { position:absolute; left:0; right:0; margin:auto; top:1.8rem; }
.try_iphone { position:absolute; top:0; left:0; width:53%; }
.try_mockup { position:relative; }
.try_screen-image { position:absolute; left:0; top:3.5rem; width:95%; }
.try_copy { font-size:1.4rem; background:rgba(255,255,255,0.90); border:.3rem solid #007297; padding:2rem; margin:-14rem 1rem 0; position:relative; }
.try_copy.last { margin:-10rem 1rem 0; }
.step_movie { margin:0 0 2.4rem; }
.step_movie_head { color:#fff; font-size:1.6rem; font-weight:bold; background:#007297; padding:1rem 0; }

/*----------------------------------------------------------
    Styles for #everyday
----------------------------------------------------------*/
.everyday_bg { background:#eee; border-bottom:.2rem solid #fff; position:relative; padding:2rem 0 4.5rem; }
.everyday_head { color:#007297; font-size:5rem; font-weight:bold; line-height:1.2; margin:0 0 1rem; }
.everyday_head_span01 { color:#ed1b54; font-size:2.6rem; }
.everyday_head_span02 { font-size:2.2rem; }
.everyday_image { padding:0 1.3rem; margin:0 0 1rem; }
.everyday_copy { font-size:1.4rem; padding:0 1.4rem; }
.everyday_bg:before { content:''; display:block; background:url(../img/everyday_bg01.png) no-repeat; background-size:cover; width:100%; height:1rem; position:absolute; top:1.6rem; }
.everyday_bg:after { content:''; display:block; background:url(../img/everyday_bg01.png) no-repeat; background-size:cover; width:100%; height:1rem; position:absolute; bottom:1.6rem; }

/*----------------------------------------------------------
    Styles for #native
----------------------------------------------------------*/
.native_bg { background:#d6e9f1; padding:2.6rem 0; }
.native_head { color:#007297; font-size:2.4rem; font-weight:bold; line-height:1.3; margin:0 0 1.3rem; }
.native_head_span { color:#ed2258; font-size:2.8rem; }
.native_head_h3 { color:#fff; font-size:1.8rem; font-weight:bold; line-height:1.3; background:#007297; padding:1.8rem 0 1.4rem; }
.native_head_h3_span { color:#007297; font-size:1.4rem; background:url(../img/native_img01.png) no-repeat 50% 0; background-size: cover; padding:.6rem; display:inline-block; margin:0 0 .6rem; }
.native_image { margin:0 0 1rem; }
.native_copy { font-size:1.4rem; padding:0 .8rem; }
.native_copy2 { font-size:1.2rem; padding:.8rem; border: .2em solid #ed2258; color:#ed2258; background-color: #fff; margin: 1em 0; font-weight: bold;}

/*----------------------------------------------------------
    Styles for #flashtraning
----------------------------------------------------------*/
.flashtraning_bg{padding:40px 0;}
.flashtraning_head { font-size:2rem;margin:0 0 30px;font-weight: bold;}
.flashtraning_head span{color:#ED1B54;}
.flashtraning_box_text{font-size: 16px;font-weight: bold;}
.flashtraning_box_text p{margin-bottom: 24px;}
.flashtraning_box_text span{color:#ED1B54;}
.flashtraning_image {margin-bottom: 20px; }

.flashtraning_txt {font-size: 1.4rem;}
.flashtraning_copy {margin-top: 30px; color:#909090; line-height:1.2;font-size: 1rem; }

/*----------------------------------------------------------
    Styles for #voice
----------------------------------------------------------*/
.voice_bg { background:#ececec; padding:0 0 2rem; }
.voice_inner { padding:0 .8rem; }

.voice_title_area { background:#00afaa; border:.8rem solid #0dbcb7; padding:1.4rem 0; margin:0 0 1rem; }
.voice_title_icon { width:13.75%; margin:0 auto .6rem; }
.voice_title { color:#fff; font-weight:bold; font-size:2.4rem; text-shadow:0 -1px 0 #000; line-height:1.3; }
.voice_title_span { color:#ffdb00; font-size:3rem; }
.voice_copy { font-size:1.3rem; text-align:left; box-sizing:border-box; border:.4rem solid #009894; padding:1rem; margin-bottom: 1rem; }
.voice_copy img {width: 9.1rem; margin: 0px 10px 10px 0; float: left; }
.voice_name { border-bottom: #FCDB00 .4rem solid; }
.voice_btn { position:relative; border-bottom:.4rem solid #009894; }
.voice_accordion { margin:0 0 .8rem; }

/*----------------------------------------------------------
    Styles for #rule
----------------------------------------------------------*/
.rule_title_area { background:#007297; padding:2rem 0 2rem; position:relative; z-index:2; margin-bottom: 2rem; }
.rule_title { color:#fff; font-size:2.8rem; font-weight:bold; text-align:left; text-shadow:0 -1px 0 #000; line-height:1.3; background:url(../img/rule_img01.png) no-repeat 1rem; background-size:14%; padding:0 0 0 7rem; }
.rule_title_span01 { color:#ffdb00; font-size:2rem; }
.rule_title_span02 { font-size:1.7rem; }
.rule_doctor { position:relative; margin:0 0 2.4rem; }
.rule_doctor_copy { color:#007297; font-weight:bold; padding:3rem 0 0 1rem; position:absolute; top:0; }
.rule_doctor_span01 { font-size:1.7rem; display:inline-block; margin:0 0 .8rem; }
.rule_doctor_span02 { font-size:1.3rem; font-weight:normal; }
.rule_doctor_span03 { font-size:2.7rem; }
.rule_doctor:before { content: ""; position: absolute; height: 4.8rem; width: 300%; background: #007297; top: -3.6rem; left: -100%; -webkit-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); }
.rule_list_block { padding:0 0 0 2rem; margin:0 0 2rem; }
.rule_list { color:#007297; font-size:1.6rem; font-weight:bold; text-align:left; margin:0 0 1.6rem; }
.rule_list:last-child { margin:0; }
.rule_list_number { font-size:2.6rem; }
.rule_head_h3 { color:#007297; font-size:1.8rem; font-weight:bold; border:.4rem solid #007297; padding:2.4rem 0; margin:0 1rem; position:relative; }
.rule_head_h3:before { content:''; display:block; background:url(../img/rule_img03.png) no-repeat; background-size:cover; height:11.4rem; width:.8rem; position: absolute; top: -.2rem; left: 0; }
.rule_head_h3:after { content:''; display:block; background:url(../img/rule_img04.png) no-repeat; background-size:cover; height:11.4rem; width:.8rem; position: absolute; top: -.2rem; right: -.01rem;}
.rule_block_bg { background:url(../img/rule_img05.jpg) no-repeat 50% 0; background-size:cover; padding:2rem 0 2.8rem; }
.rule_block_copy { text-align:center; font-size:1.6rem; margin:0 0 2.8rem; }
.rule_block_copy_span { color:#007297; font-size:1.8rem; font-weight:bold; }
.rule_block_graph { width:86.5%; margin:0 auto; }

/*----------------------------------------------------------
    Styles for #tokuten
----------------------------------------------------------*/
.tokuten_bg { background:#007297 url(../img/tokuten_bg.png); background-size:cover; padding:2rem 0 0; }
.tokuten_head { color:#fff; font-size:2.8rem; font-weight:bold; line-height:1.4; margin:0 0 1.4rem; }
.tokuten_head_span { color:#ffdb00; font-size:1.7rem; }
.tokuten_copy { color:#fff; font-size:1.6rem; font-weight:bold; padding:0 2.2rem; margin:0 0 2.4rem; }
.tokuten_caption { color:#fff; font-size:1rem; line-height: 1.2; padding:0 2.2rem; margin:0 0 2.4rem; }

/*----------------------------------------------------------
    Styles for last cta
----------------------------------------------------------*/
.cta.cta--last .cta_bg { padding-top:3.5rem; }
.cta_bg { background:#F4F3F3; padding:2rem 0; }
section.cta:first-of-type .cta_bg { padding-top: 0 !important; padding-bottom: 1rem !important; }
section.cta:first-of-type .cta_btn-area { padding-top: 0 !important; }
.cta.cta--first { margin-top: 0 !important; padding-top: 0 !important; }
.cta.cta--first .cta_bg { padding-top: 0 !important; padding-bottom: 1rem !important; border-top: 3px solid #ffdb00 !important; box-sizing: border-box !important; }
.cta.cta--first .cta_btn-area { padding-top: 0 !important; }
.cta_prices { background:#fff; border-radius:.3rem; margin:0.8rem 1.5rem 0.5rem; padding:0 0 1rem; }
.cta_prices_text01 { color:#fff; font-size:1.8rem; font-weight:bold; text-align:center; background:#007297; padding:.6rem 0; margin:0 1rem; border-top:.3rem solid #fff; border-left:.3rem solid #fff; border-right:.3rem solid #fff; position:relative; top:-2.4rem; }
.cta_prices_text02 { color:#007297; font-size:2rem; font-weight:bold; text-align:center; line-height:1; margin:-.6rem 0 0; }
.cta_prices_note { font-size:0.7rem; display:block; margin-top:0.1rem !important; margin-bottom:0.1rem !important; line-height:1.2 !important; padding:0 !important; }
.cta_prices_span01 { color:#ffdb00; font-size:2.4rem; }
.cta_price { color:#ec0044; font-size:4rem; }
.cta_last-title { color:#007297; font-size:2rem; font-weight:bold; }
.cta_last-title_span { font-size:2.6rem; }
.cta_prices_text01:after { content:''; width: 0; height: 0; border-style: solid; border-width:1rem 1rem 0 1rem; border-color:#007297 transparent transparent transparent; position:absolute; left:0; right:0; margin:auto; bottom:-.8rem; }

/*----------------------------------------------------------
    Styles for #plan-intro
----------------------------------------------------------*/
#plan-intro { background: linear-gradient(180deg, #e8f4f8 0%, #f0f8fa 100%); padding: 2.5rem 0; }
.plan-intro_bg { background: transparent; }
.plan-intro_header { text-align: left; margin-bottom: 1.5rem; padding: 0 1.5rem; }
.plan-intro_title { font-size: 4rem; font-weight: bold; color: #007297; line-height: 1; margin: 0; letter-spacing: -0.02em; }
.plan-intro_subtitle { font-size: 1.6rem; color: #007297; font-weight: bold; margin: 0.3rem 0 0; position: relative; display: inline-block; }
.plan-intro_subtitle:after { content: ''; position: absolute; bottom: -0.2rem; left: 0; right: 0; height: 0.3rem; background: #ffdb00; }
.plan-intro_table_wrap { padding: 0 1.5rem; max-width: 750px; margin: 0 auto; }
.plan-intro_table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0.6rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.plan-intro_table thead th { padding: 1.2rem 1.5rem; font-weight: bold; text-align: center; vertical-align: middle; }
.plan-intro_feature { background: transparent; color: #333; text-align: left; font-size: 1.3rem; padding-left: 1.5rem; }
.plan-intro_free { background: #f5f5f5; color: #333; font-size: 1.3rem; border-top-left-radius: 0.5rem; }
.plan-intro_paid { background: #ffdb00; color: #007297; font-size: 1.3rem; border-top-right-radius: 0.5rem; }
.plan-intro_price { font-size: 1rem; display: block; margin-top: 0.2rem; line-height: 1.2; }
.plan-intro_price_span { font-size: 1.2rem; font-weight: bold; }
.plan-intro_price_note { font-size: 0.85rem; display: block; margin-top: 0.15rem; }
.plan-intro_price_note_small { font-size: 0.7rem; display: block; margin-top: 0.15rem; }
.plan-intro_table tbody tr:nth-child(odd) { background: #fff; }
.plan-intro_table tbody tr:nth-child(even) { background: #fffef0; }
.plan-intro_table tbody td { padding: 1.2rem 1.5rem; text-align: center; font-size: 1.3rem; border-top: 1px solid #e0e0e0; vertical-align: middle; }
.plan-intro_table tbody td.plan-intro_feature { text-align: left; color: #333; padding-left: 1.5rem; }
.plan-intro_table tbody td.plan-intro_free { color: #666; }
.plan-intro_table tbody td.plan-intro_paid { color: #007297; font-weight: bold; }
.plan-pricing_wrap { margin-top: 2.5rem; padding: 0 1.5rem; }
.plan-pricing_title { font-size: 2.2rem; color: #007297; font-weight: bold; text-align: center; margin: 0 0 2rem; position: relative; display: inline-block; width: 100%; }
.plan-pricing_title:after { content: ''; position: absolute; bottom: -0.5rem; left: 50%; transform: translateX(-50%); width: 60%; height: 0.3rem; background: #ffdb00; }
.plan-pricing_cards { display: flex; flex-direction: column; gap: 1.5rem; max-width: 500px; margin: 0 auto; padding: 1rem 1rem 0; }
.plan-pricing_card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; }
.plan-pricing_card--recommended { border: 2px solid #ffdb00; overflow: visible; }
.plan-pricing_badge { position: absolute; top: -0.8rem; right: -0.8rem; background: #e7004f; color: #fff; font-size: 1rem; font-weight: bold; padding: 0.5rem 0.7rem; border-radius: 1rem; z-index: 9; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); line-height: 1.2; text-align: center; }
.plan-pricing_banner { background: #ffaa00; color: #fff; font-size: 1.6rem; font-weight: bold; text-align: center; padding: 1.2rem 1rem; }
.plan-pricing_content { padding: 1.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plan-pricing_month_label { font-size: 1.1rem; color: #666; margin: 0 0 0.3rem; }
.plan-pricing_price { font-size: 2.2rem; font-weight: bold; color: #333; margin: 0.3rem 0 0.4rem; line-height: 1.2; }
.plan-pricing_price--red { color: #e7004f; }
.plan-pricing_tax { font-size: 1.1rem; color: #999; margin: 0 0 0.3rem; }
.plan-pricing_year { font-size: 1.3rem; color: #333; margin: 0.4rem 0 0; font-weight: bold; }
.plan-pricing_note { font-size: 0.85rem; color: #999; margin: 0.3rem 0 0; }

/*----------------------------------------------------------
    Styles for #faq
----------------------------------------------------------*/
.faq_bg { background:#f9f8ef; padding:2rem 0 1rem; }
.faq_bg a { color:#fff; }
.faq_title { color:#007297; font-size:2.4rem; font-weight:bold; margin:0 0 1rem; }
.faq_list { background:#fff; border:thin solid #c3c3c3; padding:1.8rem 1rem; margin:0 0 1rem; }
.faq_list_head { color:#007297; font-size:1.4rem; font-weight:bold; text-align:left; padding:0 2.5rem 1.2rem 0; margin:0 0 1.2rem; line-height:1.4; cursor:pointer; position:relative !important; border-bottom:none !important; }
.faq_list_head.faq_accordion_trigger { padding-right: 2.5rem !important; }
.faq_list_head.faq_accordion_trigger.clearfix:after { content:'' !important; display:block !important; position:absolute !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important; width:0 !important; height:0 !important; border-left:8px solid transparent !important; border-right:8px solid transparent !important; border-top:8px solid #007297 !important; transition:transform 0.3s ease !important; clear:none !important; visibility:visible !important; }
.faq_list_head.faq_accordion_trigger.clearfix.active:after { transform:translateY(-50%) rotate(180deg) !important; }
.faq_list_head.faq_accordion_trigger:not(.clearfix):after { content:'' !important; display:block !important; position:absolute !important; right:0 !important; top:50% !important; transform:translateY(-50%) !important; width:0 !important; height:0 !important; border-left:8px solid transparent !important; border-right:8px solid transparent !important; border-top:8px solid #007297 !important; transition:transform 0.3s ease !important; }
.faq_list_head.faq_accordion_trigger:not(.clearfix).active:after { transform:translateY(-50%) rotate(180deg) !important; }
.faq_list_Q { font-size:2rem; width:10%; float:left; vertical-align: top; line-height: 1.4; }
.faq_list_copy { width:86%; float:left; }
.faq_list_answer { font-size:1.34rem; display:none; line-height:1.8; word-wrap:break-word; overflow-wrap:break-word; padding:1rem 2.5rem 0 0; margin-left:10%; white-space:normal; word-break:normal; clear:both; box-sizing:border-box; }
.faq_list_answer a { color: #007297; text-decoration: underline; }
.faq_top-btn { font-size:1.4rem; font-weight:bold; background:#999; border-radius:.2rem; padding:1rem 0; position:relative; margin-top:2rem; }
.faq_top-btn:after { content:''; display:block; background:url(../img/faq_img01.png) no-repeat; position:absolute; top:38%; right:10%; width:1.2rem; height:.8rem; background-size:contain; }

/*----------------------------------------------------------
    Styles for fotter
----------------------------------------------------------*/
#footer { font-size:0.8rem; }
#footer a { color:#888788; }
.footer_block-style01 { background:#eff0ef; padding:1rem;}
.footer_block-style02 { background:#105f7d; padding:1rem; font-family: Helvetica, Arial, sans-serif; }
.footer_nav_list { font-size:1rem; font-weight:bold; float:left; background:url(../img/footer_img01.png) no-repeat 0 50%; background-size:.6rem; padding:0 0 0 1rem; margin:0 .8rem 0 0; line-height:2; }
.footer_campany {margin:0; line-height:1.4; text-align: center; }
.footer_logo { width:23%; float:right; margin:0 1.3rem 0 0; }
.footer_copyright { color:#fff; text-align:center; display:block; }
#footer2 { font-size:1rem; }
#footer2 a { color:#888788; }
/*----------------------------------------------------------
    Styles for font
----------------------------------------------------------*/
.font_red { color:#ec0044; }
.font_red02 { color:#ec0044; font-size:1.3rem; }
.font_bold { font-size:1.8rem; }
.font_yellow01 { color:#ffdb00; }
.font_yellow { color:#ffdb00; text-shadow:-1px 1px 0 #000; }
.font-marker-yellow { background:#ffdb00; }
.marker-yellow { background: linear-gradient(transparent 60%, #ffdb00 60%); }

/*----------------------------------------------------------
    Styles for accordion btn (#intro section)
----------------------------------------------------------*/
.intro_accordion { position:relative; }
.intro_accordion:before { content: ' '; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 17%; }
.intro_accordion.active:before { content: ' '; display: block; position: absolute; top:0; right: 0; height: 100%; width: 17%; }
.intro_accordion:before { background:#000 url(../img/reason_down.png) no-repeat; background-size:contain; }
.intro_accordion.active:before { background:#000 url(../img/reason_up.png) no-repeat; background-size:contain; }

/*----------------------------------------------------------
    Styles for accordion btn (#reason section)
----------------------------------------------------------*/
.reason_accordion-btn { position:relative; }
.reason_accordion-btn:before { content: ' '; display: block; position: absolute;  top: 0; right: 0; height: 100%; width: 19%; }
.reason_accordion-btn.active:before { content: ' '; display: block; position: absolute; top:0; right: 0; height: 100%; width: 19%; }
.reason_accordion-btn:before { background:#005e7d url(../img/reason_down.png) no-repeat; background-size:contain; }
.reason_accordion-btn.active:before { background:#005e7d url(../img/reason_up.png) no-repeat; background-size:contain; }
.reason_accordion-btn.icon01:before { display: none !important; }
.reason_accordion-btn.icon01.active:before { display: none !important; }
.reason_accordion-btn.icon02:before { display: none !important; }
.reason_accordion-btn.icon02.active:before { display: none !important; }
.reason_accordion-btn.icon03:before { display: none !important; }
.reason_accordion-btn.icon03.active:before { display: none !important; }

/*----------------------------------------------------------
    Styles for accordion btn (#voice section)
----------------------------------------------------------*/
.voice_btn:before { content: ' '; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 20%; }
.voice_btn.active:before { content: ' '; display: block; position: absolute; top:0; right: 0; height: 100%; width: 20%; }
.voice_btn:before { background:#00afaa url(../img/voice_btn_down.png) no-repeat; background-size:contain; }
.voice_btn.active:before { background:#00afaa url(../img/voice_btn_up.png) no-repeat; background-size:contain; }

/*----------------------------------------------------------
    Styles for  (.kai)
----------------------------------------------------------*/
.kai {margin: 20px; font-size: 0.9rem; line-height: 1.4;}
.kai h2 { font-size: 20px; font-weight: bold; color:#005e7d; }
.kai table { margin: 50px 0; border-top: 1px solid #eee; width: 100%; }
.kai tr {text-align: left;  border-bottom: 1px solid #eee; }
.kai td {text-align: left;  padding: 10px 0; }
.name { width: 7rem;}
.name12 { width: 12rem;}
.name16 { width: 16rem;}
.cap{ margin: 50px 0; text-align: left; }
.kai ol {text-align: left; margin-bottom: 1em; line-height: 1.3; }
.kai li {margin-left: 2em; list-style-type: decimal; margin-bottom: 1em; }
.kai p {margin-bottom: 1em; }
.kai ol li ol{margin: 1em 0;}
.kai ol li ol li {margin: 1em 0 1em 2em; list-style-type: decimal; }
.kai ol li ol li ol li {margin: 1em 0 1em 2em; list-style-type: lower-roman; }
.mrl1{margin: auto 1em;}


.inp { border: #eee 1px solid; padding: 0 3px; width: -webkit-calc(100% - 10px); width: calc(100% - 10px); }
.txtinp2 { width: 2em; border: #eee 1px solid; padding: 0 3px;}
.txtinp4 { width: 4em; border: #eee 1px solid; padding: 0 3px;}
.txtinp7 { width: 7em; border: #eee 1px solid; padding: 0 3px;}


input[type="submit"] {
   background-color:#005e7d;
   border: none;
   border-radius: 20px;
   color: #fff;
   font-weight: bold;
   padding: 5px 20px;
   cursor: pointer;
}

input[type="submit"]:hover { background-color: #44CCF8; }
input[type="submit"]:active { background-color: #44CCF8; }

input[type="button"] {
   background-color:#005e7d;
   border: none;
   border-radius: 20px;
   color: #fff;
   font-weight: bold;
   padding: 5px 20px;
   cursor: pointer;
}

input[type="button"]:hover { background-color: #44CCF8; }
input[type="button"]:active { background-color: #44CCF8; }

.kai .good {border: #238fb3 solid 2px; padding: 20px; width: calc(100% - 44px); margin: 50px 0; color: #238fb3; text-align: center; line-height: 1.2; font-size: 18px; font-weight: bold; }

.ng {border: #cc0000 solid 2px; padding: 20px; width: calc(100% - 44px); margin: 50px 0 0; color: #cc0000; text-align: left; line-height: 1.2;}
.caption { font-size: 12px; line-height: 1; margin-top: 5px;}
.mt50{margin-top: 50px;}
.mb20{margin-bottom: 20px;}
.center{ text-align: center;}


/*----------------------------------------------------------
    Styles for add 2026-02-14
----------------------------------------------------------*/
.sub-main_bg-style03 { background:#117599; color: #fff; text-align: center; padding: 40px 0;}
.sub-main_ttl_03 { font-size:30px; line-height:1.1; text-align:center; font-weight:bold; padding:0 0 14px; position:relative; z-index:1; }
.sub-main_number03 { font-size:90px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; margin: 20px; line-height: 1; }
.style03_txt_30 { font-size:30px; }
.style03_txt_60 { font-size:60px;}
.style03_txt_120 { font-size:120px;}

.sub-main_ttl { font-size:30px; line-height:1.1; text-align:center; border-bottom:thin solid #fff; margin:0 0 14px; padding:0 0 14px; position:relative; z-index:1; }
.sub-main_txt { font-size:16px; text-align:center; letter-spacing:.8px; }

/*----------------------------------------------------------
	Styles for try7
----------------------------------------------------------*/
.try7_block {width: 90%; margin: 0 auto; display: flex; justify-content: center; align-items: center;flex-direction: column;}
.try7_left { width: 100%; background: #007297; flex: 1; font-size: 16px; color: #333; text-align: center; display: flex; justify-content:center; align-items: center; padding: 0px; border-radius: 30px 30px 0  0 ; margin: 20px auto 0; height: 70px; }
.try7_catch { font-size: 24px; font-weight: bold; color: #fff; text-align: center; line-height: 1.2; padding: 36px 24px; width: 70px; background-image: url(../img/try7_bg.png); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.try7_catch2 { font-size: 22px; font-weight: bold; color: #fff; padding: 12px 10px;line-height: 1.2;; }
.try7_right { width: calc(100% - 6px); background: #fff; color: #007297; font-weight: bold; text-align: center; border-radius: 0 0 30px 30px; border:3px solid #007297; padding: 36px 0px; margin: 0; height:64px; display: flex; justify-content: space-around; align-items: center; }
.try7_txt { font-size: 14px; line-height: 1.2; width: 140px; height:140px; text-align:center; background-image: url(../img/try7_bg2.png); background-repeat: no-repeat; background-position: center; background-size: 100%; padding-top: 110px; margin: 0 15px; }
.try7_chip_arrow { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #007297; margin: 0px auto 0px; }
.cta_btn_note { font-size:0.8rem; color:#333; text-align:center; margin:1rem 15px 20px; padding:1.2rem; background:#fff; border:1px solid #ddd; border-radius:12px; line-height:1.6; box-sizing:border-box; }