/* 2026.07.22 common.css から作成 */
@charset "UTF-8";

[v-cloak]{
  display: none;
}
*{padding:0;margin:0;box-sizing:border-box;background-repeat:no-repeat;}
html{overflow-y:scroll;-webkit-text-size-adjust:100%;}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary{display:block;}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption, th{text-align:left;font-weight:normal;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
object, embed{vertical-align:top;}
button{cursor:pointer;border:none;background-color:transparent;}
a{background-color:transparent;-webkit-text-decoration-skip:objects;}
a:active, a:hover{outline-width:0;}
b, strong{font-weight:bolder;}
hr, legend{display:none;}
h1, h2, h3, h4, h5, h6{font-size:100%;font-weight:normal;}
img, abbr, acronym, fieldset{vertical-align:bottom;border-style:none;}
ol, ul{list-style:none;}
.clearfix:after{content:'';display:block;clear:both;height:0;}
[disabled]{cursor:default;}
button, [type="button"], [type="reset"], [type="submit"]{cursor:pointer;}
button, input, optgroup, select, textarea{font:inherit;}
button, select, textarea{color:inherit;border-style:none;background-color:transparent;}
button, html [type="button"], [type="reset"], [type="submit"]{border:none;border-radius:0;-webkit-appearance:button;}
button, select{text-transform:none;}
select::-ms-expand{display:none;}
select::-ms-value{color:currentColor;}
optgroup{font-weight:bold;}
button{overflow:visible;}
textarea{overflow:auto;resize:vertical;}
html{font-size:62.5%;}
/* body{font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Roboto, '游ゴシック  Medium', meiryo, sans-serif;color:#333;font-size:13px;font-size:1.3rem;overflow:hidden;position: relative; */
/*  animation: fadeIn 0.5s ease 0s 0.5 normal;-webkit-animation: fadeIn 0.5s ease 0s 0.5 normal;*/
/* } */
body {
    font-family: var(--font-ja);
}
@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
a{color:#000;text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}



.lazyload, .lazyloading {opacity: 0;}
.lazyloaded {opacity: 1;transition: opacity 1000ms;}

.r-over:hover{opacity:.7;filter:alpha(opacity=70);}
.comp{ font-family: var(--font-comp);}
.en{ font-family: var(--font-en);}
.ja{ font-family: var(--font-ja);}
.oswald{font-family:'Oswald', sans-serif;}
.roboto{font-family:'Roboto', sans-serif;}
.lato{font-family: 'Lato', sans-serif;}
.noto{font-family: 'Noto Serif JP', serif;}
.res-img{width:100%;height:auto;}
.center{text-align:center;}
.left{ text-align: left !important;}
.left-center{ text-align: left !important;}
.center-left{ text-align: center !important;}
._center{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.block{display:block;}
.wrap{padding:0 1.75em}
.sp-no{display:none;}
.sp-hide{display:none;}
.error-color{ color: #F08080; }
.blue{color:#0B536E;}
.red{color:#d12f23;}
.backblue{background:#0B536E;color:#fff;}
.backblue2{background:linear-gradient(90deg, rgba(60, 165, 200, 1) 10%, rgba(97, 200, 180, 1) 100%);color:#fff;}
.backred{background:#d12f23;color:#fff;}
.backgold{background:#b59e74;color:#fff;}
.small{font-size: .9em;}
.small2{font-size: .8em;}
.small3{font-size: .7em;}
@media (min-width: 897px) {
  .left-center,.left_center{ text-align: center !important;}
  .center-left,.center_left{ text-align: left !important;}
}/*  */

/* font-size =============================================*/
.vw_base{
  /* font-size: 10px; */
  font-size: clamp(10px,3.125vw,16px) !important;
  font-size: 3.125vw !important;
  box-sizing: border-box;
}
.vw_base *{
  box-sizing: border-box;
}
@media (min-width: 897px) {
  .vw_base{
    /* W899:10 */
    font-size: clamp(10px,1.112347052vw,14px) !important;
  }
}/*  */

/* Module =============================================*/
:root {

  --c-white: #fcfcfc;
  --c-white2: #f9f9f7;
  --c-black: #000c12;
  --c-black2: #1e282e;
  --c-black3: #666666;
  --c-black4: #444444;
  --c-navy: #193863;
  --c-blue: #2c8abc;
  --c-blue2: #0c77b0;
  --c-navy: #0b536e;
  --c-gold: #b49e73;
  --c-gold2: #c7b299;
  --c-gray: #e9e5dc;
  --c-gray2: #f6f6f6;
  --c-gray3: #dcdfdf;
  --c-grey: #e4e1e1;
  --c-grey2: #f2f1ea;
  --c-grey-txt: #bababa;
  --c-red: #e7404c;
  --c-red2: #e7404b;
  --c-red3: #ee0000;
  --c-pink: #ef7d83;
  --c-bg: #f9f9f9;

  --font-comp: "Roboto","YakuHanJP",'NotoSansCJKjp',sans-serif;
  --font-ja: "YakuHanJP",'NotoSansCJKjp',sans-serif;
  --font-en: 'Roboto', sans-serif;
  --filter-w: invert(100%) sepia(19%) saturate(377%) hue-rotate(316deg) brightness(300%) contrast(91%);
  --filter-wg: invert(96%) sepia(8%) saturate(14%) hue-rotate(314deg) brightness(86%) contrast(111%);
  --filter-red: invert(33%) sepia(39%) saturate(3362%) hue-rotate(347deg) brightness(84%) contrast(106%);
  /* --filter-blue: invert(44%) sepia(81%) saturate(479%) hue-rotate(156deg) brightness(96%) contrast(87%); */
  --filter-blue: invert(48%) sepia(24%) saturate(1382%) hue-rotate(157deg) brightness(94%) contrast(85%);
  --filter-gold: invert(68%) sepia(8%) saturate(1335%) hue-rotate(1deg) brightness(93%) contrast(88%);

  --inn-w: 2rem;
  --inn-w-minus: -2rem;

  --kv-fill-color: #fff;
}

/* 共有パーツ =============================== */
aside{
  padding: 2em 0;
  background-color: var(--c-gray2);
}
.sec_bloc{
  padding-top: 3em;
  padding-bottom: 3em;
}
/* padding top and bottom */
.ptb05{ padding-top: .5em; padding-bottom: .5em;}
.ptb1{ padding-top: 1em; padding-bottom: 1em;}
.ptb2{ padding-top: 2em; padding-bottom: 2em;}
.ptb3{ padding-top: 3em; padding-bottom: 3em;}
.ptb4{ padding-top: 4em; padding-bottom: 4em;}
.ptb5{ padding-top: 5em; padding-bottom: 5em;}
.ptb6{ padding-top: 6em; padding-bottom: 6em;}
.ptb7{ padding-top: 7em; padding-bottom: 7em;}
.ptb8{ padding-top: 8em; padding-bottom: 8em;}
.ptb9{ padding-top: 9em; padding-bottom: 9em;}

/* padding left and right */
.plr05{ padding-left: .5em; padding-right: .5em;}
.plr1{ padding-left: 1em; padding-right: 1em;}
.plr2{ padding-left: 2em; padding-right: 2em;}
.plr3{ padding-left: 3em; padding-right: 3em;}
.plr4{ padding-left: 4em; padding-right: 4em;}
.plr5{ padding-left: 5em; padding-right: 5em;}
.plr6{ padding-left: 6em; padding-right: 6em;}
.plr7{ padding-left: 7em; padding-right: 7em;}
.plr8{ padding-left: 8em; padding-right: 8em;}
.plr9{ padding-left: 9em; padding-right: 9em;}

/* mt */
.mt05{ margin-top: .5em;}
.mt1{ margin-top: 1em;}
.mt2{ margin-top: 2em;}
.mt3{ margin-top: 3em;}
.mt4{ margin-top: 4em;}
.mt5{ margin-top: 5em;}
.mt6{ margin-top: 6em;}
.mt7{ margin-top: 7em;}
.mt8{ margin-top: 8em;}
.mt9{ margin-top: 9em;}

/* mb */
.mb05{ margin-bottom: .5em;}
.mb1{ margin-bottom: 1em;}
.mb2{ margin-bottom: 2em;}
.mb3{ margin-bottom: 3em;}
.mb4{ margin-bottom: 4em;}
.mb5{ margin-bottom: 5em;}
.mb6{ margin-bottom: 6em;}
.mb7{ margin-bottom: 7em;}
.mb8{ margin-bottom: 8em;}
.mb9{ margin-bottom: 9em;}

/* font-size */
.fz1{font-size:1em;}
.fz11{font-size:1.1em;}
.fz12{font-size:1.2em;}
.fz13{font-size:1.3em;}
.fz14{font-size:1.4em;}
.fz15{font-size:1.5em;}
.fz16{font-size:1.6em;}
.fz17{font-size:1.7em;}
.fz18{font-size:1.8em;}
.fz19{font-size:1.9em;}
.fz20{font-size:2em;}

._top0{ padding-top: 0 !important;}
._bottom0{ padding-bottom: 0 !important;}

.no_mv{
  padding-top: 6em;
}
.c_inner{
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.c_wide{
  max-width: 85em;
  margin: 0 auto;
}
/* .c_wide.c_inner,
.c_wide.c_inner_pc{
  max-width: calc(1200px + (4em * 2) );
} */
.max800{ max-width: 60em; margin: 0 auto; }
.max900{ max-width: 66.25em; margin: 0 auto; }
.max1000{ max-width: 72.5em; margin: 0 auto; }
.max1100{ max-width: 78.75em; margin: 0 auto; }
.max1200{ max-width: 85em; margin: 0 auto; }
.max1300{ max-width: 91.25em; margin: 0 auto; }
.max1400{ max-width: 98em; margin: 0 auto; }

.pc{ display: none; }
._icon_w{ filter: var(--filter-w); }
.none{display: none;}
.height_img{
  height: 100%;
  width: auto;
}
.hov a{ transition: opacity .5s; }
.hov a:hover{ opacity: .7; }

.youtube_box {
  position: relative;
  margin: .5em 0 1em;
}
.youtube_box::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

@media (min-width: 897px) {
  .sp{display: none;}
  .pc{display: block;}
  .c_inner_pc{
    padding-left: 2em;
    padding-right: 2em;
  }
}/*  */


/* SECTION
========================================= */
.sec_ttl{
  font-size: 1rem !important;
  padding: 2em 0;
  margin-bottom: 1em;
  text-align: center;
}
.sec_ttl .en {
  display: block;
  font-size: 3.8em;
  line-height: 1.05;
  letter-spacing: .03em;
  padding: 0;
  /* color: var(--c-blue2); */
}
.sec_ttl .ja {
  display: block;
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.6;
  padding-top: .5em;
  letter-spacing: .15em;
}

/* ARROW ===================== */
/* link circle + arrow ========== */
.link_circle_arrow{
  display: flex !important;
  width: fit-content;
  align-items: center;
  font-family: var(--font-en);
  font-size: 1.1em;
  font-weight: 600;
  padding: .5em 0;
  transition: transform .2s;
}
.link_circle_arrow._right{
  margin-left: auto;
}
.link_circle_arrow._center{
  margin: auto;
}
.link_circle_arrow.border {
  border: 1px solid;
  padding-left: 5em;
  padding-right: 5em;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 3em;
}
.link_circle_arrow .txt{
  display: inline-block;
  font-family: var(--font-comp);
  font-size: 1.2em;
  font-weight: 500;
}
.arrow_circle{
  position: relative;
  display: inline-block;
  background-color: var(--c-blue2);
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  margin-left: .6em;
  overflow:hidden;
}
.arrow_circle_img{
  position: absolute;
  top: 0;
  bottom: .1em;
  left: 0;
  right: 0;
  margin: auto;
  width: 42% !important;
  filter: var(--filter-grey);
  transition: transform .25s ease-in, opacity .25s;
}
.arrow_circle_img._pdf{
  width: 44%;
}
.arrow_circle::before,
.arrow_circle::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 42%;
  height: 42%;
  background-image: url(/imgs/icon_cursor_right.svg);
  background-repeat: no-repeat;
  background-position: center;
  transform: translateX(-200%);
  opacity: 0;
  transition: transform .25s ease-out, opacity .25s ease-out;
  filter: var(--filter-w);
}
.arrow_circle::after{
  transform: translateX(0);
  opacity: 1;
}
/* .link_circle_arrow:hover{
  transform: translateX(.3em);
} */
.link_circle_btn_wrap .link_circle_arrow:hover{
  /* transform: translateX(.3em); */
  color: inherit;
}
a:hover .arrow_circle_img, .link_circle_arrow:hover .arrow_circle_img, .top_cont_box:hover .arrow_circle_img,
a:hover .arrow_circle::after, .link_circle_arrow:hover .arrow_circle::after, .top_cont_box:hover .arrow_circle::after{
  transform: translateX(200%);
  opacity: 0;
}
a:hover .arrow_circle::before, .link_circle_arrow:hover .arrow_circle::before, .top_cont_box:hover .arrow_circle::before{
  transform: translateX(0);
  opacity: 1;
  /* filter: var(--filter-gold); */
}
a:hover .arrow_circle, 
.link_circle_arrow:hover .arrow_circle{
  background-color: var(--c-navy);
  transition: background-color .4s;
}
a:hover .arrow_circle._line, 
.link_circle_arrow:hover .arrow_circle._line{
  background-color: transparent;
  transition: background-color .4s;
}



/* header
------------------------------------------- */
header {
  position: fixed;
  width: 100%;
  height: 4.8em;
  top: 0;
  z-index: 999;
}
.header.white{background-color:rgba(255, 255, 255, .95)!important;box-shadow: 0 0 3px rgba(120,120,120,0.3);}
body.black .header.white{background-color:rgba(0, 0, 0, .35)!important;}
{position:fixed;width:100%;z-index:12;}
.head-wrap {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 1.4em 0 1.4em 1em;
}
.head-logo {
  width: 52%;
}

.head-tgr {
  width: calc(100% - 17%);
}
.head-tgr ul {
  position: absolute;
  right: 1.25em;
  top: .7em;
}
.head-tgr li {
  color: #333;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  margin-left: 1.5em;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.tgr-gnavi span { display: block; width: 100%; height: 1px; background: #333;position: absolute; -webkit-transition: all .3s; transition: all .3s;-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
.gnavi-open .tgr-gnavi span {background: #333; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
body.black .tgr-gnavi span{background: #fff;}
.tgr-gnavi span:nth-child(1) { top: .6em;}
.tgr-gnavi span:nth-child(2) { top: 1.2em;}
.tgr-gnavi span:nth-child(3) { top: 1.8em;}
.gnavi-open .tgr-gnavi span:nth-child(1) { top: 1.2em; -webkit-transform: rotate(45deg); transform: rotate(45deg);margin-left:0%;}
.gnavi-open .tgr-gnavi span:nth-child(2) { opacity: 0;}
.gnavi-open .tgr-gnavi span:nth-child(3) {top: 1.2em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);margin-left:0%;width:100%;}

.tgr-studio{padding-top:.3em;}
.tgr-studio img {
  height: 1.8em;
}
.tgr-txt {
  padding-top: 3.65em;
  font-weight: 400;
  font-size: .7em;
  letter-spacing: 1px;
}
body.black .tgr-txt{color:#fff;}
.tgr-studio-txt{padding-top:.75em;}
body.black .tgr-studio img{
  filter: var(--filter-w);
}

/*//// open-overlay ////*/
.s-menu{
  visibility: hidden;
}
.overlay {
  position: absolute;
  top: 4.8em;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  /* -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s; */
  /* transition: opacity .3s; */
}
.overlay::after {
  position: absolute;
  content: "";
  top: -.4em;
  /* margin-left: -5em; */
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 .45em .45em .45em;
  border-color: transparent transparent rgba(0, 0, 0, 1) transparent;
}

.s-menu.overlay::after {
  right: 21.5%;
}
.gnavi.overlay::after {
  right: 6.5%;
}
.s-menu-open .s-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s;
}
.gnavi-open .gnavi{visibility:visible;opacity:1;}
.s-menu .inner{padding:1em 5% 3em;}
.gnavi .wrap {
  padding: .8em 0 4em;
}
.overlay-main {
  padding-right: 1px;
  height: calc(100vh - 4.8em);
  -webkit-overflow-scrolling: auto;
  overflow-scrolling: auto;
  overflow-y: scroll;
  padding-bottom: 8em;
}

/*//// CONTACT ////*/
.s-menu{color:#fff;padding:2em 0;}
.s-menu .search-ttl{text-align:center;font-size:1.5rem;font-weight: 400;line-height:1.8;letter-spacing:2px;margin:.5em 0 1em;}
.s-menu .search-ttl span{display:block;font-size:60%;}
.s-menu ul{display: flex; flex-wrap: wrap; justify-content: space-between;align-items: center; padding:1.75em 1.5em 1.75em 1.75em;border-top:1px solid #666;width:100%;}
.s-menu li a{color:#fff;}
.s-menu li.name{width:20%;}
.s-menu li.name a{font-weight:bold;}
.s-menu li.tel{width:52%;padding-left:1%;}
.s-menu li.tel a{letter-spacing:2px;font-weight:500;font-size:1.3em;}
.s-menu li.line{letter-spacing:1px;}
.s-menu li.line,.s-menu li.access{width:13%;text-align:center;font-size:.6em;padding-left:2%;}
.s-menu li.line img,.s-menu li.access img{width:60%;margin:0 auto .75em;display:block;}

/*//// Gnavi-MENU ////*/
dl{display: flex; flex-wrap: wrap; justify-content: space-between;width:100%;}
dd{width:100%;position:relative;vertical-align:bottom;border-bottom:1px solid #666;}
dd a {
  vertical-align: bottom;
  color: #fff;
  font-size: 1.1em;
  padding: 2em 8% 2em 8%;
  width: 100%;
  display: block;
  letter-spacing: 1px;
}
dd a:after {
  position: absolute;
  top: 50%;
  right: 9.5%;
  transform: translate(-0%, -50%);
  font-size: 1.2em;
  font-family: fontAwesome;
  content: '\f105';
  z-index: 4;
}
dd p{line-height:1;vertical-align:middle;}
dd.webnyuko{border-bottom:none;padding:2em 8% 2em;text-align:center;}
.webnyuko.sp_login_li {
  padding: 0 8% 0;
  margin-bottom: 2.5em;
}
dd.webnyuko a{padding:1.5em 0;width:100%;display:block;border:1px solid #fff;border-radius: 4px;}
dd.webnyuko a:before{top: 50%; left: 5em; transform: translate(-0%,-50%);}
dd.webnyuko img{top: 50%; left: 3.5em; transform: translate(-0%,-50%);width:7%;position:absolute}
dd.webnyuko a:after{right: 12.5%;}
dd.open a:after{content: none;}

.nav-plus{position:absolute;top:2em;right:7.5%;width:5%;z-index:20;}
.nav-plus::after{vertical-align:middle; font-family: fontAwesome; content: '\f196'; font-weight:normal; font-size: 1.2em; color:#fff;}
.list-open .nav-plus::after{font-family: fontAwesome; content: '\f147'; font-weight:normal;}

.header .gnavi-low{clear:right;visibility:hidden;opacity:0;height:0;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;transition:all .3s;border-top:none;border-left:none;}
.header .list-open .gnavi-low{height:auto;visibility:visible;opacity:1;margin-top:.5em;}
.header .gnavi-low li{opacity:0;height:0;}
.header .list-open .gnavi-low li{opacity:1;height:auto;background:#000;border-bottom:1px solid #666;}
.header .list-open .gnavi-low li:first-child{border-top:1px solid #666;}
.header .list-open .gnavi-low li:last-child{border-bottom:none;}
.header .list-open .gnavi-low li a{width:100%;padding:1.5em 3.25em 1.5em 2em;display:block;letter-spacing:1px;color: #00d0e2;line-height:1.6;}
.header .list-open .gnavi-low li a span.s-pro{font-size:80%;padding-right:1em;}
.gnavi-low li a{position:relative;display:block;color:#fff;z-index:5;}
.gnavi-low li a:after{position:absolute; top: 50%; right: 2em; transform: translate(-0%,-50%); font-size:1.2em; font-family: fontAwesome; content: '\f105'!important;z-index:4;}
.campaign-bnr{padding:0 1.75em 1.5em;}
.gnavi-sub{display:none;}

.menu-cam-wrap{display: flex; flex-wrap: wrap; justify-content: space-between;padding:0 5% 1em;}
.menu-cam-wrap a{width:49%;}
	
.close{text-align:center;font-size:1.2rem;margin:2em auto 0;display:block;padding:.6em;color:#fff;position:relative;width:40%;border:1px solid #ccc;border-radius: 2px;}
.close span{width: 12px; height: 1px;background: #fff;}
.close span:nth-child(1) {position:absolute;left:1em;top: 50%;transform: translate(-0%,-50%);-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.close span:nth-child(2) {position:absolute;left:1em;top: 50%;transform: translate(-0%,-50%);-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

/* footer
------------------------------------------- */
footer {
  background: #0b536e;
  padding-bottom: 8em;
}
footer .wrap {
  padding: 3em 2em 1em;
}
footer .wrap img.logo{width:60%;margin:0 auto 3em;}
footer .wrap section{margin-bottom:1.5em;}
footer .wrap ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
footer .wrap li {
  width: 48%;
  padding-left: .7em;
  margin-bottom: 1em;
  position: relative;
  color: #fff;
}
footer .wrap li:before{position:absolute; top: 50%; left: 0%; transform: translate(-0%,-50%); font-family: fontAwesome; content: '\f0da';}
footer .wrap li a{color:#fff;font-size:3vw;}
footer .wrap p{color:#fff;font-size:2.75vw;line-height:1.7;letter-spacing:1px;}
footer .copyright{color:#fff;border-top:1px solid;font-size:2.4vw;letter-spacing:1px;padding:1em 0 2em;}

@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

#footbaner {
  position: fixed;
  width: 100%;
  /* background: #fff; */
  bottom: 0;
  z-index: 10;
  /* background-color: rgba(0, 0, 0, .2);
  box-shadow: -3px 0 3px rgba(120, 120, 120, 0.5); */
  display: none;
}#footbaner .wrap{padding:1.1em 1.1em;}
#footbaner ul {width: 100%;display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#footbaner li {width:100%;text-align:center;}
#footbaner li a{
  display: block;
  padding: 1em 0 1em;
  border-radius: 0.5em;
  font-size: 1.6em;
  font-weight: bold;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* border: 2px solid #fff; */
}
#footbaner li a::before {position: absolute;content: '';display: inline-block;top: -180px;left: 0;width: 30px;height: 100%;background-color:rgba(255,255,255,0.7);animation: shiny-btn1 4s ease-in-out infinite;}
/* #footbaner li a.trial:after{position:absolute; top: 50%; left: 8%; transform: translate(-0%,-50%); font-family: fontAwesome; content: '\f0e6';font-weight:normal;font-size:5.5vw;} */
/* #footbaner li a.cam:after{position:absolute; top: 50%; left: 8%; transform: translate(-0%,-50%); font-family: fontAwesome; content: '\f219';font-weight:normal;font-size:5.5vw;} */

/* breadcrumbs
------------------------------------------- */
.breadcrumbs {padding:1em 0;background:#f6f6f6;}
.breadcrumbs li{position:relative;display:inline-block;margin-right:1.5em;font-size:.9em;}
.breadcrumbs li:not(:last-child)::after{position:absolute;content:">";right:-1em;top:0;}
.breadcrumbs li a:hover{text-decoration:underline;}

body.dance .breadcrumbs{background:#333;}
body.dance .breadcrumbs li,body.dance .breadcrumbs li a{color:#fff;}

/*====================================================
 pager
====================================================*/

.pager{text-align:center; padding:1em .5em;position:relative;}
.pager a{color:#AAAAAA;font-size:3vw;}
.pager .num{display:inline-block; padding:.4em .5em .4em 1em; margin-bottom:.5em;line-height:1.3;}
.pager .num a{color:#ccc; display:inline-block; border:1px solid #ccc; padding:.4em .75em; margin-bottom:.5em;  }
.pager .num a:hover{background-color:#000; border:1px solid #ccc; color:#FFFFFF; padding:.4em .75em; text-decoration:none; margin-bottom:1em;}
.pager .num .current_page{display:inline-block; border:1px solid #444; background-color:#000; color:#ffffff; padding:.4em .75em; margin-bottom:1em;font-size:3vw;}
.pager span{display:inline-block;}
.pager span i{font-size:3vw;}
.pager span.before{position:absolute;top:50%;left:.5em;transform: translate(0%,-50%);}
.pager span.next{position:absolute;top:50%;right:.5em;transform: translate(0%,-50%);}
.center-block {display:block; margin:0 auto;}
.center-block2 {display:block; margin:1em auto;}

.modal-ttl{text-align: center; margin-bottom: 1em;font-family: "Roboto", sans-serif!important; font-weight: 900;font-size: 2.4rem;line-height:1.7;}
.modal-ttl span{display: block;font-size: .9rem;}
.modal-content{height: 80vh;}

/*---from------------------------------------*/
body.form .container .wrap{padding:0 0;}
body.form .form-wrapper{padding: 0;border-bottom: solid 1px #ccc;font-size: 4.2vw;}
body.form .form-heading {background: #f3f3f3;border: solid 1px #CCC;padding:1em 1.5em;font-weight: bold;border-left: none;border-right: none;display:flex;justify-content: flex-start;align-items:center;line-height:1;}
body.form .required{font-size:60%;font-weight:normal;padding:.4em .5em;margin-left:.75em;border-radius:2px;}
body.form .form-body{padding:1.5em;}
body.form .form-notice{padding-top:1em;font-size:80%;}
body.form .form-notice li{padding-left:1em;position:relative;}
body.form .form-notice li:after{position:absolute; top: 0; left: 0;content: '※'; color:#d12f23;}
body.form select::-ms-expand {display: none;}
body.form select{border:1px solid #ccc;padding:.75em;-webkit-appearance: none; -moz-appearance: none; appearance: none;width:100%;position: relative;z-index: 10;background: none;}
body.form .select{position:relative;}
body.form .select:after{position:absolute; top: 50%; right: 5.75%; transform: translate(-0%,-50%); font-family: fontAwesome; content: '\f107';z-index:4;color:#333;display: block;}
body.form input,body.form textarea{border:1px solid #ccc;padding:.75em;width:100%;position: relative;z-index: 10;background: none;}
body.form .cal{position:relative;margin-bottom:1em;}
body.form .cal:after{position:absolute; top: 50%; right: 5%; transform: translate(-0%,-50%); font-family: fontAwesome; content: '\f073';z-index:4;color:#333;display: block;}
body.form .submitArea {text-align: center;font-size:4.5vw;margin:2em auto 1em;width:90%;}
body.form input[type="submit"] {display: block;font-weight: bold;padding:1em 1.4em;color:#fff;border:none;}
body.form .formerror-box{padding:0 1.75em 2em;}
body.form .formerror-box h2{text-align:center;margin: 0 0 .75em;}
body.form .formerror-box p{text-align:center;}
body.form .error-list {padding-top:2em;}
body.form .error-list li{text-align: center;}
body.form .form-operate{padding:0 5%;}
body.form .form-operate input[type="submit"] {color:#0B536E;border:1px solid}
body.form .form-operate a{color:#0B536E;border:1px solid;padding:1em 1.4em;margin:2em auto 0;display:block;text-align:center;}
body.form .lead{font-size: 3.5vw;text-align:center;padding-bottom:1.5em;}
body.form .form-check{text-align:center;}
body.form .form-check .form-heading{justify-content: center;}

body.form .complete-box{padding:.2em 1.75em 0;}
body.form .complete-box h2{text-align:center;margin: 0 0 .75em;}
body.form .complete-box p{margin-bottom:2em;}
body.form .complete-box h3{font-size:110%;font-weight:bold;text-align:center;margin-bottom:1em;}

body.form .corp-form h2{text-align:center;}
body.form .corp-form .tel-box{padding:0 1.75em 2em;text-align:center;width:90%;margin:0 auto;border:1px solid #ccc;}
body.form .corp-form .tel-box p.tel{font-size:6vw;font-weight:bold;letter-spacing:2px;margin-bottom:.4em;}
body.form .corp-form .tel-box p.tel span{font-size:60%;display:block;font-weight:normal;letter-spacing:1px;}
body.form .corp-form .tel-box p.time{font-weight:bold;font-size:3.5vw;}
body.form .corp-form .tel-box p.time span{display:block;font-weight:normal;}

@media screen and (min-width: 768px) {
  
  /* .wrap{padding:0 4em} */

  /* header
  ------------------------------------------- */
  /* .head-wrap{padding:2.5em 0 2.5em 2.5em;}	
  .head-logo{width:48%;}
  .head-tgr{width:calc(100% - 25%);}
  .head-tgr ul{right:2.5em;top:1.75em;}
  .head-tgr li{margin-left:30px;}
  .tgr-gnavi span:nth-child(2) { top: 20px;}
  .tgr-gnavi span:nth-child(3) { top: 30px;}
  .tgr-studio img{height:26px;}
  .tgr-txt{font-size:1.25rem;padding-top:3.2em;}
  .tgr-studio-txt{padding-top:1em;}
  .overlay{top:94px;}
  .s-menu.overlay::after{right:129px;}
  .gnavi.overlay::after{right:48px;}
  .s-menu .inner{padding:2em 5% 3em;}
  .gnavi .wrap{padding:3em 0 3em;} */

  /*//// SEARCH-MENU ////*/
  /* .s-menu .search-ttl{font-size:2.2rem;margin:1.5em 0 2em;}
  .s-menu li a{font-size:2rem;}
  .s-menu ul{padding:2.5em 2.5em 2.5em 3em;}
  .s-menu li.tel a{font-size:2em;}
  .s-menu li.line a,.s-menu li.access a	{font-size:1.2rem;}
  .s-menu li.line img,.s-menu li.access img{width:50%;}	 */
    
  /*//// Gnavi-MENU ////*/
  /* dd a{font-size:2rem;padding:2.5em;width:100%;display:block;}
  .nav-plus {top: 2.5em;right: 6.5%;}
  .header .list-open .gnavi-low li a{padding: 2.5em 2.5em 2.5em 2.5em;}
  .gnavi-low li a:after{right: 3em;}	
  dd.webnyuko{padding: 4em 7% 4em;}
  .menu-cam-wrap{padding:1em 5% 3em;} */

  /* footer
  ------------------------------------------- */
  footer .wrap{padding:5em 7%;}
  footer .wrap img.logo{width:60%;margin:0 auto 4em;}
  footer .wrap section{margin-bottom:2.5em;}
  footer .wrap li{margin-bottom:2em;}
  footer .wrap li a{font-size:2vw;}
  footer .wrap p{font-size:1.8vw;}
  footer .copyright{font-size:1.8vw;}
  #footbaner .wrap{padding:2em 2em;}
    
  /*====================================================
  pager
  ====================================================*/
  .pager{text-align:center; padding:1em .5em;position:relative;}
  .pager a{font-size:.9rem;}
  .pager .num{padding:.4em .5em .4em 1em; margin-bottom:.5em;line-height:1.3;}
  .pager .num a{padding:.4em .75em; margin-bottom:.5em;}
  .pager .num a:hover{padding:.4em .75em;margin-bottom:1em;}
  .pager .num .current_page{padding:.4em .75em; margin-bottom:1em;font-size:.9rem;}
  .pager span i{font-size:1.2rem;}
  .pager span.before{top:45%;left:1.5em;transform: translate(0%,-55%);}
  .pager span.next{top:45%;right:1.5em;transform: translate(0%,-55%);}

  /*---from------------------------------------*/
  body.form .form-wrapper{font-size: 3vw;}
  body.form .required{padding:.4em .5em;margin-left:.75em;border-radius:2px;}
  body.form .form-heading{padding:1.5em;}	
  body.form .form-body{padding:1.5em;}
  body.form select{padding:1.25em;}
  body.form input,body.form textarea{padding:1.25em;}
  body.form .cal{margin-bottom:1em;}
  body.form .submitArea {font-size:3vw;}
  body.form input[type="submit"] {padding:1em 1.4em;}
  body.form .formerror-box{padding:0 1.75em 2em;}
  body.form .error-list {padding:3em 10% 2em;font-size:2.2vw;}
  body.form .form-operate{padding:0 10%;}
  body.form .form-operate input[type="submit"] {font-size:2.2vw;}
  body.form .lead{font-size: 3vw;padding-bottom:1.5em;}
  body.form .complete-box{padding:.2em 4em 0;}
  body.form .complete-box h2{margin: 0 0 .75em;}
  body.form .complete-box p{margin-bottom:3em;}
    
  body.form .corp-form .tel-box{padding:1em 2.5em 3em;margin:0 auto 4em;}
  body.form .corp-form .tel-box p.tel{font-size:5vw;margin-bottom:.6em;}
  body.form .corp-form .tel-box p.tel span{font-size:50%;}
  body.form .corp-form .tel-box p.time{font-size:2.5vw;letter-spacing:1px;}	
    
}

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

  .wrap{padding:0 0;width:80%;margin:0 auto;display:block;}
  .pc-no{display:none;}
  .sp-no{display:block;}	

  /* header
  ------------------------------------------- */
  .pc-hide {display: none;}
  .head-tgr{display: none;}

  .header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
    height: fit-content;
  }
  .head-top {padding:0 0;}
  .head-wrap{width:100%;position:relative;padding:0 0 0 1.5em;align-items: center;}
  .white{padding:0 0;}

  .head-logo{width:14%;z-index:13;padding:0;}
  .head-logo {
    width: 18%;
    padding: 1.7em 0;
    z-index: 13;
  }
  .head-logo a{display:block;}
  .gnavi-frame {
    width:73%;
    z-index: 12;
    display:block;
  }
  .webnyuko {
    width: 5.6em;
    background: #0b536e;
    text-align: center;
  }
  .webnyuko a {
    padding: 1.1em .75em 1.1em;
    display: block;
    color: #fff;
    font-size: .9em;
    line-height: 1;
  }
  .webnyuko img{margin:0 auto .75em;display:block;width:50%;}	

  .gnavi .overlay-main {padding: 0;}
  .gnavi-main {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    width: 90%;
    align-items: center;
    max-width: 90em;
    margin-left: auto;
  }
  .gnavi-main li {
    position: relative;
    padding: 0;
    width: auto;
    line-height: 1;
    text-align: left;
    /* margin-right: 3.5%; */
  }
  .gnavi-main li:last-child {
    margin-right: 1%;
  }
  .gnavi-main li a {
    color: #333;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.7;
    display: block;
    letter-spacing: 1px;
  }
  body.black .gnavi-main li a {
    color: #fff;
  }
  .gnavi-low li a:after{
    right: .5em;
  }
  .gnavi-main li a:hover {color: #00d0e2!important;}

  .gnavi-main .gnavi-low {
    position: absolute;
    top: 2.5em;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    z-index: 923;
  }
  .gnavi-main li:hover .gnavi-low,.gnavi-main li:hover .gnavi-low li {visibility: visible;opacity: 1;height: auto;}
  .header .gnavi-low li {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background-image: none;
    background-color: rgba(0, 208, 226, .95);
  }
  .header .gnavi-low li a {
    padding: 1em;
    background: none;
    color: #fff;
    font-weight: normal;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 2px;
    white-space: nowrap;
    padding-right: 2.5em;
  } 
     .header .gnavi-low li a:hover {color: #fff!important;}
  .gnavi li.pc-hide{display:none;}

  .gnavi-main .pc_nav_login_box a{
    width: clamp(27px,3vw,40px);
  }
  .login_btn_new img {
    filter: brightness(0);
  }
  .black .login_btn_new img {
    filter: brightness(1);
  }

  /* footer
  ------------------------------------------- */
  footer{padding-bottom:8em;}	
  footer .wrap{padding:4em 0 0;display: flex; flex-wrap: wrap; justify-content: space-between;}
  footer .wrap img.logo{width:60%;margin:0 0 2em;}
  footer .wrap section {
    margin-bottom: 3em;
    width: 40%;
  }
  footer .wrap section:last-child {
    width: 56%;
  }
  footer .wrap li{margin-bottom:.8em;}
  footer .wrap li a{font-size:1em;}
  footer .wrap p{font-size:.85em;}
  footer .copyright{font-size:10px;padding:2em 0 3em}
    
  #footbaner .wrap{padding:1.25em 0;width:80%;margin:0 auto;}
  #footbaner li {width:49%;text-align:center;}
  #footbaner li a {
    padding: 1.25em 0 1.25em;
    font-size: 1.45em;
  }
  #footbaner li a::before {position: absolute;content: '';display: inline-block;top: -180px;left: 0;width: 30px;height: 100%;background-color:rgba(255,255,255,0.7);animation: shiny-btn1 4s ease-in-out infinite;}
  #footbaner li a.trial:after{font-size:2vw;}
  #footbaner li a.cam:after{font-size:2vw;}

    
  /*====================================================
  pager
  ====================================================*/
  .pager a{font-size:1rem;}
  .pager .num .current_page{font-size:1rem;}
  .pager span i{font-size:1.3rem;}
  .pager span.before{top:45%;left:2.5em;transform: translate(0%,-55%);}
  .pager span.next{top:45%;right:2.5em;transform: translate(0%,-55%);}
    
  /*---from------------------------------------*/
  body.form .form-wrapper{font-size: 1vw;border:none;}
  body.form .required{padding:.4em .5em;margin-left:.75em;border-radius:2px;}
  body.form .form-heading{padding:1em 0 0;background:none;border:none;}	
  body.form .form-body{padding:1em 0 2em;}
  body.form select{padding:1em;}
  body.form .select:after{right: 5.25%;}	
  body.form input,body.form textarea{padding:1.25em;}
  body.form .cal{margin-bottom:1em;}
  body.form .submitArea {font-size:1.2vw;width:70%;margin: 2em auto 2em;}
  body.form input[type="submit"] {padding:1.4em 1.4em;}
  body.form .formerror-box{padding:0 0 2em;}
  body.form .formerror-box h2{margin:0 0 .75em;}
  body.form .error-list {padding:3em 10% 2em;font-size:1.1vw;}
  body.form .error-list li{text-align:center;}
  body.form .error-list li:after{content: none;}	
  body.form .form-operate{padding:0 20%;}
  body.form .form-operate input[type="submit"] {font-size:1.2vw;}
  body.form .form-operate a{margin: 3em auto 0;}	
  body.form .lead{font-size: 1vw;}
  body.form .form-check{margin-bottom:4em;}
  body.form .complete-box{padding:.2em 0 0;}
    
  body.form .corp-form .tel-box{padding:1em 1em 3em;margin:0 0 5%;width:100%;}
  body.form .corp-form .tel-box p.tel{font-size:2.2vw;margin-bottom:.1em;}
  body.form .corp-form .tel-box p.tel span{font-size:50%;display:inline;padding-left:1em;}
  body.form .corp-form .tel-box p.time{font-size:1.2vw;letter-spacing:1px;}	
    
}

@media screen and (min-width: 1280px) {
  /* .head-wrap{padding:0 0 0 2.4em;}	
  .gnavi-main li{margin-right:5%;}	
  .gnavi-main li a {font-size: .85vw;}
  .header .gnavi-low li{width: 140px;}
  .header .gnavi-low li a{font-size: .75vw;}
  .webnyuko{width:6%;}
  .webnyuko a{font-size: .75vw;padding:1.75em 1em 1.75em;}
  .webnyuko img{margin:0 auto .85em;}	 */
    
  /* footer
  ------------------------------------------- */
  /* footer{padding-bottom:7%;}		
  footer .wrap{padding:4% 0 0}
  footer .wrap section{margin-bottom:4%;}	
  footer .wrap img.logo{margin:0 0 3em;}	
  footer .wrap li{margin-bottom:1.2em;}	
  footer .wrap li a{font-size:.8vw;}
  footer .wrap p{font-size:.8vw;line-height:2;}	
  footer .copyright{font-size:.7vw;}
    
  #footbaner .wrap{padding:1.75em 0;width:900px;margin:0 auto;}
  #footbaner li {width:49%;text-align:center;}
  #footbaner li a{padding:1em 0 1em 1.25em;font-size:1.2vw;letter-spacing:1px;}
  #footbaner li a.trial:after{font-size:1.3vw;}
  #footbaner li a.cam:after{font-size:1.3vw;} */
    
    
  body.form .corp-form .tel-box{padding:0 1em 3em;margin:0 0 7%;}
  body.form .corp-form .tel-box p.tel{font-size:1.6vw;margin-bottom:.5em;}
  body.form .corp-form .tel-box p.tel span{font-size:50%;display:inline;padding-left:1em;}
  body.form .corp-form .tel-box p.time{font-size:.9vw;letter-spacing:1px;}
  body.form .corp-form .tel-box p.time span{display:inline;padding-left:.5em;}
}
	

@media screen and (min-width: 1440px) {
  /* header
  ------------------------------------------- */
  /* .head-wrap{padding:0 0 0 3em;}		
  .gnavi-main li a {font-size: .8vw;}	 */


  /*====================================================
  pager
  ====================================================*/
  .pager{padding:1em 0 3em;}
  .pager a{font-size:.95em;}
  .pager .num .current_page{font-size:.95em;}
  .pager span i{font-size:1.1em;}
}



/* TOP - RECOMMEND
========================================= */
.sec_top_reco{
  padding: 3em 0;
}
.top_reco_block{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* border-top: .5px solid #d3d3d3;
  border-bottom: .5px solid #d3d3d3; */
  width: calc(100% + 4em);
  /* margin: 2em 0 2em -2em; */
  width: 100%;
}
.top_reco_box{
  position: relative;
  width: 33.33333%;
  border: 0.5px solid #d3d3d3;
  overflow: hidden;
}
.reco_detail_box{
  visibility: none;
  opacity: 0;
  transform: translateY(-101%);
}
/* .top_reco_box.on .reco_detail_box{
  position: absolute;
  z-index: 1;
  font-size: 10px;
  width: 100%;
  height: 100%;
  background-color: #2993ca;
  color: #fff;
  overflow-y: scroll;
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  transition: transform .4s , opacity .4s;

  display: flex;
  justify-content: center;
  align-items: center;
} */
.reco_detail_box {
  position: absolute;
  z-index: 1;
  font-size: 10px;
  width: 100%;
  height: 100%;
  background-color: var(--c-black2);
  color: #fff;
  /* overflow-y: scroll; */
  /* visibility: visible; */
  transform: translateY(0);
  /* opacity: 1; */
  transition: transform .4s , opacity .4s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_reco_box:hover .reco_detail_box{
  opacity: 1;
  visibility: visible;
}
/* .top_reco_box:hover .reco_detail_box{
  transform: translateY(0);
  opacity: 1;
} */
.reco_txt{
  position: absolute;
  display: block;
  top: 0;
  /* bottom: 0;
  margin: auto; */
  height: fit-content;
  padding: 1em .6em 1em;
  font-size: .9em;
}

.reco_img_box{
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
}
/* .top_reco_box:hover .reco_img_box{
  transform: translateY(-100%);
  opacity: 0;
} */
.reco_logo_img{
  position: absolute;
  pointer-events: none;
}
.reco_logo_img.nda{top: 0;}
.reco_logo_img.ndak{top: -100%;}
.reco_logo_img.nds{top: -200%;}
.reco_logo_img.nyoga{top: -300%;}
.reco_logo_img.npila{top: -1800%;}
.reco_logo_img.nbox{top: -400%;}
.reco_logo_img.nbal{top: -500%;}
.reco_logo_img.nbalk{top: -600%;}
.reco_logo_img.non{top: -700%;}
.reco_logo_img.nmusic{top: -800%;}
.reco_logo_img.tdl{top: -900%;}
.reco_logo_img.sst{top: -1300%;}
.reco_logo_img.pst{top: -1400%;}
.reco_logo_img.stn{top: -1500%;}
.reco_logo_img.voat{top: -1000%;}
.reco_logo_img.voice{top: -1100%;}
.reco_logo_img.voatk{top: -1200%;}
.reco_img_box{
  transition: transform .4s , opacity .4s;
}
.reco_logo_img_single {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
}
.reco_detail_btn{
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  width: 50%;
  padding: .3em 1.8em;
  margin: 0 auto;
  opacity: .2;
  z-index: 10;
  cursor: pointer;	
}
.sec_ttl_reco {
  text-align: center;
  padding: 2em 0;

  .fot-ttl{
      display: block;
  }
  .pointsub{
      font-size: .8em;
  }
}

.sec_sub{
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.sec_sub{
  padding-bottom: 2.5em;
}
.sec_desc{
  font-size: 1.1rem;
  line-height: 1.7;
}
.sec_desc{
  padding-bottom: 2.5em;
}
.sec_txt{
  padding: .5em 0;
  line-height: 1.7;
}
.sec_desc_txt p,.sec_txt p{
  padding: .1em 0;
}



@media (min-width: 769px) {
  .sec_top_reco{
    padding: 5em 0;
  }
  .foot_desc{
    padding: 2em 0 0;
  }
  .top_reco_block{
    width: 100%;
    margin: 0;
    /* border: .5px solid #d3d3d3; */
  }
  .top_reco_box a:hover{
    opacity: 1;
  }
  .top_reco_box{
    width: calc(100% / 8);
  }
  /* 100% / 5 */
  /* .top_reco_box:nth-child(n+6) {
    border-top: none;
  }
  .top_reco_box:nth-child(5n+1){
    border-left: 1px solid #d3d3d3;
  } */
  /* 100% / 6 */
  /* .top_reco_box:nth-child(n+7) {
    border-top: none;
  }
  .top_reco_box:nth-child(6n+1){
    border-left: 1px solid #d3d3d3;
  }  */
  /* 100% / 7 */
  /* .top_reco_box:nth-child(n+8) {
    border-top: none;
  }
  .top_reco_box:nth-child(7n+1){
    border-left: 1px solid #d3d3d3;
  } */
  /* 100% / 8 */
  .top_reco_box:nth-child(n+9) {
    border-top: none;
  }
  .top_reco_box:nth-child(8n+1){
    border-left: 1px solid #d3d3d3;
  }

  .sec_top_contents .foot_desc{
    padding-right: 0;
  }
  .reco_detail_btn{
    width: 42%;
  }
  .reco_txt{
    bottom: 0;
    margin: auto;
    font-size: .8em;
    line-height: 1.4;
  }
  .top_reco_box.on .reco_detail_box{
    overflow-y:inherit;
  }
  .sec_top_reco{
      padding: 2em 0 6em;
  }
  .sec_top_reco_inner{
    display: flex;
    justify-content: space-between;
    /* padding:c ; */
  }
  .top_reco_pc_wrap{
    width: 90%;
    padding: 0 0 2em;
    margin: 0 auto;
  }
}/* 769 */

@media (min-width: 1200px) {
  .reco_txt{
    font-size: 1em;
  }
}


/* TOP - 関連スクール
========================================= */
.voat_school_list_box._voice{
  display: none;
}
.voat_school_list{
  display: flex;
  flex-wrap: wrap;
  gap: 6%;
}
.voat_school_list.ptb2{
  padding: 0;
}
.voat_school_list_box{
  width: 47%;
  padding: 1em 0;
}
.voat_school_img_box{
  position: relative;
  background-color: #000;
}
.voat_school_img_logo{
  position: absolute;
  width: fit-content;
  height: fit-content;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  filter: invert(100%) saturate(377%) hue-rotate(316deg) brightness(500%) contrast(100%);
  z-index: 1;
  width: 80%;
}
.voat_school_img{
  opacity: .5 !important;
}
.voat_school_txt_wrap{
  font-size: .75em;
  padding: .5em 0;
}

@media (min-width: 899px) {
  .voat_school_list{
    gap: 2.5%;
  }
  .voat_school_list_box{
    width: 18%;
  }

}/*  */

/* ACCESS */
.top-access {
  padding: 3em 0;
}
.top-access .accessbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.top-access section{position:relative;background-position: center center;background-size:cover;background-repeat: no-repeat;width:100%;padding:3em 0;margin-bottom:1px}
.top-access section:before{content:"";position:absolute;background-color:rgba(0, 0, 0, .35);top:0;left:0;width:100%;height:100%;}
.top-access .tokyo{background-image: url("/imgs/toppage/top-accessimg1-s.jpg");}
.top-access .harajuku{background-image: url("/imgs/toppage/top-accessimg2-s.jpg");}
.top-access .shinjuku{background-image: url("/imgs/toppage/top-accessimg3-s.jpg");}
.top-access .nagoya{background-image: url("/imgs/toppage/top-accessimg4-s.jpg");}
.top-access .fukuoka{background-image: url("/imgs/toppage/top-accessimg5-s.jpg");}
.top-access .nakano{background-image: url("/imgs/toppage/top-accessimg6.jpg");}
.top-access section a{display:block;color:#fff;}
.top-access section h3{text-align:center;font-size:5vw;font-weight:600;color:#fff;position:relative;z-index:10;letter-spacing:4px;}
.top-access section h3 span{font-size:3vw;display:block;padding-top:.4em;}
.top-access li{width:10%;text-align:center;}
.top-access li.ac{position:absolute; top:54%; left:5%; transform: translate(-0%,-46%);}
.top-access li.line{position:absolute; top:54%; right:5%; transform: translate(-0%,-46%);letter-spacing:1px;}
.top-access li img{margin:0 auto .5em;display:block;width:70%;}
.top-access li p{font-size:2.5vw;color:#fff;}

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

  .top-access .accessbox {
    flex-wrap: inherit;
    justify-content: center;
  }
  .top-access{padding:5em 0 0;}
  .top-access section{padding:6em 0;}
  .top-access li img{margin:0 auto .75em;width:65%;}

}

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

  .top-access{padding:4em 0;}
  .top-access .tokyo{background-image: url("/imgs/toppage/top-accessimg1.jpg");}
  .top-access .harajuku{background-image: url("/imgs/toppage/top-accessimg2.jpg");}
  .top-access .shinjuku{background-image: url("/imgs/toppage/top-accessimg3.jpg");}
  .top-access .nagoya{background-image: url("/imgs/toppage/top-accessimg4.jpg");}
  .top-access .fukuoka{background-image: url("/imgs/toppage/top-accessimg5.jpg");}	
  .top-access .nakano{background-image: url("/imgs/toppage/top-accessimg6.jpg");}	
  .top-access section{width:20%;padding:2.5em 0;margin-bottom:0}
  .top-access section h3{font-size:1.6vw;}
  .top-access section h3 span{font-size:1vw;padding-top:.2em;}
  .top-access ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;padding:7.5% 10% 0;}	
  .top-access li.ac,.top-access li.line{position:static;transform: translate(-0%,-0%);width:42%;}
  .top-access li a{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
  .top-access li img{margin:0 auto;width:23%;}	
  .top-access li p{font-size:.9vw;color:#fff;width:77%}
}

/* @media screen and (min-width: 1280px) {
  .top-access{padding:3.5% 0 0;}
  .top-access section{padding:3% 0;}
    
} */



/* TOP COURSE LIST =========================== */
.top_course_sec {
  margin-bottom: 3em;
}
.top_course_list{
  padding: 0 1em;
}
.top_course_list_box{
  padding: 1em 0;
}
.top_course_img_box{
  position: relative;
}
.top_course_num{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  text-align: center;
  line-height: 1;
  padding: .7em .5em .25em;
  color: #fff;
  /* background-color: var(--c-blue2); */
}
.top_course_num::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  display: block;
  width: 170%;
  height: 170%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background-color: var(--c-blue2);
}
.top_course_num ._txt{
  display: block;
  font-size: 0.85em;
  font-weight: 500;
}
.top_course_num ._num{
  display: block;
  font-size: 2.8em;
  font-weight: 500;
  filter: drop-shadow(.05em .05em 0 #0c77b0aa);
}

.top_course_img{
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.top_course_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s;
}
a:hover .top_course_img img{
  transform: scale(1.05);
}
.top_course_detail_box {
  padding: 1em 1.2em;
  background-color: #f4f4f4;
}
.top_course_list_ttl{
  font-size: 1em;
  padding: .5em 0;
  color: var(--c-blue2);
  font-weight: 700;
  margin: 0.5em 0;
}
.top_course_list_ttl .en{
  display: block;
  font-size: 3.2em;
  line-height:1.05;
  margin-bottom: 0.1em;
}
.top_course_list_ttl .ja{
  display: block;
  font-size: 1.3em;
}
.top_course_list_desc {
  font-size: 1.15em;
  padding: .5em 0;
}
.top_course_detail_box .link_circle_arrow{
  font-size: 0.9em;
  padding: 1em 0;
}

._corpo .top_course_detail_box {
  background-color: var(--c-navy);
  color: #fff;
}
._corpo .top_course_num::before {
  background-color: var(--c-navy);
}
._corpo .top_course_num ._num {
  filter: drop-shadow(.05em .05em 0 #0b536eaa);
}
._corpo .top_course_list_ttl {
  color: #fff;
}
._corpo .arrow_circle {
  background-color:  #fff;
}
._corpo .arrow_circle::after {
  filter: none;
}

@media screen and (min-width: 897px) {
  .top_feature_sec {
    font-size: 1.1em;
  }
  .top_course_list_inner{
    display: flex;
    justify-content: space-between;
  }
  /* .top_course_list_box:nth-child(even) .top_course_list_inner {
    flex-direction: row-reverse;
  } */
  .top_course_img_box,.top_course_detail_box{
    width: 50%;
  }
  .top_course_detail_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em 1.8em;
  }
  .top_course_list_ttl .en {
    font-size: 3.4em;
  }

}/*  */