@charset "utf-8";

/* ====================================================================================================
   フレックスボックス
   ---------------------------------------------------------------------------------------------------- */

.flex                                     { display:flex; }
.flex.wrap,
.flex._wrap                               { flex-wrap:wrap; }
.flex.between, 
.flex._between                            { justify-content:space-between; }


/* ====================================================================================================
   フェード
   ---------------------------------------------------------------------------------------------------- */

._fade                                    { opacity:0; visibility:hidden; transition:1.2s 0.4s ease; transform:translateY(30px); }
._fade._fade_02                           { transition-delay:0.6s; }
._fade._fade_03                           { transition-delay:0.8s; }
._fade._fade_04                           { transition-delay:1.0s; }
._fade._fade_05                           { transition-delay:1.2s; }
._fade._fade_06                           { transition-delay:1.4s; }
._fade._fade_07                           { transition-delay:1.6s; }
._fade._fade_08                           { transition-delay:1.8s; }
._fade._fade_09                           { transition-delay:2.0s; }
._fade._fade_10                           { transition-delay:2.2s; }
._active                                  { opacity:1; visibility:visible; transform:translateY(0); }

/* ====================================================================================================
   共通設定
   ---------------------------------------------------------------------------------------------------- */

/* タイトル */
.atl_txt h1,
.atl_txt h2,
.atl_txt h3,
.atl_txt h4,
.ttl                                      { position:relative; font-weight:bold; line-height:1.5; letter-spacing:0.05em; color:#050505; text-align:justify; text-justify:inter-ideograph; }
.atl_txt h1, .ttl_a                       { font-size:3.00rem; margin:0 0 40px 0; padding:28px  0px  0px  0px; line-height:1.1; }
.atl_txt h2, .ttl_b                       { font-size:1.80rem; margin:0 0 40px 0; padding:28px  0px  0px  0px; position:relative; }
.atl_txt h3, .ttl_c                       { font-size:1.10rem; margin:0 0 25px 0; padding:10px 15px 10px 15px; }
.atl_txt h4, .ttl_d                       { font-size:1.20rem; margin:0 0 25px 0; padding:10px  0px  0px  0px; }
.atl_txt h1 em,
.atl_txt h2 em,
.atl_txt h3 em,
.atl_txt h4 em, .ttl em                   { font-style:normal; font-weight:400; font-family: 'Miriam Libre', sans-serif; margin:0 15px 0 0; }
.atl_txt h1 span,
.atl_txt h2 span,
.atl_txt h3 span,
.atl_txt h4 span, .ttl span               { font-size:0.9rem; letter-spacing:0.05em; display:block; }
.atl_txt h1::before , .ttl_a::before,
.atl_txt h2::before , .ttl_b::before      { content:""; position:absolute; top:25px; left:-22px; width:30px; height:2px; background:#050505; transform:rotate(-45deg); }

/* タイトル：大 */  
.ttl_l                                    { margin-bottom:40px; font-size:3.6rem; line-height:1.4; letter-spacing:0.05em; font-weight:500; text-align:center; font-family:"Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
.ttl_l font                               { display:block; font-size:40%; letter-spacing:0.8em; padding:0 0 0 0.8em; }
.ttl_l span                               { position:relative; display:inline-block; padding:0 20px; }
.ttl_l span::after,            
.ttl_l span::before                       { content:""; position:absolute; top:0; bottom:0; margin:auto 0; width:2px; height:40px; background: #000; border-radius: 2px; }
.ttl_l span::before                       { left:-20px; transform:rotate(-24deg); }
.ttl_l span::after                        { right:-20px; transform:rotate(24deg); }

/* フォトライブラリー */  
.photos                                   { display:flex; flex-wrap:wrap; margin:60px -20px 20px -20px; }
.photos img                               { width:calc(33.33% - 40px); margin:0 20px 40px 20px; border-radius:10px; }


/* ====================================================================================================
   リンク：ボタン
   ---------------------------------------------------------------------------------------------------- */

/* 基本ボタン */
a.btn                                     { position:relative; display:flex; justify-content:center; align-items:center; min-height:60px; margin:0 auto 30px auto; padding:10px 20px; font-size:1.0rem; line-height:1.4; font-weight:bold; letter-spacing:0.1em; text-align:center; color:#000; background:#ffac2f; border-radius:30px; transition:.3s; box-shadow:15px 15px 15px rgba(0,0,0,0.15); }
a.btn img                                 { width:30px; height:30px; margin:0 10px 0 0; }
a.btn:after                               { content:""; display:inline-block; width:18px; height:18px; margin:0 -10px 0 5px; background:url(../img/common/bk/next.svg) no-repeat center center; background-size:16px; transition:.3s; }
a.btn:hover                               { background-color:#ff0; }

/* 黒 */
a.btn._bk                                 { color:#fff; background-color:#00031a; background-image:url(../../img/common/wt/bottom.svg); }
a.btn._bk:hover                           { background-color:#001067; }

/* 下へ:_bottom */
a.btn._bottom:after                       { background-image:url(../img/common/bk/bottom.svg); }
a.btn._bk._bottom:after                   { background-image:url(../img/common/wt/bottom.svg); }

/* _blank */
a.btn._blank:after                        { background-image:url(../img/common/bk/blank.svg); }
a.btn._bk._blank:after                    { background-image:url(../img/common/wt/blank.svg); }

/* 並列ボタン */
.btns                                     { display:flex; justify-content:space-between; width:100%; margin:15px auto 50px auto; }
.btns a.btn                               { width:48%; margin:0; }
.btns a.btn._100                          { width:100%; max-height:100%; }
.btns._wrap                               { flex-wrap:wrap; }
.btns._wrap a.btn                         { margin-bottom:4% }
 

/* ====================================================================================================
   独自（基本設定）
   ---------------------------------------------------------------------------------------------------- */

/* カラム設定 */
body                                    { background:#fff; }

/* ベース */
.container                              { max-width:1200px; position:relative; width:80%; margin:0px auto; }
.container.size_m                       { max-width: 900px; }
.container.size_s                       { max-width: 600px; }

/* チェックポイント */
#check_01.sc_trigger                    { position:absolute; top:200px; width:10px; height:10px; }

/* アンカーリンク設定 */
.anchor                                 { position:absolute; top:1px; width:10px; height:10px; }
#sect_top10 .anchor                     { top:-100px; }


/* ====================================================================================================
   ヘッタ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
header                                  { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; width:100%; height:100px; margin:0 auto; background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1)); background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0)); transition:all 0.8s ease-in-out; }

/* ロゴ */
header h1,
header h1 img                           { width:200px; height:100px; }

/* ナビ */
header nav                              { width:calc(100% - 200px); float:right; }
header nav ul                           { width:100%; padding-right:40px; display:flex; justify-content:flex-end; }
header nav ul li a                      { position:relative; display:block; padding:40px 14px; font-size:0.8rem; font-weight:bold; text-align:center; line-height:1.2; letter-spacing:0.05em; text-decoration:underline; white-space:nowrap; color:#191919; }
header nav ul li a:hover                { color:rgba(148,6,129,0.96); transition:.2s; }
header nav ul li.icon                   { width:20px; height:20px; margin:0 10px; }
header nav ul li.icon a                 { width:20px; height:20px; padding:0; margin:40px 0 40px 0; line-height:20px; }
header nav ul li.icon a img             { width:20px; height:20px; transition:all .2s ease; }
header nav ul li.icon a:hover img       { transform:scale(1.2,1.2); }


/* ====================================================================================================
   Sect／キービジュアル
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#aside_kv                               { position:relative; width:100%; height:auto; margin:0; padding:100px 0 0 0; }
#aside_kv .hidden                       { position:relative; overflow:hidden; }
#aside_kv::before                       { content:""; position:absolute; bottom:0; right:0; z-index:2; width:50%; height:50%; background:url(../img/common/etc/smoke_01.png) no-repeat 0 0; background-size:cover; pointer-events:none; }
#aside_kv::after                        { content:""; position:absolute; bottom:0; left: 0; width:100%; height:200px; background: -webkit-linear-gradient(top, rgb(0 83 171), rgba(60, 40, 30, 0)); background: linear-gradient(to bottom, rgba(60, 40, 30, 0), rgb(0 83 171)); }

/* タイトル・見出し */
#aside_kv .hgroup                       { position:relative; width:100%; padding:80px 0 100px 0; background:#fff; }
#aside_kv .hgroup .flex                 { width:80%; max-width:900px; margin:0 auto; }
#aside_kv .hgroup .flex h1              { width:calc(100% - 300px); margin:0.8em 0 0 0; font-size:2.8rem; line-height:1.4; letter-spacing:0.1em; font-weight:500; font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
#aside_kv .hgroup .flex h1 span         { display:block; margin:0.5em 0 0 0.2em; font-size:1.3rem; line-height:1.4; letter-spacing:0.9em; font-weight:500; }
#aside_kv .hgroup .flex h2              { width:300px; writing-mode:vertical-rl; white-space:nowrap; }
#aside_kv .hgroup .flex h2              { font-size:1.1rem; line-height:3.0; letter-spacing:0.5em; font-weight:bold; font-feature-settings:normal; }
#aside_kv .hgroup h3                    { position:absolute; top:380px; left:5%; z-index:2; margin:-50px 0 0 0; width:40%; }
#aside_kv .hgroup h3 img                { width:100%; height:100%; }

/* Slick調整 */
#aside_kv .slider                       { width:100%; height:100%; z-index:-1; margin:-200px 0 0 0; background:#000; }
#aside_kv .slider img                   { width:100%; }
#aside_kv .slider .slick-next           { z-index:10; background-image:url(../img/common/etc/next.svg); }
#aside_kv .slider .slick-prev           { z-index:10; background-image:url(../img/common/etc/prev.svg); }
#aside_kv .slider .slick-next:hover,
#aside_kv .slider .slick-prev:hover     { background-color:#fff; }
#aside_kv .slider .slick-dots           { left:2.5%; right:auto; bottom:0; z-index:2; text-align:left; }

/* サブイメージ */
#aside_kv .sub                          { position:absolute; z-index:2; border-radius:50%; overflow:hidden; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
#aside_kv .sub._01                      { top:340px; right:-2%; width:16%; }
#aside_kv .sub._02                      { top: 93%; left:-4%; width:25%; margin-top:-25vw; }
#aside_kv .sub._03                      { top:102%; left:28%; width:12%; margin-top:-10vw; }

#aside_kv .hgroup h1,
#aside_kv .hgroup h2, 
#aside_kv .slider                       { opacity:0; transition:1.0s; }
#aside_kv .hgroup h1.on,
#aside_kv .hgroup h2.on, 
#aside_kv .slider.on                    { opacity:1; }


/* ====================================================================================================
   Sect／導入
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_read                              { position:relative; padding:0 0 60px 0; background: #0053ab; background: -webkit-linear-gradient(top, #0053ab, #313069); background: linear-gradient(to bottom, #0053ab, #313069); }
#sect_read::before                      { content:""; position:absolute; top:0; left:0; z-index:2; width:100%; height:200%; background:url(../img/common/etc/smoke_01.png) no-repeat 0 0; background-size:cover; pointer-events:none; }

/* サムネイル */
#sect_read .thumb                       { width:75%; margin:0 0 0 25%; }
#sect_read .thumb img                   { width:100%; border-radius:40px 0 0 40px; }

/* テキスト */
#sect_read article                      { position:relative; width:65%; margin:50px 35% 0 0; padding:100px 10%; background:#2b2b2b; border-radius:0 40px 40px 0; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
#sect_read article h1                   { position:absolute; top:-40px; left:auto; font-size:110px; line-height:1; color:#ffcc33; font-style:italic; font-weight:500; letter-spacing:0.2em; text-shadow:2px 2px 10px rgb(0, 0, 0); font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
#sect_read article h2                   { font-size:2.6rem; line-height:1.4; letter-spacing:0.05em; color:#ffcc33; font-weight:bold; margin-bottom:40px; text-shadow:1px 1px 8px rgb(0,0,0); }
#sect_read article p                    { font-size:1.1rem; line-height:2.0; letter-spacing:0.08em; color:#fff; font-weight:bold; margin-bottom:40px; text-shadow:1px 1px 6px rgb(0,0,0); }


/* ====================================================================================================
   Sect／マップ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_map                               { position:relative; background:#333366; }
#sect_map img                           { width:100%; }

/* TOP10 */
#sect_map a.star                        { position:absolute; z-index:2; }
#sect_map a.star                        { padding:5px 5px 5px 30px; font-size:0.9rem; line-height:1.0; letter-spacing:0.05em; font-weight:bold; color:#ffcc33; text-decoration:underline; background:url(../img/common/etc/star.svg) no-repeat left center; background-size:16px; }
#sect_map a.star._01                    { top:52%; left:46%; }
#sect_map a.star._02                    { top:36%; left:60%; }
#sect_map a.star._03                    { top:39%; left:61%; }
#sect_map a.star._04                    { top:27%; left:57%; }
#sect_map a.star._05                    { top:42%; left:62%; }
#sect_map a.star._06                    { top:61%; left:26%; }
#sect_map a.star._07                    { top:45%; left:63%; }
#sect_map a.star._08                    { top:33%; left:59%; }
#sect_map a.star._09                    { top:30%; left:58%; }
#sect_map a.star._10                    { top:55%; left:47%; }
/* 注目馬 */
#sect_map a.star._11                    { top:46%; left:44%; }
#sect_map a.star._12                    { top:49%; left:45%; }
#sect_map a.star._13                    { top:58%; left:48%; }
#sect_map a.star._14                    { top:43%; left:43%; }
#sect_map a.star._11,
#sect_map a.star._12,
#sect_map a.star._13,
#sect_map a.star._14                    { color:#f96; background-image:url(../img/common/etc/look.svg); }

/* ====================================================================================================
   Sect／TOP10
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_top10                             { padding:0 0 40px 0; }

/* ボックス */
.top10                                  { position:relative; z-index:2; width:calc(100% - 100px); max-width:1200px; margin:0 auto 50px auto; border:3px solid #5a5a96; border-radius:40px; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
.top10::before                          { content:""; position:absolute; top:0; left:0; right:0; z-index:-1; width:100%; height:100%; background:rgba(20,20,50,0.95); border-radius:37px; }

/* 共通 */
.top10 .horse,
.top10 .breeder                         { display:flex; }
.top10 .breeder                         { align-items:flex-end; }
.top10 .icon                            { position:absolute; top:-50px; right:5%; z-index:2; width:200px; }
.top10 .icon::before                    { content:""; position:absolute; top:47px; left:0; right:0; z-index:-1; width:90%; height:4px; margin:0 auto; background:#20203c; }

/* 個別 */
.top10._01                              { border-color:#fc3; margin-top:-100px; }
.top10._01 .horse .txt                  { color:#fc3;}
.top10._02                              { border-color:#bbb; }
.top10._02 .horse .txt                  { color:#bbb;}
.top10._03                              { border-color:#f28f68; }
.top10._03 .horse .txt                  { color:#f28f68;}

/* 馬 */
.top10 .horse .thumb                    { z-index:-1; width:50%; border-radius:40px 0 0 0; -webkit-mask-image:url(../img/common/etc/mask_horse_l.svg); mask-image:url(../img/common/etc/mask_horse_l.svg); -webkit-mask-size:100%; mask-size:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:top center; mask-position:top center; overflow:hidden; }
.top10 .horse .thumb img                { width:100%; }
.top10 .horse .txt                      { width:50%; margin:0 0 0 -5%; color:#ceb4e5; text-shadow:1px 1px 0 #191936,-1px 1px 0 #191936,1px -1px 0 #191936,-1px -1px 0 #191936,1px 0 0 #191936,0 1px 0 #191936,-1px 0 0 #191936,0 -1px 0 #191936,1px 1px 10px rgb(0,0,0,0.8); }
.top10 .horse .txt h1                   { font-size:3.0rem; line-height:1.2; letter-spacing:0.05em; font-weight:bold; margin:140px 0 10px 0; }
.top10 .horse .txt h2                   { font-size:1.3rem; line-height:1.4; letter-spacing:0.08em; font-weight:bold; margin-bottom:30px; }
.top10 .horse .txt p                    { font-size:0.9rem; line-height:2.0; letter-spacing:0.08em; font-weight:bold; margin-bottom:10px; }

/* 調教師 */
.top10 .breeder                         { margin:-4vw 0 0 0; }
.top10 .breeder .thumb                  { z-index:-1; width:50%; border-radius:0 0 40px 0; -webkit-mask-image:url(../img/common/etc/mask_breeder_r.svg); mask-image:url(../img/common/etc/mask_breeder_r.svg); -webkit-mask-size:100%; mask-size:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:top center; mask-position:top center; overflow:hidden; }
.top10 .breeder .thumb img              { width:100%; }
.top10 .breeder .txt                    { width:50%; padding:0 2% 0 12%; color:#fff; text-shadow:1px 1px 0 #191936,-1px 1px 0 #191936,1px -1px 0 #191936,-1px -1px 0 #191936,1px 0 0 #191936,0 1px 0 #191936,-1px 0 0 #191936,0 -1px 0 #191936,1px 1px 10px rgb(0,0,0,0.8); }
.top10 .breeder .txt h1                 { font-size:1.5rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; margin:30px 0 10px 0; }
.top10 .breeder .txt h2                 { font-size:3.0rem; line-height:1.2; letter-spacing:0.08em; font-weight:bold; margin-bottom:10px; }
.top10 .breeder .txt h2 span            { font-size:70%; margin-left:0.1em; }
.top10 .breeder .txt p                  { font-size:0.9rem; line-height:2.0; letter-spacing:0.08em; font-weight:bold; margin-bottom:30px; }
.top10 .toggle_btn                      { margin-bottom:8vw; }

/* 開閉ボタン */
.toggle_btn                             { max-width:300px; height:60px; display:block; font-size:1.1rem; line-height:60px; color:#fff; text-align:center; font-weight:bold; background:url(../img/common/wt/plus.svg) no-repeat 16px center #339; background-size:20px; border-radius:30px; cursor:pointer; text-shadow:none; transition:all 0.2s ease; box-shadow:15px 15px 15px rgba(0,0,0,0.15); }
.toggle_btn:hover                       { background-color:#3333cc; }
.toggle_btn.on                          { background-image:url(../img/common/wt/minus.svg); background-color:#C03 }
.toggle_btn span.off,
.toggle_btn.on span.on                  { display:none; }
.toggle_btn.on span.off                 { display:block; }

/* 開閉ボックス */
.toggle_box                             { width:100%; margin:0 auto; padding:1px 60px 1px 60px; background:url(../img/common/etc/bg_top10_r.jpg) no-repeat left top; background-size:100% auto; border-radius:0 0 40px 40px; }
.toggle_box .inner                      { position:relative; width:80%; max-width:1200px; margin:0 auto; padding:100px 0; }
.toggle_box h1                          { font-size:3.0rem; line-height:1.4; letter-spacing:0.05em; width:80%; margin:0 auto 40px auto; color:#fff; text-align:center; }
.toggle_box p                           { font-size:1.1rem; line-height:2.7; letter-spacing:0.05em; margin:0 0 1.0rem; font-weight:bold; color:#fff; }

/* 逆転設定 */
.top10._02 .icon,
.top10._04 .icon,
.top10._06 .icon,
.top10._08 .icon,
.top10._10 .icon                        { right:auto; left:5%; }
.top10._02 .horse,
.top10._04 .horse,
.top10._06 .horse,
.top10._08 .horse,
.top10._10 .horse,
.top10._01 .breeder,
.top10._03 .breeder,
.top10._05 .breeder,
.top10._07 .breeder,
.top10._09 .breeder                     { flex-direction:row-reverse; }
.top10._02 .horse .thumb,
.top10._04 .horse .thumb,
.top10._06 .horse .thumb,
.top10._08 .horse .thumb,
.top10._10 .horse .thumb                { border-radius:0 37px 0 0; -webkit-mask-image:url(../img/common/etc/mask_horse_r.svg); mask-image:url(../img/common/etc/mask_horse_r.svg); }
.top10._02 .breeder .thumb,
.top10._04 .breeder .thumb,
.top10._06 .breeder .thumb,
.top10._08 .breeder .thumb,
.top10._10 .breeder .thumb              { border-radius:0 0 0 37px; -webkit-mask-image:url(../img/common/etc/mask_breeder_l.svg); mask-image:url(../img/common/etc/mask_breeder_l.svg); }
.top10._02 .horse .txt,
.top10._04 .horse .txt,
.top10._06 .horse .txt,
.top10._08 .horse .txt,
.top10._10 .horse .txt                  { margin:0 -7% 0 0; }
.top10._02 .breeder .txt,
.top10._04 .breeder .txt,
.top10._06 .breeder .txt,
.top10._08 .breeder .txt,
.top10._10 .breeder .txt                { padding: 0 2% 0 4%; }
.top10._02 .toggle_box,
.top10._04 .toggle_box,
.top10._06 .toggle_box,
.top10._08 .toggle_box,
.top10._10 .toggle_box                  { background-image:url(../img/common/etc/bg_top10_l.jpg) }

/* インタビュー */
p._read        { font-weight:500; } 
p._interviewer { margin:80px 0 30px 0; font-size:1.2rem; line-height:1.6; color:#FF0; }
p._answer      { margin: 0px 0  0px 0; padding:0 0 0 40px; font-size:1.2rem; line-height:1.6; color:#F99; }
p._answer span { display:block; margin:20px 0 0 -40px; }


/* ====================================================================================================
   Sect／その他（注目馬）
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_top_other                         { padding:0 0 40px 0; }

/* ボックス */
.top_other                              { position:relative; z-index:2; width:calc(100% - 100px); max-width:1200px; margin:0 auto 50px auto; border:3px solid #cc0033; border-radius:40px; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
.top_other::before                      { content:""; position:absolute; top:0; left:0; right:0; z-index:-1; width:100%; height:100%; background:#660000; border-radius:37px; }

/* 共通 */
.top_other .horse,
.top_other .breeder                     { display:flex; }
.top_other .breeder                     { align-items:flex-end; flex-direction:row-reverse; }
.top_other .icon                        { position:absolute; top:-50px; right:5%; z-index:2; width:200px; }
.top_other .icon::before                { content:""; position:absolute; top:47px; left:0; right:0; z-index:-1; width:90%; height:4px; margin:0 auto; background:#660000; }

/* 馬 */
.top_other .horse .thumb                { z-index:-1; width:50%; border-radius:40px 0 0 0; -webkit-mask-image:url(../img/common/etc/mask_horse_l.svg); mask-image:url(../img/common/etc/mask_horse_l.svg); -webkit-mask-size:100%; mask-size:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:top center; mask-position:top center; overflow:hidden; }
.top_other .horse .thumb img            { width:100%; }
.top_other .horse .txt                  { width:50%; margin:0 0 0 -5%; color:#ffcccc; text-shadow:1px 1px 0 #191936,-1px 1px 0 #191936,1px -1px 0 #191936,-1px -1px 0 #191936,1px 0 0 #191936,0 1px 0 #191936,-1px 0 0 #191936,0 -1px 0 #191936,1px 1px 10px rgb(0,0,0,0.8); }
.top_other .horse .txt h1               { font-size:3.0rem; line-height:1.2; letter-spacing:0.05em; font-weight:bold; margin:140px 0 10px 0; }
.top_other .horse .txt h2               { font-size:1.3rem; line-height:1.4; letter-spacing:0.08em; font-weight:bold; margin-bottom:30px; }
.top_other .horse .txt p                { font-size:0.9rem; line-height:2.0; letter-spacing:0.08em; font-weight:bold; margin-bottom:10px; }

/* 調教師 */
.top_other .breeder                     { margin:-4vw 0 0 0; }
.top_other .breeder .thumb              { z-index:-1; width:50%; border-radius:0 0 40px 0; -webkit-mask-image:url(../img/common/etc/mask_breeder_r.svg); mask-image:url(../img/common/etc/mask_breeder_r.svg); -webkit-mask-size:100%; mask-size:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:top center; mask-position:top center; overflow:hidden; }
.top_other .breeder .thumb img          { width:100%; }
.top_other .breeder .txt                { width:50%; padding:0 2% 0 12%; color:#fff; text-shadow:1px 1px 0 #191936,-1px 1px 0 #191936,1px -1px 0 #191936,-1px -1px 0 #191936,1px 0 0 #191936,0 1px 0 #191936,-1px 0 0 #191936,0 -1px 0 #191936,1px 1px 10px rgb(0,0,0,0.8); }
.top_other .breeder .txt h1             { font-size:1.5rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; margin:30px 0 10px 0; }
.top_other .breeder .txt h2             { font-size:3.0rem; line-height:1.2; letter-spacing:0.08em; font-weight:bold; margin-bottom:10px; }
.top_other .breeder .txt h2 span        { font-size:70%; margin-left:0.1em; }
.top_other .breeder .txt p              { font-size:0.9rem; line-height:2.0; letter-spacing:0.08em; font-weight:bold; margin-bottom:30px; }
.top_other .toggle_btn                  { margin-bottom:8vw; }

/* 開閉ボックス */
.top_other .toggle_box                  { background-image:url(../img/common/etc/bg_top_other_r.jpg); }

/* 開閉ボタン */
.top_other .toggle_btn                  { background-color:#cc0033; }
.top_other .toggle_btn:hover            { background-color:#ed295a; }
.top_other .toggle_btn.on               { background-image:url(../img/common/wt/minus.svg); background-color:#C03 }


/* ====================================================================================================
   Sect／SNS
   ---------------------------------------------------------------------------------------------------- */

#sect_sns                               { padding:10px 0 60px 0; }
#sect_sns ul                            { display:flex; flex-wrap:wrap; justify-content:center; }
#sect_sns ul li                         { width:120px; margin:0 20px 40px 20px; }
#sect_sns ul li a                       { display:block; margin:0 0 10px 0; padding:35px; background:#eee; border-radius:50%; box-shadow:25px 25px 50px rgba(0,0,0,0.15); transform:scale(1.0); transition:.2s; }
#sect_sns ul li a:hover                 { transform:scale(1.1); }
#sect_sns ul li h1                      { font-size:0.9rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; text-align:center; color:#333; }


/* ====================================================================================================
   Sect／動画
   ---------------------------------------------------------------------------------------------------- */

#sect_feature                           { position:relative; padding:100px 0 80px 0; background:#e3ecb8; }
#sect_feature ul                        { display:flex; flex-wrap:wrap; margin:0 -20px 20px -20px; }
#sect_feature ul li                     { width:calc(33.33% - 40px); margin:0 20px 40px 20px; }
#sect_feature ul li .thumb              { position:relative; overflow:hidden; }
#sect_feature ul li .thumb::before      { content:""; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:60px; width:60px; background:url(../img/common/etc/youtube) no-repeat center center; background-size:cover; }
#sect_feature ul li .txt                { padding:20px 25px; }
#sect_feature ul li .txt h2             { font-size:1.1rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; margin:0 0 0.8rem 0; }
#sect_feature ul li .txt p              { font-size:0.8rem; line-height:1.8; letter-spacing:0.05em; font-weight: 500; margin:0 0 1.0rem 0; }
#sect_feature ul li                     { transform:scale(1.0); transition:.2s; }
#sect_feature ul li a                   { display:block; color:#111; background:#fff; border-radius:20px; overflow:hidden; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
#sect_feature ul li:hover               { transform:scale(1.1); }


/* ====================================================================================================
   Sect／アーカイブ
   ---------------------------------------------------------------------------------------------------- */

#sect_archive                           { position:relative; padding:100px 0 80px 0; background:#f8f8f8; }
#sect_archive ul                        { display:flex; flex-wrap:wrap; margin:0 -20px 20px -20px; }
#sect_archive ul li                     { width:calc(33.33% - 40px); margin:0 20px 40px 20px; }
#sect_archive ul li .thumb              { overflow:hidden; }
#sect_archive ul li .txt                { padding:20px 25px; }
#sect_archive ul li .txt h2             { font-size:1.1rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; margin:0 0 0.8rem 0; }
#sect_archive ul li .txt p              { font-size:0.8rem; line-height:1.8; letter-spacing:0.05em; font-weight: 500; margin:0 0 1.0rem 0; }
#sect_archive ul li                     { transform:scale(1.0); transition:.2s; }
#sect_archive ul li a                   { display:block; color:#111; background:rgba(255,255,255,0.7); border-radius:20px; overflow:hidden; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
#sect_archive ul li:hover               { transform:scale(1.1); }


/* ====================================================================================================
   Sect／おすすめリンク
   ---------------------------------------------------------------------------------------------------- */

#sect_links                             { padding:100px 0 80px 0; background:#67ab3a; }
#sect_links ul                          { display:flex; flex-wrap:wrap; margin:0 -20px 20px -20px; }
#sect_links ul li                       { width:calc(25% - 40px); margin:0 20px 40px 20px; }
#sect_links ul li                       { transform:scale(1.0); transition:.2s; }
#sect_links ul li a                     { display:block; padding:8px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
#sect_links ul li:hover                 { transform:scale(1.2); }


/* ====================================================================================================
   フッタ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
footer                                  { position:relative; padding:30px 0 0 0; background:#1c5808; }
footer .container                       { width:600px; }
footer address                          { font-style:normal; }
footer h1 ,
footer h1 img                           { width:300px; height:150px; margin:0 auto; }
footer h2                               { font-size:20px; font-weight:  bold; line-height:30px; color:#fff; letter-spacing:0.05em; padding: 0 0 10px 0; }
footer dl                               { font-size:15px; font-weight:normal; line-height:22px; color:#fff; border-top:1px solid rgba(0,0,0,0.1); }
footer dt                               { width:60px; position:relative; padding:11px 0; }
footer dt:before                        { content:""; position:absolute; top:0; right:15px; bottom:0; margin:auto 0; height:14px; width:2px; background:rgba(0,0,0,0.2); -webkit-transform:rotate(20deg); transform:rotate(20deg); }
footer dd                               { position:relative; width:auto; border-bottom:1px solid rgba(0,0,0,0.1); margin:-45px 0 0 0; padding:11px 0 11px 65px; }
footer dd a                             { color:#fff; text-decoration:underline; }
footer dd a.icon                        { background:#81c057; width:30px; height:30px; position:absolute; top:0; bottom:0; right:5px; margin:auto 0; border-radius:50%; }
footer dd a.icon:hover                  { background:#66ad36; }
footer dd a.icon img                    { width:20px; height:20px; margin:5px; }
footer dd:last-child                    { border-bottom:none; }
footer p.copy                           { background:#194f07; font-size:100%; font-weight:normal; text-align:center; color:#fff; margin:60px 0 0 0; padding:15px; border-top:1px solid rgba(0,0,0,0.05); letter-spacing:0.1em; font-family:Arial, Helvetica, sans-serif; }
footer .btns                            { width:100%; }

/* ページ先頭 */
#scroll_top                             { transform:scale(0) rotate(60deg); position:fixed; bottom:30px; right:30px; z-index:98; width:60px; height:60px; transition:.2s; }
#scroll_top a                           { width:100%; height:100%; background:url(../img/common/wt/up.svg) no-repeat center center rgba(0,0,0,0.5); display:block; display:block; background-size:20px; border-radius:30px; transition:.2s; }
#scroll_top a:hover                     { transform:scale(1.2); background-color:rgba(0,0,0,1); }
#scroll_top.on                          { transform:scale(1.0) rotate(0deg); }


/* ====================================================================================================
   タブレット設定
   ---------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1100px){
}


/* ====================================================================================================
   スマホ設定
   ---------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 760px){

/* ベース */
.container                                { width:88%; }

/* フェード */ 
._fade                                    { opacity:0; visibility:hidden; transition:1.2s 0.1s ease; transform:translateY(30px); }
._fade._fade_02                           { transition-delay:0.2s; }
._fade._fade_03                           { transition-delay:0.3s; }
._fade._fade_04                           { transition-delay:0.4s; }
._fade._fade_05                           { transition-delay:0.5s; }
._fade._fade_06                           { transition-delay:0.6s; }
._fade._fade_07                           { transition-delay:0.7s; }
._fade._fade_08                           { transition-delay:0.8s; }
._fade._fade_09                           { transition-delay:0.9s; }
._fade._fade_10                           { transition-delay:1.0s; }
._active                                  { opacity:1; visibility:visible; transform:translateY(0); }

/* タイトル：大 */  
.ttl_l                                    { margin-bottom:30px; font-size:1.8rem; }
.ttl_l font                               { display:block; font-size:40%; letter-spacing:0.8em; padding:0 0 0 0.8em; }
.ttl_l span                               { padding:0 15px; }
.ttl_l span::after,            
.ttl_l span::before                       { height:30px; }
.ttl_l span::before                       { left:-15px; }
.ttl_l span::after                        { right:-15px; }

/* フォトライブラリー */  
.photos                                   { display:flex; flex-wrap:wrap; margin:40px -10px 10px -10px; }
.photos img                               { width:calc(50% - 20px); margin:0 10px 20px 10px; border-radius:5px; }
.photos img:nth-child(3)                  { width:calc(100% - 20px);} 


/* ====================================================================================================
   ヘッタ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
header                                  { height:50px; }

/* ロゴ */
header h1,
header h1 img                           { width:100px; height:50px; }

/* ナビ */
header nav                              { width:calc(100% - 100px); }
header nav ul                           { padding-right:20px; }
header nav ul li a                      { padding:20px 7px; font-size:0.4rem; }
header nav ul li.icon                   { width:10px; height:10px; margin:0 5px; }
header nav ul li.icon a                 { width:10px; height:10px; padding:0; margin:20px 0 20px 0; line-height:10px; }
header nav ul li.icon a img             { width:10px; height:10px; }


/* ====================================================================================================
   Sect／キービジュアル
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#aside_kv:after                         { height:100px; }

/* タイトル・見出し */
#aside_kv .hgroup                       { position:relative; width:100%; padding:10px 0 60px 0; background:#fff; }
#aside_kv .hgroup .flex                 { flex-wrap:wrap; width:80%; max-width:900px; margin:0 auto; }
#aside_kv .hgroup .flex h1              { width:100%; margin:0 0 50px 0; font-size:1.3rem; text-align:center; }
#aside_kv .hgroup .flex h1 span         { margin:0.5em 0 0 0.8rem; font-size:0.83rem; }
#aside_kv .hgroup .flex h2              { width:100%; display:flex; align-items: center; }
#aside_kv .hgroup .flex h2              { font-size:0.8rem; line-height:3.0; letter-spacing:0.5em; font-weight:bold; font-feature-settings:normal; }
#aside_kv .hgroup h3                    { position:absolute; top:340px; left:3%; z-index:2; margin:-50px 0 0 0; width:50%; }
#aside_kv .hgroup h3 img                { width:100%; height:100%; }

/* Slick調整 */
#aside_kv .slider                       { width:100%; height:100%; z-index:-1; margin:0px 0 0 0; background:#000; }

/* サブイメージ */
#aside_kv .sub                          { position:absolute; z-index:2; border-radius:50%; overflow:hidden; box-shadow:25px 25px 50px rgba(0,0,0,0.15); }
#aside_kv .sub._01                      { top:220px; right:-2%; width:20%; }
#aside_kv .sub._02                      { top: 96%; left:-4%; width:28%; margin-top:-25vw; }
#aside_kv .sub._03                      { top:105%; left:28%; width:14%; margin-top:-10vw; }


/* ====================================================================================================
   Sect／導入
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_read                              { position:relative; padding:40px 0 20px 0; }

/* サムネイル */
#sect_read .thumb                       { width:100%; margin:0; }
#sect_read .thumb img                   { width:100%; border-radius:0; }

/* テキスト */
#sect_read article                      { width:100%; margin:0; padding:60px 12% 0 12%; border-radius:0; background:#333366; box-shadow:none; }
#sect_read article h1                   { top:-20px; left:auto; font-size:55px; text-shadow:2px 2px 10px rgb(0, 0, 0) }
#sect_read article h2                   { font-size:1.4rem; line-height:1.4; margin-bottom:30px; }
#sect_read article p                    { font-size:0.9rem; line-height:2.0; margin-bottom:30px; }
#sect_read article .btns                { flex-wrap:wrap; }
#sect_read article .btns .btn           { width:100%; margin:0 0px 15px 0; }
 

/* ====================================================================================================
   Sect／マップ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_map                               { position:relative; padding:20px 0; background:#333366; overflow:hidden; }
#sect_map img                           { transform:scale(1.4); margin:0; }

#sect_map a.star                        { position:absolute; z-index:2; }
#sect_map a.star                        { padding:4px 4px 4px 26px; font-size:0.7rem; line-height:1.0; letter-spacing:0.04em; font-weight:bold; color:#ffcc33; text-decoration:underline; background:url(../img/common/etc/star.svg) no-repeat left center; background-size:14px; }
#sect_map a.star._01                    { top:52%; left:13%; }
#sect_map a.star._02                    { top:22%; left:46%; }
#sect_map a.star._03                    { top:29%; left:48%; }
#sect_map a.star._04                    { top: 1%; left:40%; }
#sect_map a.star._05                    { top:43%; left:52%; }
#sect_map a.star._06                    { top:63%; left:15%; }

#sect_map a.star._07                    { top:8%; left:42%; }
#sect_map a.star._08                    { top:15%; left:44%; }
#sect_map a.star._09                    { top:36%; left:50%; }
#sect_map a.star._10                    { top:45%; left:11%; }

/* 注目馬 */
#sect_map a.star._11                    { top:24%; left:5%; }
#sect_map a.star._12                    { top:31%; left:7%; }
#sect_map a.star._13                    { top:38%; left:9%; }
#sect_map a.star._14                    { top:17%; left:3%; }


/* ====================================================================================================
   Sect／TOP10
   ---------------------------------------------------------------------------------------------------- */

/* ボックス */
.top10                                  { width:calc(100% - 10px); margin:0 auto 30px auto; border:2px solid #5a5a96; border-radius:20px; box-shadow:15px 15px 30px rgba(0,0,0,0.15); }
.top10::before                          { border-radius:17px; }

/* 共通 */
.top10 .horse,
.top10 .breeder                         { display:flex; flex-wrap:wrap; }
.top10 .icon                            { position:absolute; top:-25px; right:3%; z-index:2; width:130px; }
.top10 .icon::before                    { top:23px; width:76%; height:4px; }

/* 個別 */
.top10._01                              { margin-top:-10px; }

/* 馬 */
.top10 .horse .thumb                    { z-index:-1; width:90%; border-radius:20px 0 0 0; }
.top10 .horse .thumb img                { width:100%; }
.top10 .horse .txt                      { width:100%; margin:0 0 40px 0; padding:0 8% 0 8%; }
.top10 .horse .txt h1                   { font-size:2.0rem; margin:-25px 0 10px 0; }
.top10 .horse .txt h2                   { font-size:1.0rem; margin-bottom:15px; }
.top10 .horse .txt p                    { font-size:0.8rem; margin-bottom: 5px; }

/* 調教師 */
.top10 .breeder                         { margin:0; }
.top10 .breeder .thumb                  { width: 90%; margin:0 auto; border-radius:0; -webkit-mask:none; mask:none; }
.top10 .breeder .thumb img              { width:100%; border-radius:30px; }
.top10 .breeder .txt                    { width:100%; padding:0 8% 0 8%; }
.top10 .breeder .txt h1                 { font-size:1.0rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; margin:-50px 0 10px 0; }
.top10 .breeder .txt h2                 { font-size:2.0rem; line-height:1.2; letter-spacing:0.08em; font-weight:bold; margin-bottom:10px; }
.top10 .breeder .txt h2 span            { font-size:70%; margin-left:0.1em; }
.top10 .breeder .txt p                  { font-size:0.8rem; line-height:2.0; letter-spacing:0.08em; font-weight:bold; margin-bottom:30px; }
.top10 .toggle_btn                      { width:100%; max-width:100%; margin-bottom:40px; }

/* 開閉ボックス */
.toggle_box                             { padding:1px 8% 1px 8%; background:none;border-radius:0 0 20px 420px; }
.toggle_box .inner                      { width:100%; padding:80px 0; }
.toggle_box h1                          { font-size:1.8rem; line-height:1.3; width:100%; margin:0 auto 20px auto; }
.toggle_box p                           { font-size:1.0rem; line-height:2.0; letter-spacing:0.05em; font-weight:500; }

/* 逆転設定 */
.top10._02 .icon,
.top10._04 .icon,
.top10._06 .icon,
.top10._08 .icon,
.top10._10 .icon                        { left:3%; }
.top10._01 .breeder,
.top10._03 .breeder,
.top10._05 .breeder,
.top10._07 .breeder,
.top10._09 .breeder                     { flex-direction:normal; }
.top10 .breeder .thumb                  { border-radius:10px !important; -webkit-mask:none !important; mask:none !important; }
.top10._02 .horse .txt,
.top10._04 .horse .txt,
.top10._06 .horse .txt,
.top10._08 .horse .txt,
.top10._10 .horse .txt                  { margin:0 0 40px 0; }
.top10._02 .breeder .txt,
.top10._04 .breeder .txt,
.top10._06 .breeder .txt,
.top10._08 .breeder .txt,
.top10._10 .breeder .txt                { padding:0 8%; }
.top10._01 .toggle_box,
.top10._02 .toggle_box,
.top10._03 .toggle_box,
.top10._04 .toggle_box,
.top10._05 .toggle_box,
.top10._06 .toggle_box,
.top10._07 .toggle_box,
.top10._08 .toggle_box,
.top10._09 .toggle_box,
.top10._10 .toggle_box                  { background:none; }


/* ====================================================================================================
   Sect／その他（注目馬）
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_top_other                         { padding:0 0 40px 0; }

/* ボックス */
.top_other                              { width:calc(100% - 10px); margin:0 auto 30px auto; border:2px solid #cc0033; border-radius:20px; box-shadow:15px 15px 25px rgba(0,0,0,0.15); }
.top_other::before                      { border-radius:17px; }

/* 共通 */
.top_other .horse,
.top_other .breeder                     { display:flex; flex-wrap:wrap; }
.top_other .icon                        { position:absolute; top:-25px; right:3%; z-index:2; width:130px; }
.top_other .icon::before                { top:23px; width:76%; height:4px; }

/* 馬 */
.top_other .horse .thumb                { width:90%; border-radius:20px 0 0 0; }
.top_other .horse .thumb img            { width:100%; }
.top_other .horse .txt                  { width:100%; margin:0 0 40px 0; padding:0 8% 0 8%; }
.top_other .horse .txt h1               { font-size:2.0rem; margin:-25px 0 10px 0; }
.top_other .horse .txt h2               { font-size:1.0rem; margin-bottom:15px; }
.top_other .horse .txt p                { font-size:0.8rem; margin-bottom: 5px; }

/* 調教師 */
.top_other .breeder                     { margin:0; }
.top_other .breeder .thumb              { width: 90%; margin:0 auto; border-radius:0; -webkit-mask:none; mask:none; }
.top_other .breeder .thumb img          { width:100%; border-radius:30px; }
.top_other .breeder .txt                { width:100%; padding:0 8% 0 8%; }
.top_other .breeder .txt h1             { font-size:1.0rem; line-height:1.4; letter-spacing:0.05em; font-weight:bold; margin:-50px 0 10px 0; }
.top_other .breeder .txt h2             { font-size:2.0rem; line-height:1.2; letter-spacing:0.08em; font-weight:bold; margin-bottom:10px; }
.top_other .breeder .txt h2 span        { font-size:70%; margin-left:0.1em; }
.top_other .breeder .txt p              { font-size:0.8rem; line-height:2.0; letter-spacing:0.08em; font-weight:bold; margin-bottom:30px; }
.top_other .toggle_btn                  { width:100%; max-width:100%; margin-bottom:40px; }


/* ====================================================================================================
   Sect／SNS
   ---------------------------------------------------------------------------------------------------- */

#sect_sns ul li                         { width:100px; margin:0 15px 30px 15px; }
#sect_sns ul li a                       { margin:0 0 8px 0; padding:25px; box-shadow:15px 15px 30px rgba(0,0,0,0.15);}
#sect_sns ul li a:hover                 { transform:scale(1.1); }
#sect_sns ul li h1                      { font-size:0.8rem; }


/* ====================================================================================================
   Sect／注目馬
   ---------------------------------------------------------------------------------------------------- */
   
#sect_feature                           { padding:80px 0 60px 0; }
#sect_feature ul                        { margin:0 -10px 10px -10px; }
#sect_feature ul li                     { width:calc(50% - 20px); margin:0 10px 20px 10px; }


/* ====================================================================================================
   Sect／アーカイブ
   ---------------------------------------------------------------------------------------------------- */

#sect_archive                           { padding:80px 0 60px 0; }
#sect_archive ul                        { margin:0 -10px 10px -10px; }
#sect_archive ul li                     { width:calc(50% - 20px); margin:0 10px 20px 10px; }


/* ====================================================================================================
   Sect／おススメリンク
   ---------------------------------------------------------------------------------------------------- */
   
#sect_links ul                          { margin:0 -10px 10px -10px; }
#sect_links ul li                       { width:calc(50% - 20px); margin:0 10px 20px 10px; }
#sect_links ul li a                     { padding:4px; border-radius:4px; box-shadow:15px 15px 25px rgba(0,0,0,0.15); }


/* ====================================================================================================
   フッタ
   ---------------------------------------------------------------------------------------------------- */

footer .container                       { width:88%; }
footer h1 ,
footer h1 img                           { width:200px; height:100px; }
footer .btns                            { flex-wrap:wrap; }
footer .btns .btn                       { width:100%; margin:0 auto 15px auto; }

/* ページ先頭 */
#scroll_top                             { bottom:20px; right:20px; width:44px; height:44px; }
#scroll_top a                           { background-size:16px; border-radius:22px; }
#scroll_top a:hover                     { transform:scale(1.2); background-color:rgba(0,0,0,1); }

}