/* Common Parts */
html { font-family: "游ゴシック", YuGothic , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size:62.5%; overflow-x:hidden; }
body { margin:0; padding:0; background-color: #f5f5f5; fill:#000; overflow-x:hidden; overflow-wrap: break-word; }
button:focus { outline:0; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box }

.sp-on {display:block !important;}
.tab-on {display:none;}
.pc-on {display:none;}

.eng_wf-r {font-family: 'Readex Pro', sans-serif; font-weight:400 !important; }
.eng_wf-m {font-family: 'Readex Pro', sans-serif; font-weight:500 !important; }
.eng_wf-b {font-family: 'Readex Pro', sans-serif; font-weight:700 !important;}

#night { background-color: #212121; color:#fff; fill:#fff;}

/* Typography */
h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:20px; }
h1 { font-size:2.4rem; }
h2 { font-size:2rem; }
h3 { font-size:1.8rem; }
h4 { font-size:1.6rem; }
h5 { font-size:1.4rem; }
h6 { font-size:1.2rem; }
p, ul, dl { font-size:1.3rem; line-height:160%; margin:0; }
sub, sup { font-size:1rem; color:#ff0000; display:inline-block; transform: translateY(-2px) scale(0.8);}
.txt_jp { letter-spacing: 1px; }
.txt_en { text-justify:none !important; line-height:150%; }


/* Links */
a, a:hover, a:active, a:focus, a:visited { text-decoration: none; color: #000; cursor: pointer; }
#night a, #night a:hover, #night a:active, #night a:focus, #night a:visited { color:#fff; }
/* List */
ul, li { margin:0; padding:0; list-style: none;}


/* Header */

.h_icon { position:fixed; bottom:20px; right:20px; width:60px; height:60px; border-radius:30px; background-color: #f5f5f5; box-shadow: inset 0 0 15px rgb(120 120 120 / 0%), inset 3px 3px 6px rgb(255 255 255 / 0%), 3px 3px 9px rgb(180 180 180 / 80%), -2px -2px 2px #fff; z-index:9000; transition:width 0.4s cubic-bezier(0.85, 0, 0.15, 1), height 0.4s cubic-bezier(0.85, 0, 0.15, 1); }
.h_icon span { position:absolute; right:21px; width:18px; height:2px; border-radius:2px; background-color: #000; display:block;  transition:all ease .3s; }
.h_icon span:nth-of-type(1) { bottom:36px; }
.h_icon span:nth-of-type(2) { bottom:30px; }
.h_icon span:nth-of-type(3) { bottom:24px; }
.h_icon:hover { cursor:pointer; }
.h_icon:hover span { animation:NaviBar .6s cubic-bezier(.64,.01,.34,.99) forwards; }
.h_icon:hover span:nth-of-type(1) { animation-delay: 0s; }
.h_icon:hover span:nth-of-type(2) { animation-delay: .1s; }
.h_icon:hover span:nth-of-type(3) { animation-delay: .2s; }

.h_icon_active { width:220px; height:400px; }
.h_icon_active span:nth-of-type(1) { bottom:30px; }
.h_icon_active span:nth-of-type(2) { bottom:30px; opacity:0; }
.h_icon_active span:nth-of-type(3) { bottom:30px; opacity:0; }

.navi_sp { position:relative; width:100%; left:0; padding:40px; opacity:0;  display:none; }
.nav_open { display:block; opacity:0; animation:NaviOpen .8s cubic-bezier(.64,.01,.34,.99) forwards; }
.navi_sp ul { font-size:1.6rem; line-height:180%; }
.navi_sp li { position:relative; margin-bottom:15px; transition:all .3s cubic-bezier(.64,.01,.34,.99); }
.navi_sp li:last-child { margin:0; }
.navi_sp li:hover::before { position:absolute; content:''; top:12px; left:-6px; width:4px; height:4px; border-radius: 100%; background-color: #000; opacity:0; animation:NaviHover .3s cubic-bezier(.64,.01,.34,.99) forwards; }
.navi_sns { position:relative; margin-top:30px; height:auto; display:flex; flex-wrap:nowrap; align-items: center; }
.sns_ig, .sns_tw { position:relative; }
.sns_ig svg, .sns_tw svg { width:24px; transition:opacity .3s cubic-bezier(0.25, 1, 0.5, 1); }
.sns_ig { margin-right:10px; }
.sns_tw { margin-left:10px; }
.sns_ig a, .sns_tw a { position:absolute; top:0; left:0; width:100%; height:100%; }
.sns_ig:hover svg, .sns_tw:hover svg { opacity:0.5; cursor:pointer; }

#night .h_icon { background-color: #212121; color:#fff; fill:#fff; box-shadow: inset 0 0 15px rgb(120 120 120 / 0%), inset 0 0 8px rgb(255 255 255 / 0%), 5px 5px 9px rgb(15 15 15 / 70%), -2px -2px 2px #454545; }
#night .h_icon span { background-color: #fff; }
#night .navi_sp li:hover::before { background-color: #fff; }


/* Loader */

.loader_inner { position:fixed; top:0; left:0; width:140vw; height:100vh; box-shadow: -4vw 0 8vw 8vw #fff; background-color: #fff; animation:LoaderFade 2s cubic-bezier(.64,.01,.34,.99) forwards;  display:block; z-index:9999; overflow: hidden; }
.loader_hide { display:hide; }

/* MainArea */

#logo_area { position:relative; margin:0; padding:0; }
#main_logo { position:fixed; top:0; left:0; width:100%; height:110px; z-index:99; }
.h_logo { background-color: #f5f5f5; }
#main_logo_a,#main_logo_b,#main_logo_c,#main_logo_d,#main_logo_e,#main_logo_f { position:relative; top:50%; left:50%; transform:translate(-50%,-50%); animation:MainLogoFade .8s cubic-bezier(0.87, 0, 0.13, 1) forwards; opacity:0; }
#main_logo_a { width:150px; }
#main_logo_b { width:140px; }
#main_logo_c { width:70px; }
#main_logo_d { width:165px; }
#main_logo_e { width:75px; }
#main_logo_f { width:50px; }
#main_logo_a a,#main_logo_b a,#main_logo_c a,#main_logo_d a,#main_logo_e a,#main_logo_f a { position:absolute; width:100%; height:100%; top:0; left:0; cursor:pointer; }

#night .h_logo { background-color: #212121;}
#night .loader_inner { background-color: #000; box-shadow: -4vw 0 8vw 8vw #000; }


/* Pager */
.pagination { list-style: none; display: flex; justify-content: center; align-items: center; padding: 5px; margin-top:20px; }
.page { position:relative; width:36px; height:36px; border-radius:100%; border:1px solid #cdcdcd; margin:0 2px; transition:all .3s ease; }
.page a { position:absolute; width:100%; height:100%; padding:10px; text-align:center; font-size:1rem; line-height:16px; color:#000; }
.page:hover, .active { background-color: #000; } 
.page:hover a, .active a { color:#fff; } 
.prev { position:relative; margin-right:10px; }
.next { position:relative; margin-left:10px; }
.prev a, .next a { font-size:1.2rem; }
.prev::before, .next::before { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background-color:#000; transition:width .2s ease; }
.prev:hover::before, .next:hover::before { width:100%; }

#night .page { border:1px solid #565656; }
#night .page a { color:#fff; }
#night .page:hover, #night .active { background-color: #fff; } 
#night .page:hover a, #night .active a { color:#000; } 
#night .prev::before, #night .next::before { background-color:#fff; }



/* ContentsLink */
#content_link { position:relative; width:100%; height:auto; border-top:1px solid #dedede; }
#content_link a { position:absolute; width:100%; height:100%; top:0; left:0; }

#content_link:hover .contents_link_bkg { width:100%; }
#content_link:hover .content_link_inner { padding-left:40px; }
#content_link:hover .content_link_arw { opacity:1; }
.contents_link_bkg { content:''; position:absolute; top:0; left:0; width:0; height:100%; background-color: #edece5; transition:all .6s cubic-bezier(0.87, 0, 0.13, 1); }

.content_link_inner { position:relative; width:80%; left:50%; transform:translateX(-50%); padding:40px 0; transition:padding .6s cubic-bezier(0.87, 0, 0.13, 1); }
.content_link_inner h1 { margin:0; }
.content_link_inner p { position:relative; font-size:1rem; margin:0; }

.content_link_arw { position:absolute; top:50%; left:0; width:24px; transform:translateY(-50%); opacity:0; transition:all .7s cubic-bezier(0.87, 0, 0.13, 1); }
.content_link_arw svg { width:100%; }

#night #content_link { border-top:1px solid #565656 !important; }
#night .contents_link_bkg { background-color: #343434; }




@media screen and (min-width:960px) {
  .sp-on {display:none !important;}
  .tab-on {display:none;}
  .pc-on {display:block !important;}

  /* Header */
  .h_logo { background:none; }
  #main_logo_a,#main_logo_b,#main_logo_c,#main_logo_d,#main_logo_e,#main_logo_f { position:absolute; top:50%; left:40px; transform:translate(0,-50%); animation:MainLogoFade .8s cubic-bezier(0.87, 0, 0.13, 1) forwards; opacity:0; }
  .h_bkg { position:fixed; top:24px; right:30px; width:480px; height:60px; border-radius:30px; background-color: #f5f5f5; box-shadow: inset 0 0 15px rgb(120 120 120 / 0%), inset 0 0 8px rgb(255 255 255 / 0%), 3px 3px 6px rgb(180 180 180 / 80%), -2px -2px 0 #fff; z-index:9000; }
  .navi_pc { position:relative; top:50%; left:50%; transform:translate(-50%, -50%); width:400px; display: flex; align-items: center; justify-content: space-between; }
  .navi_pc ul { width:90%; font-size:1.4rem; display:flex; flex-wrap:wrap; }
  .navi_pc li { position:relative; margin-right:16px; }
  .navi_pc li:last-child { margin:0; }
  .navi_pc li:hover { cursor:pointer; }
  .navi_pc li:hover::before { position:absolute; content:''; top:-6px; left:calc(50% - 2px); width:4px; height:4px; border-radius: 100%; background-color: #000; opacity:0; animation:NaviHover .3s cubic-bezier(.64,.01,.34,.99) forwards; }
  .nav_active::before { position:absolute; content:''; top:-6px; left:calc(50% - 2px); width:4px; height:4px; border-radius: 100%; background-color: #000; opacity:0; animation:NaviHover .3s cubic-bezier(.64,.01,.34,.99) forwards; }
  .navi_sns { width:13%; margin-top:0; margin-left:2%; justify-content: space-between; }
  .sns_ig svg, .sns_tw svg { width:18px; }
  .sns_ig, .sns_tw { margin:0; }

  /* Theme */
  #night .h_logo { background:none; }
  #night .h_bkg { background-color: #212121 !important; color:#fff !important; fill:#fff !important; box-shadow: inset 0 0 15px rgb(120 120 120 / 0%), inset 0 0 8px rgb(255 255 255 / 0%), 3px 3px 6px rgb(15 15 15 / 70%), -2px -2px 0 #454545;  }
  #night .navi_pc li:hover::before, #night .nav_active::before { background-color: #fff; }

}


@media screen and (min-width:1500px) {

  /* Typography */
  h1, h2, h3, h4, h5, h6 { margin-bottom:1.6vw; }
  h1 { font-size:1.8vw; }
  h2 { font-size:1.6vw; }
  h3 { font-size:1.4vw; }
  h4 { font-size:1.2vw; }
  h5 { font-size:1vw; }
  h6 { font-size:0.8vw; }
  p, ul { font-size:0.9vw; }
  sub, sup { font-size:0.8vw;}
  .txt_jp { letter-spacing: 0.1vw; }

  /* Header */
  #main_logo { height:7vw; }
  #main_logo_a { width:8vw; }
  #main_logo_b { width:7vw; }
  #main_logo_c { width:4.5vw; }
  #main_logo_d { width:9vw; }
  #main_logo_e { width:4vw; }
  #main_logo_f { width:3vw; }
  .h_bkg { width:34vw; height:4vw; top:2vw; right:2vw; border-radius:2.5vw; box-shadow: inset 0 0 1vw rgb(120 120 120 / 0%), inset 0 0 0.6vw rgb(255 255 255 / 0%), 0.2vw 0.2vw 0.6vw rgb(180 180 180 / 80%), -0.2vw -0.2vw 0 #fff, inset 0 0 0.4vw rgb(255 255 255 / 20%); }
  .navi_pc { width:28vw; }
  .navi_pc ul { font-size:0.9vw; }
  .navi_pc li { margin-right:1.4vw; }
  .navi_pc li:last-child { margin:0; }
  .navi_pc li:hover::before { top:-0.4vw; left:calc(50% - 0.1vw); width:0.2vw; height:0.2vw; }
  .active::before { top:-0.4vw; left:calc(50% - 0.1vw); width:0.2vw; height:0.2vw; }

  .sns_ig svg, .sns_tw svg { width:1.2vw; }


  /* Pager */
  .pagination { padding: 0.4vw; margin-top:2vw; }
  .page { width:3vw; height:3vw; border:0.1vw solid #cdcdcd; margin:0 0.2vw; }
  .page a { padding:1vw; font-size:0.8vw; line-height:1vw; }
  .prev { margin-right:1vw; }
  .next { margin-left:1vw; }
  .prev a, .next a { font-size:0.9vw; }
  .prev::before, .next::before { bottom:-0.2vw; height:0.1vw; }
  #night .page { border:0.1vw solid #565656; }


  /* ContentsLink */
  #content_link { border-top:0.1vw solid #dedede; }
  #night #content_link { border-top:0.1vw solid #565656 !important; }
  .content_link_inner { padding:4vw 0; }
  .content_link_inner p { font-size:0.8vw; }
  .content_link_arw { width:2vw; }
  #content_link:hover .content_link_inner { padding-left:3vw; }


  /* Theme */
  #night .h_bkg { box-shadow: inset 0 0 1vw rgb(120 120 120 / 0%), inset 0 0 0.6vw rgb(255 255 255 / 0%), 0.2vw 0.2vw 0.6vw rgb(15 15 15 / 80%), -0.1vw -0.1vw 0.2vw #454545, inset 0.1vw 0.1vw 0.2vw rgb(255 255 255 / 20%);  }


}