@charset "utf-8";

#wrapper{ font-family:'BIZ UDPGothic', sans-serif; }
.kk_font, .biz_udp, .zen_maru, .mplus_rounded, .kosugi_maru{ font-family:'BIZ UDPGothic', sans-serif; }

html{ scrollbar-gutter:stable; }

@media only screen and (min-width:1025px){
  header ul#gnavis{ float:right; }

  header ul#gnavis li:last-child{ margin-right:32px; }
  body#news header ul#gnavis{ margin-left:0; }
  body#news header #hd_logo{ margin:25px 0 0 3%; }
}

footer .copyright,
footer .pp_link,
footer .pp_link a{ font-size:14px; }          
footer .aov img{ height:22px; width:auto; }   

img[src$="icon_x.svg"]{ width:20px; height:20px; vertical-align:middle; }
img[src$="icon_facebook.svg"]{ width:20px; height:20px; vertical-align:middle; }
img[src$="icon_youtube.svg"]{ height:20px; width:auto; vertical-align:middle; }
footer .ft_logo img{ width:207px; }           

@media only screen and (max-width:1024px){
  footer .ft_logo img{ width:127px; }         
}

header #hd_logo img{ width:180px; height:auto; }

#mv.kk-mv{ width:auto; height:auto; overflow:visible; text-align:left; }

header{
  background-image:none;
  box-shadow:0 2px 5px rgba(0,0,0,.22);
  
  background-color:rgba(255,255,255,.99);
}

#mainContent{ margin-top:94px; }
@media only screen and (max-width:1024px){
  #mainContent{ margin-top:56px; }
}
.kk-hero{ position:relative; overflow:hidden; background:#1a2733; }
.kk-hero-bg{ position:absolute; inset:0; display:block; }
.kk-hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }

.kk-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,
    rgba(8,16,26,0) 0%, rgba(8,16,26,0) 38%,
    rgba(8,16,26,.30) 66%, rgba(8,16,26,.62) 86%, rgba(8,16,26,.82) 100%);
}
.kk-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,16,26,.10) 0%,rgba(8,16,26,.10) 45%,rgba(8,16,26,.62) 100%);
}
.kk-hero-inner{
  position:relative; z-index:2;
  max-width:1000px; margin:0 auto; padding:46px 20px 46px;   
  display:flex; align-items:flex-end; gap:28px; min-height:380px;
}
.kk-hero-text{ flex:1 1 auto; min-width:0; }

.kk-hero-mv{
  position:relative;                            
  flex:0 0 auto; display:block; text-align:center;
  color:#fff; text-decoration:none;
}

.kk-mv-no{
  position:absolute; left:0; right:0; top:100%; margin-top:-3px;
  font-size:21px; line-height:1.4; font-weight:700; letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}

.kk-mv-thumb{
  position:relative; display:block; margin:0 auto;
  width:206px; height:366px; padding:12px 7px;
  border-radius:22px;
  box-shadow:0 14px 30px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.32),
             inset 0 0 0 1px rgba(255,255,255,.55);
}
.kk-mv-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:12px; background:#000;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);       
}

.kk-mv-thumb::before{
  content:""; position:absolute; left:50%; top:5px; width:36px; height:3px; margin-left:-18px;
  border-radius:2px;
}

.kk-mv-thumb::after{
  content:""; position:absolute; left:50%; bottom:4px; width:54px; height:3px; margin-left:-27px;
  border-radius:2px;
}

.kk-mv-thumb.kk-c1{
  background:#7a5030;
}
.kk-mv-thumb.kk-c1::before, .kk-mv-thumb.kk-c1::after{ background:rgba(255,255,255,.40); }

