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

body { font-family: YakuHanJP, 'Noto Sans JP', 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", sans-serif!important; background: #000; color: #FFF; background: #FFF url("images/key_visual_bg.png") left top no-repeat; background-size: 3000px auto; }
html,body { padding: 0; margin: 0; }
nav:not(.mm-menu) { display: none; }

@media screen and (max-width: 767px) {
body { background-position: center -100px; }
}





section .container { margin: 0 auto; padding: 100px 15px 100px; }
section .eyebrow { margin: 0 0 5px; text-align: center; font-size: 24px; font-weight: 700; color: #C1AE50; color: goldenrod; color: #f56300; }
section h2 { margin: 0 0 40px; padding: 0; font-size: 70px; text-align: center; font-weight: 900; line-height: 1.2; }
section .summary { margin: 0 0 40px 200px; font-size: 24px; text-align: left; /*color: #86868b;*/ font-weight: 700; line-height: 1.7; }

section p { font-size: 17px; line-height: 1.7; }
section a { text-decoration: none; }
section a:hover { text-decoration: underline; }

@media screen and (max-width: 767px) {
section .container { padding: 60px 15px; }
section .eyebrow { margin: 0 0 0px; font-size: 14px; }

section h2 { margin: 0 0 20px; padding: 0; font-size: 32px; text-align: center; font-weight: 900; line-height: 1.2; }
section .summary { margin: 0 0 30px; font-size: 16px; }

section p { font-size: 15px; line-height: 1.5; }
}




header {  }
header .container { padding: 40px 15px; }

@media screen and (max-width: 767px) {
header .container { padding: 20px 15px; text-align: center; }
header img { max-width: 280px; }
}


section.key_visual .container { width: 100%; margin: 0 auto; padding: 20px 15px 100px; text-align: left; }
section.key_visual h1 { margin: 0 0 20px; padding: 0; font-size: 50px; line-height: 1.5; font-weight: 900; }
section.key_visual p { font-size: 32px; line-height: 1.5; text-align: center; font-weight: 900; }
section.key_visual p span { color: #f56300; }

@media screen and (max-width: 767px) {
section.key_visual .container { padding: 20px 15px 40px; }
section.key_visual h1 { margin: 0 0 20px; text-align: left; font-size: 22px;font-weight: 900;}
section.key_visual h1 img { margin: 0 0 0px; padding: 0; max-width: 85%; height: auto; }
section.key_visual p { font-size: 22px; line-height: 1.5; text-align: center; font-weight: 900; text-align: left; }
}














section.features { /*background-color: #F5F5F7;*/ background-color: #1d1d1f; background: #FFF; color:#000; }
section.features .container { /*max-width: 1020px;*/  }

section.features .ff_area { position: relative; height: 720px; }
section.features .ff1 { position: absolute; left: 0; top: 0;  }
section.features .ff2 { position: absolute; right: 0; bottom: 0;  }
section.features .row { position: static; margin-top: 100px;  }


section.features .row > div[class^="col"] { margin: 0 0 20px; }
section.features .row > div[class^="col"] .in { padding: 0 4%; /*background-color: white; border-radius: 14px;*/ height: 100%; display: flex; flex-direction: column; }
section.features .row > div[class^="col"] .in+p { margin: 0 0 30px; }
section.features .row > div[class^="col"].strangths .in { background-color: #050204; color: white; }
section.features .row > div[class^="col"] h3 { margin: 20px 0 40px; font-size: 32px; font-weight: 900; text-align: left; line-height: 1.4; color: #2b4e7c; }
section.features .row > div[class^="col"] h3 small { display: block; padding: 40px 0 0; font-size: 18px; color: #000; font-weight: 300;}
section.features .row > div[class^="col"] img { border-radius: 4px; }
section.features .row > div[class^="col"] p { font-weight: 900; font-size: 20px; line-height: 1.7; color: #2b4e7c; }
section.features .row > div[class^="col"] p span { color: #f5f5f7; }
section.features .row > div[class^="col"] p:last-of-type { margin: 0; }
.col-sm-4 td,th{
  padding: 10px;
  border-top: 1px dotted #000; /* 上部に点線 */
  border-bottom: 1px dotted #000; /* 下部に点線 */
  border-left: none; /* 左の線を無効化 */
  border-right: none; /* 右の線を無効化 */
}

@media screen and (max-width: 767px) {
section.features .summary { text-align: left; }
section.features .row > div[class^="col"] h3 { text-align: center; }
section.features .row > div[class^="col"] .in { padding: 0 0 20px; text-align: center; }

section.features .row > div[class^="col"] h3 { margin: 0 0 15px; font-size: 26px; }
section.features .row > div[class^="col"] p { text-align: left; }
section.features .row > div[class^="col"] .in p:first-of-type { text-align: center; }
section.features .row > div[class^="col"] .in img { max-width: 200px; }
section.features .summary p { font-size: 15px; }
}






















footer { padding: 100px 15px 100px; text-align: center; background-color: #242422; background: black; color: #ddd; }
footer .mp_logo { margin-bottom: 15px; }
footer .company { margin-bottom: 3px; font-size: 14px; }
footer .address { margin-bottom: 20px; font-size: 14px; }
footer .mp_logo img { width: 240px; }
footer .link { margin-bottom: 20px; padding: 0; list-style-type: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
footer .link li { display: inline-block; padding: 0 10px; }
footer .link a { text-decoration: none; color: #ddd; font-size: 14px; }
footer .link a:hover { color: white; text-decoration: underline; }
footer .copyright { font-size: 0.8rem; letter-spacing: 0.1rem; }

@media screen and (max-width:768px) {
footer { padding: 50px 15px; }
footer .link { display: block; border-top: 1px solid #333; }
footer .link li { display: block; border-bottom: 1px solid #333; text-align: left; }
footer .link a { display: block; padding: 15px 0; }
}







.br-pc {display: block; }
.br-sp {display: none; }
._pc_none { display: none; }
._sp_none { display: block; }
@media screen and (max-width:768px) {
.br-pc {display: none; }
.br-sp {display: block; }
._pc_none { display: block; }
._sp_none { display: none; }
}

.annotation { margin-left: 1.5rem; padding: 0; }
.annotation li { margin: 0; padding: 0 0 3px; list-style-type: none; line-height: 1.4; font-size: 14px; }
.annotation li::before { margin-left: -1.6rem; content: "※"; padding-right: 0.2rem; }


.btn-outline-primary { border-radius: 100px; padding: 10px 30px; background-color: white; }












.g-menu__link { }
.g-menu__item { position: relative; }
.g-menu__dropdown-menu { opacity: 0; pointer-events: none; position: absolute; top: 100%; left: 0;  }

.g-menu__item:hover .g-menu__dropdown-menu { opacity: 1; pointer-events: auto; transition: .5s; }

.g-menu__dropdown-menu .in { background: white; width: auto; list-style-type: none; display: block!important; padding: 20px 20px 20px 20px; border-radius:  10px 10px; border: 3px solid #1F65A8; /*border-top: 3px solid #1F65A8;*/ white-space: nowrap; margin-top: 16px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5); }
.g-menu__dropdown-menu a { display: block; padding: 10px 40px 10px 0!important; }
.g-menu__dropdown-menu a:hover { border: none!important; }
.g-menu__dropdown-menu a.scd { padding-left: 1rem!important; }
.g-menu__dropdown-menu i { color: #1F65A8; margin-right: 5px; }




.std_tbl { margin: 0 0 15px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; }
.std_tbl th { padding: 10px 10px 8px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #f6f6f6; font-weight: normal; }
.std_tbl td { padding: 10px 10px 8px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
.std_tbl td b { font-size: 16px; }

















section.f_cta { margin: 0; background-color: #fef9dd; background: #F5F5F7; background: #1d1d1f; text-align: center; border-top: 10px solid #000; }
section.f_cta .container { padding: 60px 15px 60px; }

section.f_cta .title { margin: 0 0 25px; font-size: 26px; line-height: 1.7; font-weight: 900; }
section.f_cta .title span { color: #E11939; color: #C1AE50; }
section.f_cta .try { margin: 0 auto 0px; display: inline-block; }

section.f_cta .hours { margin: 0 0 0px; font-size: 14px; line-height: 1.5; font-weight: 400; }

section.f_cta .mp_btn.trial { padding: 15px; border-radius: 100px; display: flex; align-items: center; justify-content: center; background: #e54600; background: #ff4200; background: #1c2d44; color: white; text-decoration: none; }
section.f_cta .mp_btn.trial div { margin: 0 10px 0 20px; padding-bottom: 1px; font-size: 22px; line-height: 1; font-weight: 900; }
section.f_cta .mp_btn.trial img { width: 36px; height: auto; }

section.f_cta .mp_btn.trial:hover { background: #C1AE50; }
section.f_cta .mp_btn.trial:active .btn:visited {  }


section.f_cta .mp_contact { border-top: 1px solid #ddd; padding: 25px 15px 30px; }

section.f_cta .mp_contact .text { font-size: 20px; font-weight: 700; line-height: 1.4; }
section.f_cta .mp_contact .tel { margin: 0; font-size: 27px; /*color: #FF8800;*/ font-weight: bold; line-height: 1.5; }
section.f_cta .mp_contact .tel i { margin: 0 3px 0 6px; }    
section.f_cta .mp_contact .tel span { display: block; font-size: 14px; font-weight: normal; }
section.f_cta .mp_contact .tel span small { font-size: 12px; }

section.f_cta .mp_btn.contact { padding: 20px 40px; border-radius: 14px; font-size: 22px; font-weight: bold; line-height: 1.2; display: inline-block; color: white; text-decoration: none; font-weight: 900; }
section.f_cta .mp_btn.contact small { font-size: 16px; font-weight: normal; }
section.f_cta .mp_btn.contact i { margin-left: auto; }

section.f_cta .mp_btn.contact { background-color: #1473E6; /*box-shadow: 0 8px 0 #004993;*/ }
section.f_cta .mp_btn.contact:hover { box-shadow: none; /*box-shadow: 0 4px 0 #004993;*/ }

section.f_cta .mp_btn.contact:hover { background: #004993; }
section.f_cta .mp_btn.contact:active .btn:visited {  }


@media screen and (max-width:768px) {
section.f_cta .container { padding: 60px 15px; }
section.f_cta .in { background: white; padding: 20px; }
section.f_cta .in2 { background: none; padding: 0; }
section.f_cta .title { margin: 0 0 20px; font-size: 20px; line-height: 1.4; font-weight: 900; }
section.f_cta .mp_btn.trial { padding: 15px;  }
section.f_cta .mp_btn.trial div { margin: 0 10px 0 20px; padding-bottom: 1px; font-size: 22px; line-height: 1; font-weight: 900; }
section.f_cta .guide { margin: 0 0 5px; font-size: 20px; font-weight: 900; line-height: 1; }
section.f_cta .mp_contact .tel { margin: 0 0 20px; }
}