﻿#top img{margin-bottom:0}.flex-container { display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;  flex-wrap: wrap;}
.flex-container { -ms-flex-wrap: wrap; flex-wrap: wrap;justify-content:space-between}
ul.sfnav{margin:0.6em 0; }
ul.sfnav li{ display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flfarex-wrap: wrap;  justify-content:center;align-items:center; width:16%; margin:0 0.3%; text-align:center}
ul.sfnav li a{color:#00a0e2;font-weight:bold; padding:0.4em 1em;display:block; width:100%}
#top_nav{position: fixed;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 999;
    background-color: rgb(255, 255, 255);}
#top_nav{max-width:100%;margin:0 auto;}
#top_cnt{max-width:800px;margin:0 auto;}
#top_tit{max-width:1000px;margin:0 auto;}
#top_nav + div,#top_tit {position:relative;padding-bottom:4%; margin-top:320px}
#top_tit >div{position:absolute; top:10%; left:0; right:0; bottom:0; margin:auto;}
#top_tit >div h1{color:#fff;padding:0; margin:0}
#top_tit >div h1{font-size:18px}
#top_tit >div h1 .font-size-80{font-size:80px; line-height:100px}
#top_tit >h1{position:absolute; top:30%; left:0; right:0; margin:auto; color:#fff; font-size:36px;padding:0.4em}
.top_splogo{max-width:300px}
h2{margin-bottom:0.4em}
p{margin-bottom:1em}
ul.sfmenu{margin-bottom:0.6em}
ul.sfmenu li{display:inline-block; vertical-align:middle; margin-bottom:1em}
ul.sfmenu li{width:48%; }
ul.sfmenu li:nth-child(2n+1){margin-right:2%}
ul.sfmenu li a{position:relative;display:block}
ul.sfmenu li h2{color:#fff; text-align:center; position:absolute; top:0; right:0; left:0;bottom:0; margin:auto; height:25%;font-size:24px}
ul.sfmenu li img{width:100%; height:auto}
ul.sfmenu li p{margin-bottom:0}
.detail, .detail a{color:#00a0e2; text-align:right; font-weight:bold}

.ogbox{border:4px solid #ffcc66; background-color:#fff7eb; padding:1em 0.6em; margin:0 auto;margin-bottom:1em; width:94%}
.ogbox ul li{position:relative;border:1px solid #ffcc66; background-color:#fff;margin-bottom:0.4em;}
.ogbox ul li a {padding:0.4em 1.6em 0.2em 0.4em;display:block; }
.ogbox ul li:after {
position: absolute;
    content: "＞";
    top: 50%;
    right: 6px;
    margin-top: -8px;
    background-size: 12px 16px;
    line-height: 20px;}
.ogbox h3{text-align:center}
#column ul li a {font-size:13px; line-height:1.3em; color:#777; padding:0}
#column ul li .clm_no{background-color:#777; color: #fff;    position: absolute;    top: 0;    right: 0;    left: 0;    bottom: 0;    width: 40px;    text-align: center; padding-top:0.6em}
#column ul li .clm_tit{margin-left: 40px; padding: 0.6em;}
#advantage p{margin-top:1em; margin-bottom:2em; text-align:left}
ul.accbox > li{margin-bottom:0.6em}
ul.accbox > li .acc-txt{display:none; padding: 0.5em 0.5em 0.5em 1em; }
ul.accbox > li .acc-tit{cursor:pointer; position:relative;padding: 10px 4px;color:#00a0e2;text-indent:-1.8em;font-weight: bold;line-height: 1.2em;letter-spacing: 2px; margin-bottom:0; font-size:18px;text-align:center;background: url("https://sportsone.jp/img_common/m-header.jpg");background-repeat:repeat; }
ul.accbox > li .acc-tit::after{font-family: FontAwesome;content : "\f107"; display: inline-block; position: absolute;top:0; right: 0; bottom:0; margin:auto;font-size:24px;height:24px; line-height:1em;color:#00a0e2;}
ul.accbox > li .acc-tit.active::after{font-family: FontAwesome;content : "\f106";}
ul.accbox > li .acc-tit.active{background-color:#edf9ff}
ul.accbox > li .acc-txt{margin-bottom:0}
.contact .btn a {background-color:#e70012; color:#fff; font-size:26px; font-weight:bold; width:100%;max-width:500px;padding:20px 10px; text-align:center; display:block; margin:0 auto; margin-bottom:36px;line-height:1.2em;box-shadow:4px 4px 4px rgba(0,0,0,0.6);}
.contact p{max-width:500px; margin:0 auto; font-size:18px;text-align:center; padding:1em 0}
.contact .btn {
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;   /* これで親の箱を強制的に真ん中にします */
    padding: 0 !important;       /* 右寄りの原因になる余白を完全にゼロにします */
    text-align: center !important;
    float: none !important;      /* 万が一、右に寄せる設定が残っていたら解除します */
}
#sffooter{background-color:#ccecfa;overflow:hidden}
#sffooter .breadcrumb{padding-top:10px; padding-bottom:10px}
#sffooter .f_box_2 .cont {border-left: 1px solid #777;}
#sffooter .f_box_2 a{display:block;color:#777}
/* column */
article{max-width:700px; margin:0 auto}
article h1{font-size:28px;color:#00a0e2;background-color:transparent;padding:0; margin:1em 0 0.6em; font-weight: bold; line-height: 1.2;}
article h2{text-align:left; margin-bottom:0.4em}
h3{text-align:left; margin-bottom:0.2em}
article img{margin-bottom:0.6em}
.blue-area{background-color:#CCE6F5; padding:10px 20px; clear:both }
.tblcontents {margin-bottom:2em}
.tblcontents ul li{margin-bottom:0.4em}
.red{color:#F00}
.small{font-size:smaller}
p.author {text-align: right; font-size:12px;}

/* case */
#casestudy .bx-wrapper{margin-bottom:8%}
ul#slidercar{margin:0 auto;margin-bottom:50px;}
ul#slidercar li{box-sizing:border-box;border: 1px solid #ccc;text-align:left;padding:1em;}
ul#slidercar li p{height:80px;}
.car_tit{height:90px; color:#777;}
.car_tit h3{font-size:16px; margin-top:4px; color:#777}
.mfp-iframe-holder .mfp-content {height:100% !important; background-color:#fff}
.mfp-iframe-scaler iframe {background-color:#fff}
/* top */
.s_tit {box-sizing:border-box; font-size: 18px; padding: 4px 10px; padding-top: 0;  border-bottom: solid 4px #00a0e2;  display: inline-block;text-align:left;width:100%;max-width:1000px;vertical-align:middle; line-height:28px; }
.s_tit img{float:left; margin-right:20px}
ul#clt li{display:inline-block; width:160px}
ul#clt, ul#slidereve, ul.accbox{margin-bottom:4%}
/*reason */
.contents{max-width:760px}
.num_tit{color:#00a0e2; border-bottom:2px solid #00a0e2}
.num_tit>span.num{color:#777; font-size:smaller; margin-right:0.4em;}
ul.num li{margin-bottom:1.8em; overflow:hidden}
ul.num li img{margin-bottom:2%}
/* place */
.header-borderbtm{color:#00a0e2;border-bottom:solid 4px #00a0e2; display:inline-block;margin-bottom:1em}
/* slick-slider  fullscreen slider */
.slick-slider{position: relative; display: block;  box-sizing: border-box;  -webkit-user-select: none;  -moz-user-select: none;   -ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: pointer;cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);   -moz-transform: translate3d(0, 0, 0);    -ms-transform: translate3d(0, 0, 0);     -o-transform: translate3d(0, 0, 0);        transform: translate3d(0, 0, 0);}
.slick-track{position: relative;top: 0;left: 0;display: block;margin-left: auto;margin-right: auto;}
.slick-track:before,
.slick-track:after{display: table;content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{display: none;float: left;height: 100%;min-height: 1px; outline: none;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{display: block;width:100%;}
.slick-slide.slick-loading img{display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{visibility: hidden;}
.slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}
/* Dots */
.slick-dots{display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;padding-bottom:0.6em}
.slick-dots li{position: relative;display: inline-block;width: 16px;height: 16px;margin: 0 5px;padding: 0;cursor: pointer;}.slick-dots li button{font-size: 0;line-height: 0;display: block;width: 16px;height: 16px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}.slick-dots li button:hover,.slick-dots li button:focus{outline: none;}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity: 1;}.slick-dots li button:before{font-family: 'slick';font-size: 16px; line-height: 16px;position: absolute;top: 0;left: 0;width: 16px;height: 16px;    content: '●';    text-align: center;    opacity: .25;    color: black;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}.slick-dots li.slick-active button:before{    opacity: .75;    color: black;}
@media (min-width:768px){
#container{text-align:center}
#top_cnt{overflow:hidden}
#menu{width: 55%;float: left;margin-right: 2%;margin-left: 1%;}
#column,#merit{width: 41%;float: left;}
/* reason */
ul.num li{clear:both}
ul.num li img{float:left; width:40%; margin-right:2%;}
}
@media (max-width:767px){
h1{padding:1em;margin-bottom:1em}
.contact .btn a {width:90%}
#top_nav + div, #top_tit {margin-top:220px}
ul.sfnav {justify-content:center; margin-bottom:0}
ul.sfnav li{width:32%; margin-bottom:1%}
ul.sfmenu li p, .detail{padding:0 0.6em}
/* column */
article h1{font-size:24px;}
article h2{font-size:20px;}
.num_tit span.num{display:block}
}
@media (max-width:480px){
ul.sfmenu li{width:100%; }
ul.sfmenu li:nth-child(2n+1){margin-right:0}
ul.sfnav li a {padding: 0.4em;}
.contact p{font-size:16px}
.contact .btn a {font-size:19px;}
#top_tit >div{top:10%}
#top_tit >h1{top:20%; font-size:26px}
.top_splogo{max-width:200px}
.num_tit{text-align:center}
}
/* link box */
.cat_box {box-sizing:border-box;width:100%;overflow: hidden;border: 3px solid #00a0e2;clear: both;padding: 10px 10px 10px 10px;margin-bottom:1em}
.cat_box, .cat_box a{color: #00a0e2;letter-spacing: 1px;font-size:16px; text-align:left;line-height:2em}

table{margin:1%;width:46%; min-width:150px }

#cards {
  display: flex;
  justify-content: left;
}

.card {
  width: 300px;
  height: 100%;
  border: 1px solid lightgray;
}

.card:nth-child(2) {
  margin-right: 10px;
  margin-left: 10px;
}

.picture img {
  width: 100%;
  height: 200px;
}

.description {
  width: 100%;
  height: 100%;
  padding-right: 12px;
  padding-left: 12px;
  box-sizing: border-box;
}

.description p {
  font-size: 15px;
  color: dimgray;
text-align:center;
  height:60px;
  line-height:60px;
}

/*   ️ 強力版：メニュー右端の文字化けを完全に消し去り、綺麗な下矢印（▼）にする */
li.nav__item--has-children button.nav__link::after,
li.nav__item--has-children .nav__link::after,
.nav__item--has-children .nav__link::after,
.nav__link::after {
    content: "" !important; /* 🚨 文字化けの原因（文字データ）を強制的に空っぽにします */
    
    /* CSSの機能だけで綺麗な下向き三角形（▼）を作る設定 */
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 6px 5px 0 5px !important; /* 三角形のサイズ（横幅と高さ） */
    border-color: #ffffff transparent transparent transparent !important; /* 三角形の色（白） */
}

/* 🛠️ 三本線メニューを開いた時の「×マーク」の文字化けも強制リセット */
.drawer__icon[aria-expanded="true"]::before,
.drawer__icon[aria-expanded="true"] .drawer__icon--bar {
    content: "" !important;
    font-family: sans-serif !important;
}
/* 📝 記事ページのタイトルがヘッダーに被るのを防ぐ設定 */
article {
    margin-top: 120px !important; /* パソコンの時にヘッダー分下げる */
}

@media (max-width: 767px) {
    article {
        margin-top: 200px !important; /* スマホの時にヘッダー分下げる */
    }
}
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 目次のリンク（【１】〜【４】）だけをまとめて青色にし、少し大きくする */
li.scroll a {
    color: #0056b3 !important;           /* わかりやすい青色 */
    font-size: 15px !important;         /* 文字を少しだけ大きくしました */
    text-decoration: none !important;     /* 下線なし */
}

/* マウスを乗せたときに少し濃い青にする設定 */
li.scroll a:hover {
    color: #003366 !important;
    text-decoration: underline !important; /* マウスが乗ったときだけ下線を出す */
}