.kk-mv-thumb.kk-c2{
  background:linear-gradient(155deg,#5b7ba6 0%,#2c4468 36%,#1d3050 66%,#607da8 100%);
}
.kk-mv-thumb.kk-c2::before, .kk-mv-thumb.kk-c2::after{ background:rgba(255,255,255,.42); }

.kk-mv-thumb.kk-c3{
  background:linear-gradient(155deg,#54565b 0%,#303236 36%,#17181b 66%,#5c5f66 100%);
}
.kk-mv-thumb.kk-c3::before, .kk-mv-thumb.kk-c3::after{ background:rgba(255,255,255,.36); }

.kk-mv-play{
  position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:rgba(0,0,0,.55);
  border:3px solid rgba(255,255,255,.92);      
}
.kk-mv-play::after{
  content:""; position:absolute; left:17px; top:13px;   
  border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff;
}
.kk-hero-mv:hover .kk-mv-play{ background:rgba(0,0,0,.8); }
.kk-mv-txt{
  display:block; font-size:13px; line-height:1.6; white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.7); margin-top:9px;
  position:relative; z-index:2;
}
.kk-hero-mv:hover .kk-mv-txt{ text-decoration:underline; }
.kk-hero-text h1{
  font-size:clamp(22px,3vw,32px); line-height:1.55; font-weight:700;
  color:#fff; margin:0 0 16px; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.kk-hero-text p{
  font-size:15px; line-height:2; color:#e8eef4; margin:0 0 14px;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.kk-hero-links a{
  display:inline-block; margin:8px 12px 0 0; padding:10px 22px;
  border:1px solid rgba(255,255,255,.85); border-radius:3px;
  font-size:14px; color:#fff; backdrop-filter:blur(2px);
}
.kk-hero-links a:hover{ background:#fff; color:#1a2733; }

.service-btn1 img[src*="appstore"],
.service-btn1 img[src*="googleplay"],
p img[src*="appstore"],
p img[src*="googleplay"]{
  width:auto !important; height:49px; vertical-align:middle;
}

.service-btn1 img[src*="appstore"],
p img[src*="appstore"]{ height:44px; }

body.page-id-638 .service-btn1{ margin-top:0; max-width:none; line-height:1; }
.service-btn1 img{ display:inline-block; }

.service-btn1 span{ margin-top:4px; line-height:1.5; }

.gap15{ display:inline-block; margin-top:.8em; }

.pf-link{ font-size:.88em; color:#3c5a78; border-bottom:1px solid #c6d5e4; }
.pf-link:hover{ color:#2a4460; border-bottom-color:#3c5a78; }

body.home #block2.pt20px{ padding-top:10px; }
body.home #block2.pb20px{ padding-bottom:10px; }
body.home #block3.pt30px{ padding-top:15px; }
body.home #block3.pb30px{ padding-bottom:15px; }
body.home .sc_ctbox{ padding-top:0; padding-bottom:0; }

body.home #block3{ margin-bottom:0; }        
body.home .ct_btnset{ margin-bottom:0; }     

.kk-apps{ padding:52px 20px; }
.kk-apps h2{
  max-width:1000px; margin:0 auto 30px; font-size:clamp(19px,2.2vw,24px);
  font-weight:700; color:#1a1a1a;
}
.kk-app-list{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px;
}

.kk-app{
  background:#fff; border:1px solid #e0e5ea; border-radius:8px; padding:24px;
  display:flex; flex-direction:column;
}
.kk-app-head{ display:flex; gap:16px; align-items:center; margin-bottom:14px; }
.kk-app-head img{ width:64px; height:64px; border-radius:14px; display:block; }
.kk-app-head h3{ font-size:17px; font-weight:700; color:#1a1a1a; margin:0; line-height:1.5; }
.kk-app p{ font-size:14px; line-height:1.95; color:#555; margin:0 0 16px; }
.kk-app-store{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  margin-top:auto;                       
}
.kk-app-store img{ height:40px; width:auto; display:block; }

.kk-app-store img[src*="appstore"]{ height:36px; }

.kk-app-note{ font-size:12px; color:#888; margin:-8px 0 14px !important; text-align:right; }

@media only screen and (max-width:1024px){
  .kk-hero-mv{ display:none; }
  .kk-hero-inner{ padding:110px 20px 46px; }
}

@media only screen and (max-width:768px){
  .kk-hero-inner{ padding:110px 16px 34px; min-height:280px; }
  .kk-apps{ padding:38px 16px; }
}

header ul#gnavis li a {color: #0a0a0a;}
#hd_shopinfo {color: #0a0a0a;}
header ul#gnavis li a:hover { color:#0a0a0a; }
header ul#gnavis li a:hover >  .gn_en { color:#0a0a0a; }
header ul#gnavis li a .gn_en { color:#0a0a0a; }
.g_sub { background-color:rgba(0,0,0,.9); }
.g_sub:before { border-color: transparent transparent #000000 transparent; }
header #hd_infos #hd_mail { background-color:#000000; }
ul#cat_navis li a.cat_current { background-color:#000000; }
.bttl .bttl_en,.theme_color { color:#000000; }
.graybtn { background-color:#000000;  }
.basicbtn:hover { background-color:#000000; border:solid 2px #000000; }
.graybtn:hover { background-color:rgba(0,0,0); }
.basicbtn { border:solid 2px #000000; }
@media only screen and (max-width: 1024px) {
.menu-trigger span { background-color: #000000;}
header nav { background-color:rgba(74,78,84,.96); }
ul.g_sublist li { background-color:rgba(74,78,84,.96); }
header ul#gnavis li a:hover {color: #FFF;}
header #hd_infos #hd_shopinfo #hd_infos_time { color:#FFF; }
header #hd_infos #hd_mail { background-color:rgba(0,0,0); }
}

.news_list .news_list_box .news_list_item .category{ width:3.6em; margin-right:1.5em; }
@media only screen and (min-width:769px){
	.news_list .news_list_box .news_list_item > .hitarea + .date{ margin-left:5.1em; }
}
@media only screen and (max-width:768px){
	.news_list .news_list_box .news_list_item .category{ width:auto; margin-right:.8em; }
}

#wrapper, #wrapper *{
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
#wrapper{ -webkit-text-stroke: 0.25px currentColor; }
#wrapper b, #wrapper strong, #wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4{
  -webkit-text-stroke: 0;
}
.reg{
  font-size: .40em;  vertical-align: 1.20em;  letter-spacing: 0;
  line-height: 1;
}

/* 会社沿革（= dl.list_2）の 年月が 2 行に なるのを 止める。
   ★ 原因 = フォントを Kosugi Maru から BIZ UDPGothic へ 替えた分。
     数字の 幅  Kosugi Maru 0.500em → BIZ UDPGothic 0.760em
     「1997年 3月」 = 6.0024em × 15px = 90.0 px
     dt の 中身に 使える幅 = 7em × 15px − 余白 15px = 90.0 px（= box-sizing:border-box）
     ★★ 1 文字も 余らない ∴ 折り返す（= 1994年 7月 / 1997年 3月 / 2019年 7月 の 3 行）
   ★ 8em に すると 中身 105 px ∴ 余りが 15 px 出る。
     dd の 左の 余白は 9em × 16px = 144 px（= 携帯は 10em = 160 px）ゆえ、
     dt の 枠 120 px を 超えており、文が 重なる事は 無い。 */
.company_box dl.list_2 dt{ width:8em; }