@charset "utf-8";

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.1
*//*
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
*/
/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */


/*----------------------------------------------------
	共通
----------------------------------------------------*/
/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
	font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
	font-size: 16px;
  font-size: 1.6rem;
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
  font-weight: 300;
}

input, textarea {
	font-size: 16px;
  font-size: 1.6rem;
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-weight: 300;
}

/* for IE6 *//*
* html body {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
* html input, * html textarea {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
*/


/*
 * Form Reset
 *//*
input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
*/
/*
 * box-sizing
 */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* リンク
----------------------------------------------------*/
a {
	/* font-size: 16px;
  font-size: 1.6rem; */
	color: rgba(61,125,204,1);
	text-decoration: none;
	vertical-align: top;
}

a:link { text-decoration: underline; color: rgba(61,125,204,1); }

a:visited { text-decoration: underline; color: rgba(49,64,138,1); }

a:hover { text-decoration: underline; color: rgba(255,165,0,1); }

a:active { text-decoration: underline; color: rgba(131,94,191,1); }

a[href^="tel:"] { cursor: default; }

a.object-link {
  display: block;
  color: rgba(77,77,77,1);
  text-decoration: none;
}

a.object-link:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
  opacity: 0.5;
}

/* よく使いそうなCSS3
----------------------------------------------------*/
#selectors {
/* 角丸 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/* 角丸個別 */
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;

/* ボックスに影 */
	-webkit-box-shadow: 1px 1px 3px #999;
	-moz-box-shadow: 1px 1px 3px #999;
	box-shadow: 1px 1px 3px #999;

/* テキストに影 */
	text-shadow: 1px 1px 0px #999;
}

/* 汎用
----------------------------------------------------*/
/* Text Align
 * --------------------------------------------- */
.textAlignCenter { text-align: center; }
.textAlignLeft { text-align: left !important; }
.textAlignRight { text-align: right; }

/* Float
 * --------------------------------------------- */
/* LEFT */ .floLeft { float:left; }
/* RIGHT */ .floRight { float:right; }
/* CLEAR */ .floClear { clear:both; float: none; }

/* Clearfix
 * --------------------------------------------- */
/* for modern browser */
.clearfix:after { font-size: 0; line-height: 0; height: 0; visibility: hidden; content:"."; display: block; clear: both; }
/* for IE5.5-7 */
.clearfix { zoom: 1; display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix { display: block; }
.clearboth { clear: both; }

/* Global Style
---------------------------------------------------------------- */
.align_right { float: right; }
.align_left { float: left; }

/* clerfix */
#contents:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

.clerfix:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

p,
dt,
dd,
li,
input,
textarea {
	font-size: 16px;
  font-size: 1.6rem;
	line-height: 160%;
	color: rgba(77,77,77,1);
}

strong {
    font-weight: bold;
}

p.textIndent_1em {
	padding-left: 1em;
	text-indent: -1em;
}

p.textpadding_1em {
	padding-left: 1em;
}

p.textpadding_2em {
	padding-left: 2em;
}

p.caps {
	font-size: 14px;
	font-size:1.4rem;
	line-height: 120%;
}

span.caps {
	font-size: 14px;
	font-size:1.4rem;
	line-height: 120%;
}

img.verticalAlignBottom {
vertical-align: bottom;
}

.imgR {
	float: right;
	margin: 0 0 10px 10px;
}

.imgL {
	float: left;
	margin: 0 10px 10px 0;
}

.tC,
.btn {
	text-align: center;
}

.tR,
.sign {
	text-align: right;
}

sup {
	font-size: 12px;
	font-size: 1.2rem;
}

.emp {
	font-weight: bold;
}


/*
 * Accessibility
 */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/*----------------------------------------------------
画像
----------------------------------------------------*/
/*フルードイメージ*/
img,
/* iframe, */
object {
    max-width: 100%;
    height: auto;
    width /****/:auto;  /*IE8のみ適用*/
    vertical-align: bottom;
}


/* --------------------------------------------------------
 Common Style
-------------------------------------------------------- */


/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}
/*	EXAMPLE STYLES */

body {
	color: rgba(72,72,72,1);
}
/*
.wrapper {
	width: 100%;
}
*/
.wideContents{
	margin: 0 auto;
	width: 100%;
}

/*	Mobile STYLES */

.mbimg_off{
	display:block;
}
.mbimg_on{
	display:none;
}

.mbcont_off{
	display:block;
}
.mbcont_on{
	display:none;
}

.mbcont_480_off{
  display:block;
}
.mbcont_480_on{
  display:none;
}

.mbcont_375_off{
	display:block;
}
.mbcont_375_on{
	display:none;
}


/*	Back to top */

#pageTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 11px 0 0 0;
  width: 45px;
  height: 45px;
	opacity: 0.8;
}

#pageTop a img {
	width: 45px;
  height: 45px;
}

#pageTop a:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
  opacity: 0.5;
  transition: 0.5s;
}


/* --------------------------------------------------------
 wideImage
-------------------------------------------------------- */

#header.wideImage {
  height: auto;
	margin: 0 auto 0;
	background-position: center center;
	background-repeat: no-repeat;
  background-size: cover;
}

#localHeader.wideImage {
  height: auto;
	margin: 0 auto 0;
  background-color: rgba(25,25,25,1);
	background-position: center center;
	background-repeat: no-repeat;
  background-size: cover;
}

#footer.wideImage {
  height: auto;
	margin: 0 auto 0;
  background-position: center center;
	background-repeat: no-repeat;
  background-size: cover;
}


/* --------------------------------------------------------
 header
-------------------------------------------------------- */

#header header {

}

#header header div#hGroup {
	margin: auto;
	width: auto;
}

#header header h1 {
}


/*	Primary Navigation */

#header header div#pNav ul {
	width: auto;
	margin: auto;
}

#header header div#pNav ul li {
	display: inline-block;
	margin-left: 20px;
	height: auto;
}

#header header div#pNav ul li:first-child {
	margin-left: 0;
}

#header header div#pNav ul li a {
	display: block;
	height: auto;
}

#header header div#pNav ul li a:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
  opacity: 0.5;
}

#header header div#pNav ul li a img {
}




/* --------------------------------------------------------
 Contents Style
-------------------------------------------------------- */

article {
}

aside {
}
/*
.main {
	padding-top: 6rem;
}
*/

.main header {
	margin-bottom: 8rem;
}

.contents {
	width: 95%;
	margin: 0 auto 0;
}


/*	header */

h2 {
}

h3 {
}

h4 {
}


/* contents
----------------------------------------------------*/
/*
#main section {
	margin-bottom: 60px;
}

#main p {
	line-height: 180%;
}
*/
#main p.photos_before,
#main p.images_before {
	margin: 0 auto;
	text-align: center;
}

#main p.photos_after,
#main p.images_after {
	margin-top: 0;
	text-align: center;
}

.contents .chapter,
.contents.chapter {
	margin-bottom: 8rem;
}

.contents .paragraph,
.contents.paragraph {
	margin-bottom: 3rem;
}


/* flexbox
----------------------------------------------------*/

.box-wrap,
.box-wrap-480 {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.box-wrap.box-no-wrap,
.box-wrap-480.box-no-wrap {
  flex-wrap:nowrap;
}
.box-wrap.box-justify-center,
.box-wrap-480.box-justify-center {
  justify-content: center;
}
.box-wrap.box-justify-start,
.box-wrap-480.box-justify-start {
 justify-content: flex-start;
}
.box-wrap.box-align-center,
.box-wrap-480.box-align-center {
  align-items: center;
}
.box-wrap.box-align-end,
.box-wrap-480.box-align-end {
  align-items: flex-end;
}

.box {

}
.box.box-inline,
.box-480.box-inline {
  display: inline-block;
}
.box img,
.box-480 img {
  width: 100%;
}
.box p,
.box-480 p {
  margin: 1rem;
}


.box.width-span-05-fix,
.box-480.width-span-05-fix {
  width: 5%
}
.box.width-span-10-fix,
.box-480.width-span-10-fix {
  width: 10%
}
.box.width-span-15-fix,
.box-480.width-span-15-fix {
  width: 15%
}
.box.width-span-18-fix,
.box-480.width-span-18-fix {
  width: 18%
}
.box.width-span-20-fix,
.box-480.width-span-20-fix {
  width: 20%
}
.box.width-span-25-fix,
.box-480.width-span-25-fix {
  width: 25%
}
.box.width-span-30-fix,
.box-480.width-span-30-fix {
  width: 30%
}
.box.width-span-33-fix,
.box-480.width-span-33-fix {
  width: 33.33%
}
.box.width-span-40-fix,
.box-480.width-span-40-fix {
  width: 40%
}
.box.width-span-45-fix,
.box-480.width-span-45-fix {
  width: 45%
}
.box.width-span-50-fix,
.box-480.width-span-50-fix {
  width: 50%
}
.box.width-span-60-fix,
.box-480.width-span-60-fix {
  width: 60%
}
.box.width-span-64-fix,
.box-480.width-span-64-fix {
  width: 64%
}
.box.width-span-70-fix,
.box-480.width-span-70-fix {
  width: 70%
}
.box.width-span-80-fix,
.box-480.width-span-80-fix {
  width: 80%
}
.box.width-span-82-fix,
.box-480.width-span-82-fix {
  width: 82%
}
.box.width-span-85-fix,
.box-480.width-span-85-fix {
  width: 85%
}
.box.width-span-90-fix,
.box-480.width-span-90-fix {
  width: 90%
}
.box.width-span-100-fix,
.box-480.width-span-100-fix {
  width: 100%
}


/* font-size
----------------------------------------------------*/

.hentry .entry-content p.font-size-small,
.widget_text p.font-size-small,
.error-404 p.font-size-small,
.comment-content p.font-size-small {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 160%
}

.hentry .entry-content p.font-size-middle,
.widget_text p.font-size-middle,
.error-404 p.font-size-middle,
.comment-content p.font-size-middle {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 160%
}

/* inview
----------------------------------------------------*/


/*動きのきっかけの起点となるクラス名 はじめは非表示に*/
.fadeInUpTrigger,
.fadeInDownTrigger,
.fadeInUpTriggerOnce{
    opacity:0;
}

/* アニメーションの回数を決めるCSS*/

.count2{
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time{
  animation-delay: 0.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time{
  animation-duration: 4.5s;/*この数字を変化させたい時間に変更*/
}


/* fixed
----------------------------------------------------*/

#container {
  overflow: hidden;
}

#container .button-primary a {
  position: fixed;
  display: block;
  bottom: 2.5%;
  right: 3%;
  width: 66px;
  height: 66px;
  z-index: 11;
  cursor: pointer;
}

#container .button-primary a:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
  transition: 0.5s;
}


/* fullpage
----------------------------------------------------*/


#fullpage .section {
  background-position: center center;
	background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

#fullpage .section.alumnus {
  background-position: center top;
	background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
/*
#fullpage .section.section-01,
#fullpage .section.section-02,
#fullpage .section.section-03,
#fullpage .section.section-04,
#fullpage .section.section-05,
#fullpage .section.section-06,
#fullpage .section.section-07,
#fullpage .section.section-08,
#fullpage .section.section-09,
#fullpage .section.section-10,
#fullpage .section.section-11,
#fullpage .section.section-12,
#fullpage .section.section-13,
#fullpage .section.section-14 {
  background-color: rgba(0,0,0,0.5);
  background-blend-mode: multiply;
}
 */
 #fullpage .section.home.section-01 {
   background-image: url('../images/home/section_01_home_bg.png');
   /* background-image:-webkit-image-set(url("../images/home/section_01_home_bg.png") 1x,url("../images/@2x/home/section_01_home_bg.png") 2x); */
 }

 #fullpage .section.home.section-02 {
   background-image: url('../images/home/section_02_home_bg.png');
   /* background-image:-webkit-image-set(url("../images/home/section_02_home_bg.png") 1x,url("../images/@2x/home/section_02_home_bg.png") 2x); */
 }

#fullpage .section.section-03 {
  background-image: url('../images/section_alumnus/section_alumnus_01_bg.jpg');
}
#fullpage .section.section-04 {
  background-image: url('../images/section_alumnus/section_alumnus_02_bg.jpg');
}
#fullpage .section.section-05 {
  background-image: url('../images/section_alumnus/section_alumnus_03_bg.jpg');
}
#fullpage .section.section-06 {
  background-image: url('../images/section_alumnus/section_alumnus_04_bg.jpg');
}
#fullpage .section.section-07 {
  background-image: url('../images/section_alumnus/section_alumnus_05_bg.jpg');
}
#fullpage .section.section-08 {
  background-image: url('../images/section_alumnus/section_alumnus_06_bg.jpg');
}
#fullpage .section.section-09 {
  background-image: url('../images/section_alumnus/section_alumnus_07_bg.jpg');
}
#fullpage .section.section-10 {
  background-image: url('../images/section_alumnus/section_alumnus_08_bg.jpg');
}
#fullpage .section.section-11 {
  background-image: url('../images/section_alumnus/section_alumnus_09_bg.jpg');
}

#fullpage .section.alumnus.section-12 {
  background-image: url('../images/section_alumnus/section_alumnus_10_bg.jpg');
  /* background-image:-webkit-image-set(url("../images/section_alumnus/section_alumnus_10_bg.jpg") 1x,url("../images/@2x/section_alumnus/section_alumnus_10_bg.jpg") 2x); */
  background-position: center center;
}

#fullpage .section.alumnus.section-13 {
  background-image: url('../images/section_alumnus/section_alumnus_11_bg.jpg');
  /* background-image:-webkit-image-set(url("../images/section_alumnus/section_alumnus_11_bg.jpg") 1x,url("../images/@2x/section_alumnus/section_alumnus_11_bg.jpg") 2x); */
  background-position: right center;
}

#fullpage .section.section-18 {
  background-image: url('../images/section_kyocotan/section_kyocotan_01_bg_pc.jpg');
}

#fullpage .section.section-19 {
  background-image: url('../images/section_kyocotan/section_kyocotan_02_bg_pc.jpg');
}

#fullpage .section.section-20 {
  background-image: url('../images/section_kyocotan/section_kyocotan_03_bg.jpg');
}

#fullpage .section.section-21 {
  background-image: url('../images/section_kyocotan/section_kyocotan_04_bg.jpg');
}

#fullpage .section.section-22 {
  background-image: url('../images/section_kyocotan/section_kyocotan_05_bg.png');
  background-repeat: repeat;
  background-size: 16px 16px;
}

#fullpage #open_campus.section.section-23 {
  background-image: url('../images/opencampus/open_campus_bg.png');
  /* background-image:-webkit-image-set(url("../images/opencampus/open_campus_bg.png") 1x,url("../images/@2x/opencampus/open_campus_bg.png") 2x); */
}



#fullpage .section .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#fullpage .section .wrapper .area {
  margin: 0 auto;
  max-width: 1280px;
  height: 100%;
  position: relative;
}

#container .button-secondary a {
  position: absolute;
  display: block;
  bottom: 0.25%;
  left: 3%;
  width: 134px;
  height: 164px;
  z-index: 11;
  cursor: pointer;
}

#container .button-secondary a:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
  transition: 0.5s;
}

#container .button-tertiary p {
  position: absolute;
  display: none;
  bottom: 1.5%;
  left: 50%;
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
  width: 40px;
  height: 30px;
  z-index: 99;
  -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}


/* home */

#fullpage .section.home .home-kcg-logo {
  margin: 6rem 0 0 6rem;
  width: 275px;
}

#fullpage .section.home.section-01 .wrapper,
#fullpage .section.home.section-02 .wrapper {
	overflow: hidden;
}

#fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
  width: 950px;
  top: 30px;
  right: -50px;
  z-index: -1;
}

#fullpage .section.home.section-02 .wrapper .area .illust.illust-02 {
  width: 620px;
  top: 0;
  left: 50%;
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
  z-index: -1;
}

#fullpage .section.home .wrapper .area .text-pc,
#fullpage .section.home .wrapper .area .text-mb {
  position: absolute;
}

#fullpage .section.home .wrapper .area .text-pc.text-01 {
  max-width: 470px;
  left: 90px;
  bottom: 100px;
}

#fullpage .section.home .wrapper .area .text-pc.text-02 {
  max-width: 245px;
  right: 100px;
  top: 65px;
}

/* alumnus */

#fullpage .section.alumnus .belt {
  margin: 0 auto;
  max-width: 520px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,1);
  border-left: 1px solid rgba(128,128,128,1);
  border-right: 1px solid rgba(128,128,128,1);
  z-index: -10;
}

#fullpage .section.alumnus .wrapper .area .inner {
  margin: 5rem auto 0;
  padding: 0;
  width: 100%;
}

#fullpage .section.alumnus .wrapper .area .item {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

#fullpage .section.alumnus .wrapper .area .inner .alumnus-logo {
  margin: 0 8% 0 auto;
  max-width: 40%;
}

#fullpage .section.alumnus .wrapper .area .inner .shadow {
  -webkit-box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.5);
	-moz-box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.5);
	box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.5);
}

#fullpage .section.alumnus .wrapper .area .inner #alumnus-photo {
  margin: 0 auto;
  max-width: 80%;
}

#fullpage .section.alumnus .wrapper .area .inner .text-pc {
  margin: 0 auto;
  max-width: 520px;
}

#fullpage .section.alumnus .wrapper .area .item .text-pc {
  margin: 0 auto 0 20%;
  max-width: 420px;
}

#fullpage .section.alumnus .wrapper .area .inner .text-mb {
  margin: 0 auto;
  max-width: 80%;
}

#fullpage .section.alumnus .wrapper .area .item .text-mb {
  margin: 18vh auto 0 5%;
  max-width: 50%;
}

#fullpage .section.alumnus.section-13 .free-area {
}

#fullpage .section.alumnus.section-13 .free-area .text-pc {
  max-width: 620px;
	position: absolute;
	top: 10vw;
	right: 0;
}
/*
#fullpage .section.alumnus.section-13 .wrapper .area .inner .text-pc {
  margin: 0 0 0 auto;
  max-width: 620px;
}
*/
#fullpage .section.alumnus.section-13 .wrapper .area .item .text-mb {
	margin: 30vh auto 0 22%;
	max-width: 370px;
}

#fullpage .section .area p {
  text-align: center;
}

#fullpage .section .area p img {
  margin: 0 auto;
}


/* teachers */

#fullpage .section.teachers .wrapper .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#fullpage .section.teachers .wrapper .inner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* この一行を追加するだけ！ */
}

#fullpage .section.teachers .wrapper .area .teachers-logo {
  margin: 5rem 63% 0 auto;
  max-width: 18%;
}

#fullpage .section.teachers .wrapper .area .teachers-text {
  margin: 0 auto;
  width: 214px;
}


/* kyocotan */

#fullpage .section.kyocotan .wrapper .area {
  max-width: 1080px;
}

#fullpage .section.kyocotan.section-20 .wrapper .area {
  max-width: 100%;
}

#fullpage .section.kyocotan.section-20 .wrapper .area .detail {
  margin: 0 auto;
  max-width: 1080px;
  height: auto;
  position: relative;
}

#fullpage .section.kyocotan.section-21 .wrapper .area .kcg-logo {
  margin: 3rem auto 3rem 6rem;
  max-width: 12%;
}

#fullpage .section.kyocotan.section-22 .wrapper .area .kcg-logo {
  margin: 3rem auto 0 6rem;
  max-width: 24%;
}

#fullpage .section.home .wrapper .area .illust,
#fullpage .section.kyocotan .wrapper .area .illust,
#fullpage .section.kyocotan .wrapper .area .text {
  position: absolute;
}

#fullpage .section.kyocotan .wrapper .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#fullpage .section.kyocotan.section-18 .wrapper .inner img.illust-18 {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: visible;
}

#fullpage .section.kyocotan.section-18 .wrapper .area .text.text-18 {
  width: 360px;
  height: auto;
  bottom: 25vh;
  left: 2rem;
  z-index: 10;
}

#fullpage .section.kyocotan.section-19 .wrapper .area img.illust-19 {
  width: 360px;
  height: auto;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);;
  right: 10%;
  z-index: 5;
}

#fullpage .section.kyocotan.section-19 .wrapper .area .text.text-19 {
  width: 360px;
  height: auto;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);;
  left: 10%;
  z-index: 10;
}

#fullpage .section.kyocotan.section-20 .wrapper .area img.illust-20 {
  margin: 5vh auto 3rem calc(50% - 75px);
  width: 150px;
  height: auto;
}

#fullpage .section.kyocotan.section-20 .wrapper .local-header {
  margin-bottom: 3rem;
  padding: 5vh;
  background-image: url('../images/section_kyocotan/section_kyocotan_03_header_bg.png');
  /* background-image:-webkit-image-set(url("../images/section_kyocotan/section_kyocotan_03_header_bg.png") 1x,url("../images/@2x/section_kyocotan/section_kyocotan_03_header_bg.png") 2x); */
  background-position: center bottom;
	background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#fullpage .section.kyocotan.section-20 .wrapper .local-header.text-20 img {
  margin: 0 auto 0 15%;
  width: 70%;
}

#fullpage .section.kyocotan.section-20 .wrapper .area p {
  padding: 0 2.5rem;
  font-weight: 400;
  line-height: 200%;
  text-align: center;
}

#fullpage .section.kyocotan.section-21 .wrapper .area .inner {
  width: 100%;
  height: auto;
  position: relative;
}

#fullpage .section.kyocotan.section-21 .wrapper .area .illust.illust-21 {
  width: 688px;
  right: -5%;
  bottom: 5rem;
  z-index: -1;
}

#fullpage .section.kyocotan.section-21 .wrapper .area .illust.shadow-21 {
  width: 861px;
  right: -20%;
  bottom: 5rem;
  z-index: -2;
}

#fullpage .section.kyocotan.section-21 .wrapper .area .inner .balloon-21 {
  padding: 2rem 10rem 2rem 2rem;
}

#fullpage .section.kyocotan.section-22 .wrapper .area .inner {
  width: 100%;
  height: auto;
  position: absolute;
}

#fullpage .section.kyocotan.section-22 .wrapper .area .illust-22 {
    padding: 8rem 1rem 0 14rem;
}

#fullpage .section.kyocotan.section-22 .wrapper .area .section-22-text  {
  padding-top: 15%;
  position: relative;
  z-index: -1;
}

#fullpage .section.kyocotan.section-22 .wrapper .area .section-22-text .section-22-play-icon {
  max-width: 590px;
  position: absolute;
  right: -15rem;
}


/* open_campus */


#fullpage #open_campus.section.section-23 .wrapper .area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 768px;
}

@media all and (-ms-high-contrast: none) {

	*::-ms-backdrop, #fullpage #open_campus.section.section-23 .wrapper .area {
 	 display: block;
 	 margin-top: 3rem;
  }

}

#fullpage .section .area .group {
  padding: 2rem;
}

#fullpage .section .area .group p.opencampus-header,
#fullpage .section .area .group p.opencampus-read,
#fullpage .section .area .group a.opencampus-button {
  margin: 0 auto;
  text-align: center;
  position: relative;
}

#fullpage .section .area .group p.opencampus-header img,
#fullpage .section .area .group p.opencampus-read img,
#fullpage .section .area .group a.opencampus-button img {
  margin: 0 auto;
  text-align: center;
}

#fullpage .section .area .group p.opencampus-header img {
  margin-bottom: 2rem;
}

#fullpage .section .area .group p.opencampus-header img.illust-23 {
  display: none;
  width: 20%;
  position: absolute;
  top:-1.5rem;
  left: 5rem;
}

#fullpage .section .area .group a.opencampus-button {
    display: block;
    width: 33%;
    position: absolute;
    text-decoration: none;
    top:0;
    right: 0;
}

#fullpage .section .area .group a.opencampus-button:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
  transition: 0.5s;
}

#fullpage .section .area .group a.opencampus-button-mb {
    margin-left: 2rem;
    display: none;
    text-decoration: none;
    width: 55%;
}

#fullpage .section .area .group a.opencampus-button-mb:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
  transition: 0.5s;
}

#fullpage .section .area .group ul.photo-list {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap:nowrap;
}

#fullpage .section .area .group ul.photo-list li {
  width: 20%;
}

#fullpage .section .area .group ul.photo-list li:nth-of-type(1) {
  border-bottom: 20px solid rgba(227,48,47,1);
}
#fullpage .section .area .group ul.photo-list li:nth-of-type(2) {
  border-bottom: 20px solid rgba(135,201,82,1);
}
#fullpage .section .area .group ul.photo-list li:nth-of-type(3) {
  border-bottom: 20px solid rgba(75,151,227,1);
}
#fullpage .section .area .group ul.photo-list li:nth-of-type(4) {
  border-bottom: 20px solid rgba(235,163,49,1);
}
#fullpage .section .area .group ul.photo-list li:nth-of-type(5) {
  border-bottom: 20px solid rgba(51,53,206,1);
}

#fullpage .section .area .group img.bar {
  width: 100%;
  height: 10px
}

/*----------------------------------------------------
 　#youtube動画
----------------------------------------------------------- */

/* club youtube_movie */

div#youtube_movie .movie_wrap,
.wp-block-embed__wrapper {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     width: 100%;
     height: 0;
     overflow: hidden;
}

div#youtube_movie .movie_wrap iframe,
.wp-block-embed__wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* access_map
----------------------------------------------------*/

div.access_map {
position: relative;
padding-bottom: 56.25%;
width: 100%;
height: 0;
overflow: hidden;
}

div.access_map iframe,
div.access_map object,
div.access_map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* --------------------------------------------------------
 footer
-------------------------------------------------------- */

#fullpage #footer.section.section-24 {
  background-image: url('../images/common/footer_bg_pattern.png'),url('../images/common/footer_bg.png');
  background-position: center center;
	background-repeat: no-repeat;
  background-size: auto 100%, cover;
  position: relative;
  overflow: hidden;
}

#fullpage #footer.section.section-24 .wrapper .area {
  max-width: 100%;
}

#fullpage #footer.section.section-24 .wrapper .area .footer-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 400px;
  height: 95%;
}

footer {
}

footer div#fGroup {
	margin: 0 auto;
	max-width: 400px;
}

footer div#fGroup .area-logo {
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,1);
}

footer div#fGroup .area-logo p {
}

footer div#fGroup .area-logo p.footer-logo {
}

footer div#fGroup ul#info {
  margin: 3rem 0;
  text-align: center;
}

footer div#fGroup ul#info li {
  margin-bottom: 0.8rem;
  font-size: 16px;
	font-size: 1.6rem;
  font-weight: 400;
  line-height: 100%;
  color: rgba(255,255,255,1);
  text-align: center;
}

footer div#fGroup a.info {
  display: block;
  margin: 0 auto;
  padding: 1rem;
  width: 80%;
  text-align: center;
  color: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,1);
  text-decoration: none;
  cursor: pointer;
}

footer div#fGroup a.info:hover {
  color: rgba(0,148,211,1);
  background-color: rgba(255,255,255,1);
  transition: 0.5s;
}

footer div#fGroup a.footer-button {
  display: block;
  padding: 3rem;
}

footer div#fGroup a.footer-button:hover {
  filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
  transition: 0.5s;
}

/*
footer p.note img {
  width: 100%;
}
*/
p.note {
  margin: 0 calc(50% - 50vw);
  padding: 1rem 3rem;
  width: 100vw;
  text-align: left !important;
  background-color: rgba(255,255,255,1);
  position: absolute;
  bottom: 0;
}

/* footer Navi */

footer div#fnavi ul.fnavi {
	margin: 0 ;
	text-align: center;
}

footer div#fnavi ul.fnavi li {
	display: inline-block;
	margin-bottom: 1rem;
}

footer div#fnavi ul.fnavi li a {
  padding: 0 1rem;
	color: rgba(72,72,72,1);
	font-size: 14px;
	font-size: 1.4rem;
	border-left: 1px solid rgba(72,72,72,1);
  text-decoration: none;
}

footer div#fnavi ul.fnavi li:first-child a {
	border-left: none;
}

footer div#fnavi ul.fnavi li a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
  transition: 0.5s;
}

/* copyright */

footer div#copyright p {
	text-align: center;
}


@media all and (max-width: 1490px) {

	#fullpage .section.alumnus.section-13 .free-area .text-pc {
	  max-width: 580px;
		position: absolute;
		top: 18%;
		right: 0;
	}

}

@media all and (min-width: 1280px) {

	.wideContents {
		margin: 0 auto;
		width: 100%;
	}

}

@media all and (max-width: 1280px) {

  /* home */

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    width: 74vw;
    right: -50px;
  }

  #fullpage .section.home.section-01 .wrapper .area img.illust.illust-01 {
    max-width: none;
  }

  #fullpage .section.home.section-02 .wrapper .area .illust.illust-02 {
    width: 48vw;
  }

  #fullpage .section.home.section-02 .wrapper .area img.illust.illust-02 {
    max-width: none;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-02 {
    right: 5vw;
    top: 5vh;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area img.illust-19 {
    right: 8vw;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area .text.text-19 {
    left: 8vw;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area img.illust-19 {
    width: 33%;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area .text.text-19 {
    width: 33%;
  }

}

@media all and (max-width: 1080px) {

  /* home */

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    width: 86vh;
    right: -15vh;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-01 {
    max-width: 40vh;
    left: 7%;
    bottom: 80px;
  }

  #fullpage .section.home.section-02 .wrapper .area .illust.illust-02 {
    width: 58vh;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-02 {
    max-width: 25vw;
    right: 2vw;
  }

  /* alumnus */

  #fullpage .section.alumnus .wrapper .area .inner #alumnus-photo {
    max-width: 100%;
  }

  #fullpage .section.alumnus .wrapper .area .item .text-pc {
    margin: 0 auto 0 10%;
  }

  /* kyocotan */

  #fullpage .section.kyocotan.section-20 .wrapper .local-header.text-20 img {
    margin: 0 auto 0 10%;
    width: 80%;
  }

  #fullpage .section.kyocotan.section-22 .wrapper .area .section-22-text .section-22-play-icon {
    width: 55vw;
    position: absolute;
    right: -15vw;
  }

}


@media all and (max-width: 960px) {

  /* alumnus */

  #fullpage .section.alumnus .belt {
    max-width: 55vw;
  }

  #fullpage .section.alumnus .wrapper .area .inner .text-pc {
    max-width: 55vw;
  }

  /* kyocotan */

  #fullpage .section.kyocotan.section-21 .wrapper .area .illust.illust-21 {
    width: 73vw;
    right: -5%;
    bottom: 5rem;
  }

  #fullpage .section.kyocotan.section-21 .wrapper .area .illust.shadow-21 {
    width: 90vw;
    right: -20%;
    bottom: 5rem;
  }

  #fullpage .section.kyocotan.section-22 .wrapper .area .illust-22 {
      padding: 8vw 1rem 0 15vw;
  }

}

@media all and (max-width: 800px) {

  /* home */

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    bottom: -330px;
    right: -130px;
  }

}

@media all and (max-height: 1440px) and (max-height: 900px) {

  #fullpage .section .wrapper .area {
    max-width: 70vw;
  }

  #fullpage .section.kyocotan .wrapper .area {
    max-width: 65vw;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area {
    max-width: 100%;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area .detail {
    margin: 0 auto;
    max-width: 60vw;
    height: auto;
    position: relative;
  }

  #fullpage #open_campus.section.section-23 .wrapper .area {
    max-width: 90vh;
  }

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    width: 70%;
  }

  #fullpage .section.home.section-02 .wrapper .area .illust.illust-02 {
    width: 50%;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-01 {
    max-width: 40%;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-02 {
    max-width: 20%;
  }

  #fullpage .section.alumnus .belt {
    max-width: 55vh;
  }

  #fullpage .section.alumnus .wrapper .area .inner .text-pc {
    max-width: 55vh;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area img.illust-19 {
    width: 40vh;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area .text.text-19 {
    width: 40vh;
  }

  #fullpage .section.kyocotan.section-21 .wrapper .area .illust.illust-21 {
    width: 55%;
  }

  #fullpage .section.kyocotan.section-21 .wrapper .area .illust.shadow-21 {
    width: 65%;
  }

}

@media all and (max-height: 1280px) and (max-height: 800px) {

}

@media all and (max-width: 736px) and (max-height: 414px) {

  #container .button-primary a {
    bottom: 2.5% !important;
    width: 44px !important;
    height: 44px !important;
  }

  #container .button-secondary a {
    width: 80px !important;
    height: 98px !important;
  }

  #fullpage .section.home .wrapper .area {
    padding: 0 0 0 0;
    width: 100vh !important;
  }

  #fullpage .section.alumnus .wrapper .area {
    padding: 0 0 0 0;
    width: 80vh !important;
  }

  #fullpage .section.teachers .wrapper .area {
    padding: 0 0 0 0;
    width: 100vh !important;
  }

  #fullpage .section.kyocotan .wrapper .area {
    padding: 0 0 0 0;
    width: 110vh !important;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area {
    padding: 0 0 0 0;
    width: 100% !important;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area .detail {
    max-width: 90vh !important;
  }

  /* home */

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    width: 72vh !important;
    top: 3vh !important;
    bottom: auto;
    left: -10% !important;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-01 {
    bottom: 10vh !important;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-02 {
    max-width: 45vh !important;
    left: 8vw !important;
    bottom: 10vh !important;
  }

  /* alumnus */

  #fullpage .section.alumnus .wrapper .area .inner {
    margin:  2rem 0 0;
  }

  #fullpage .section.alumnus .wrapper .area .inner .alumnus-logo {
    margin: 0 2rem 0 auto !important;
    padding: 0 !important;
    max-width: 40% !important;
    background-color: none !important;
  }

  #fullpage .section.alumnus .wrapper .area .inner .shadow {
    border-top: none !important;
    border-bottom: none !important;
  }

  #fullpage .section.alumnus .wrapper .area .item .text-mb {
    margin: 5vh auto 0 5% !important;
    max-width: 50%;
  }

  #fullpage .section.alumnus.section-13 .wrapper .area .item .text-mb {
    margin: 38vh auto 0 auto !important;
    width: 50%;
  }


  /* teachers */

  #fullpage .section.teachers .wrapper .area .teachers-logo {
    margin: 1rem auto 0 1rem;
    max-width: 16.5vh;
  }

  #fullpage .section.teachers .wrapper .area .teachers-text {
    width: 22vh;
  }

  /* kyocotan */

  #fullpage .section.kyocotan.section-19 .wrapper .area .illust,
  #fullpage .section.kyocotan.section-19 .wrapper .area .text {
    position: absolute !important;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area img.illust-19 {
    width: 35% !important;
    height: auto;
    top: 50% !important;
    -webkit-transform : translateY(-50%) !important;
    transform : translateY(-50%) !important;
    right: 10% !important;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area .text.text-19 {
    width: 35% !important;
    height: auto;
    top: 50% !important;
    -webkit-transform : translateY(-50%) !important;
    transform : translateY(-50%) !important;
    left: 10% !important;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area img.illust-20 {
    margin: 5vh auto 2rem calc(50% - 30px);
    width: 60px;
    height: auto;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .local-header {
      margin-bottom: 1.5rem;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area p {
    font-size: 1.5vw;
  }

  #fullpage .section.kyocotan.section-21 .wrapper .area .kcg-logo {
    margin: 1.5rem auto 1.5rem 3rem;
    max-width: 20%;
  }

    #fullpage .section.kyocotan.section-21 .wrapper .area .illust.illust-21 {
      width: 60% !important;
      right: -5% !important;
      bottom: 2rem !important;
    }

    #fullpage .section.kyocotan.section-21 .wrapper .area .illust.shadow-21 {
      width: 70% !important;
      right: -20% !important;
      bottom: 2rem !important;
    }

    #fullpage .section.kyocotan.section-21 .wrapper .area .inner .balloon-21 {
      padding: 1rem 3rem 1rem 1rem !important;
    }

    #fullpage .section.kyocotan.section-22 .wrapper .area .illust-22 {
      padding: 4vw 1rem 0 7vw !important;
    }

    #fullpage .section.kyocotan.section-22 .wrapper .area .section-22-text .section-22-play-icon {
      width: 30vw !important;
      right: -5vw !important;
    }

    /* open_campus */

    #fullpage #open_campus.section.section-23 .wrapper .area {
      padding: 0 0 0 0;
      width: 90vh !important;
    }

    #fullpage #footer.section.section-24 .wrapper .area {
      padding: 0 0 0 0;
      width: 50vh !important;
    }

    footer div#fGroup ul#info li {
      font-size: 1.2vw;
    }

    footer div#fGroup a.info {
      font-size: 1.2vw;
      width: 80%;
    }

    footer div#fGroup .area-logo {
      padding-bottom: 1.5rem;
    }

    footer div#fGroup ul#info {
      margin: 1.5rem 0;
    }

    footer div#fGroup a.footer-button {
      padding: 1.5rem;
    }

  .box-wrap-480 {
   display: flex !important;
   flex-wrap: wrap;
   justify-content: space-between;
  }
  .box.width-span-18-fix,
  .box-480.width-span-18-fix {
    width: 18% !important;
  }
  .box.width-span-64-fix,
  .box-480.width-span-64-fix {
    width: 64% !important;
  }
}


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

	.contents {
		width: 95%;
		margin: 0 auto 0;
	}

  /*	photos images */

	#main p.photos_before,
	#main p.images_before {
		margin: 0 auto 20px;
		text-align: center;
	}

	#main p.photos_after,
	#main p.images_after {
    margin: 20px auto 0;
		text-align: center;
	}

  /* Mobile STYLES */

	.mbimg_off{
		display:none;
	}
	.mbimg_on{
		display:block;
	}

	.mbcont_off{
		display:none;
	}
	.mbcont_on{
		display:block;
	}

  /* flexbox */

  .box-wrap{
   display: block;
   /* flex-wrap:wrap;
   justify-content: space-between; */
  }
/*
  .box-wrap .box.width-span-25-50-fix {
   display: flex;
  }
*/

  .box{
  }

  .box.width-span-05-fix {
    width: 100%
  }
  .box.width-span-10-fix {
    width: 100%
  }
  .box.width-span-15-fix {
    width: 100%
  }
  .box.width-span-18-fix {
    width: 100%
  }
  .box.width-span-20-fix {
    width: 100%
  }
  .box.width-span-25-fix {
    width: 100%
  }
  .box.width-span-30-fix {
    width: 100%
  }
  .box.width-span-33-fix {
    width: 100%
  }
  .box.width-span-40-fix {
    width: 100%
  }
  .box.width-span-45-fix {
    width: 100%
  }
  .box.width-span-50-fix {
    width: 100%
  }
  .box.width-span-60-fix {
    width: 100%
  }
  .box.width-span-64-fix {
    width: 100%
  }
  .box.width-span-70-fix {
    width: 100%
  }
  .box.width-span-80-fix {
    width: 100%
  }
  .box.width-span-82-fix {
    width: 100%
  }
  .box.width-span-85-fix {
    width: 100%
  }
  .box.width-span-90-fix {
    width: 100%
  }


  /* fullpage */

  #fullpage .section .wrapper .area {
    padding: 0 0 0 0;
    max-width: 100%;
    width: 100%;
  }

  #fullpage .section.kyocotan .wrapper .area {
    max-width: 100%;
  }

  #fullpage .section.kyocotan.section-20 .wrapper .area .detail {
    max-width: 70vw;
  }

  /* home */

  #fullpage .section.home.section-01 {
    background-image: url('../images/home/section_01_home_bg_mb.png');
    /* background-image:-webkit-image-set(url("../images/home/section_01_home_bg_mb.png") 1x,url("../images/@2x/home/section_01_home_bg_mb.png") 2x); */
  }

  #fullpage .section.home.section-02 {
    background-image: url('../images/home/section_02_home_bg_mb.png');
    /* background-image:-webkit-image-set(url("../images/home/section_02_home_bg_mb.png") 1x,url("../images/@2x/home/section_02_home_bg_mb.png") 2x); */
  }

  #fullpage .section.home.section-01 .home-kcg-logo {
    margin: 5rem 5% 0 65%;
    width: 30%;
  }

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    width: 68vh;
    top: 180px;
    bottom: auto;
    left: -10%;
  }

  #fullpage .section.home .wrapper .area .text-pc.text-01 {
    max-width: 45vh;
    left: auto;
    right: 2%;
    bottom: 15%;
  }

  #fullpage .section.home.section-02 .home-kcg-logo {
    margin: 6rem 0 0 6rem;
    width: 30%;
  }

  #fullpage .section.home.section-02 .wrapper .area .illust.illust-02 {
    width: 43vh;
    top: 5vh;
    left: auto;
    right: 5%;
    -webkit-transform : translateX(0);
    transform : translateX(0);
  }

  #fullpage .section.home .wrapper .area .text-pc.text-02 {
    max-width: 45vw;
    right: auto;
    left: 5vw;
    top: auto;
    bottom: 23vh;
  }

  /* alumnus */

  #fullpage .section.alumnus .wrapper .area .inner .alumnus-logo {
    max-width: 60%;
  }

  #fullpage .section.alumnus .wrapper .area .inner .shadow {
    border-top: 10px solid rgba(0,0,0,1);
    border-bottom: 10px solid rgba(0,0,0,1);
  }

  #fullpage .section.alumnus.full .wrapper .area .inner .shadow,
  #fullpage .section.alumnus.half .wrapper .area .inner .shadow {
    border-top: none;
    border-bottom: none;
  }

  #fullpage .section.alumnus.section-12 {
    background-position: 60% center;
  }

  #fullpage .section.alumnus.section-13 {
    background-position: center center;
		background-size: 170vh;
  }

  /* teachers */

  #fullpage .section.teachers .wrapper .area .teachers-logo {
    max-width: 27%;
  }

  /* kyocotan */

  #fullpage .section.kyocotan.section-18 .wrapper .area .text.text-18 {
    width: 40%;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area .illust,
  #fullpage .section.kyocotan.section-19 .wrapper .area .text {
    position: relative;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area img.illust-19 {
    margin: 0 auto 0 27.5% !important;
    width: 45%;
    height: auto;
    top: auto;
    -webkit-transform : translateY(0);
    transform : translateY(0);
    right: auto;
  }

  #fullpage .section.kyocotan.section-19 .wrapper .area .text.text-19 {
    margin: 7.5vh auto 3rem;
    width: 50%;
    height: auto;
    top:auto;
    -webkit-transform : translateY(0);
    transform : translateY(0);;
    left: auto;
  }

    #fullpage .section.kyocotan.section-21 .wrapper .area .illust.illust-21 {
      width: 570px;
      right: -5%;
      bottom: 5rem;
      z-index: 10;
    }

    #fullpage .section.kyocotan.section-21 .wrapper .area .illust.shadow-21 {
      width: 690px;
      right: -20%;
      bottom: 5rem;
    }

    #fullpage .section.kyocotan.section-21 .wrapper .area .inner .balloon-21 {
      padding: 2rem 0 2rem 2rem;
    }

  /* table */

	div.dataTable table th{
		padding: 6px;
	}
	div.dataTable table td{
		padding: 6px;
	}

  /* footer */

  #fullpage #footer.section.section-24 .wrapper .area {
    padding: 0 0 0 0;
    width: 100%;
  }

}


@media screen and ( max-width : 660px ) {

  /* home */

  #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
    left: -30%;
  }

  #fullpage #footer.section.section-24 {
    background-image: url('../images/common/footer_bg_pattern_mb.png'),url('../images/common/footer_bg.png');
  }


}

@media screen and ( max-width : 548px ) {

  #fullpage .section.alumnus .wrapper .area .item .text-mb {
    margin: 25vh auto 0 2%;
    max-width: 55%;
  }

  #fullpage .section.alumnus.section-13 .wrapper .area .item .text-mb {
		margin: 30vh auto 0 16vw;
  }
}


@media screen and ( max-width : 480px ) {

  p,
  a,
  dt,
  dd,
  li,
  input,
  textarea {
  	font-size: 14px;
    font-size: 1.4rem;
    line-height: 180%;
  }


    .hentry .entry-content p {
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 180%;
    }

    .hentry .entry-content blockquote p {
      font-size: 14px;
      font-style: italic;
    }

    .widget_text p {
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 180%;
    }

    .widget_text blockquote p {
      font-size: 14px;
      font-style: italic;
    }

    .error-404 p {
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 180%;
    }

    .error-404 blockquote p {
      font-size: 14px;
      font-style: italic;
    }

    .comment-content p {
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 180%;
    }

    .comment-content blockquote p {
      font-size: 14px;
      font-style: italic;
    }

    .hentry .entry-content pre {
      font-size: 14px;
      font-size: 1.4rem;
    }

    /* List */

    .contents div.basicList_line dt,
    .contents dl.basicList_line dt {
      width:11rem;
    }

    .contents div.basicList_line dd,
    .contents dl.basicList_line dd {
    padding-left:11rem;
    }

    /* table */

    .hentry .entry-content table thead tr th,
    .hentry .entry-content table tbody tr th,
    .hentry .entry-content table tbody tr td {
      font-size: 12.5px;
      font-size: 1.25rem;
    }

    .widget_text table thead tr th,
    .widget_text table tbody tr th,
    .widget_text table tbody tr td {
      font-size: 12.5px;
      font-size: 1.25rem;
    }

    .error-404 table thead tr th,
    .error-404 table tbody tr th,
    .error-404 table tbody tr td {
      font-size: 12.5px;
      font-size: 1.25rem;
    }

    .comment-content table thead tr th,
    .comment-content table tbody tr th,
    .comment-content table tbody tr td {
      font-size: 12.5px;
      font-size: 1.25rem;
    }

    .mbcont_480_off{
    	display:none;
    }
    .mbcont_480_on{
    	display:block;
    }

    /* flexbox */

    .box-wrap-480 {
     display: block;
     /* flex-wrap:wrap;
     justify-content: space-between; */
    }

    .box-480{
    }

    .box-480.width-span-05-fix {
      width: 100%
    }
    .box-480.width-span-10-fix {
      width: 100%
    }
    .box-480.width-span-15-fix {
      width: 100%
    }
    .box-480.width-span-18-fix {
      width: 100%
    }
    .box-480.width-span-20-fix {
      width: 100%
    }
    .box-480.width-span-25-fix {
      width: 100%
    }
    .box-480.width-span-30-fix {
      width: 100%
    }
    .box-480.width-span-33-fix {
      width: 100%
    }
    .box-480.width-span-40-fix {
      width: 100%
    }
    .box-480.width-span-45-fix {
      width: 100%
    }
    .box-480.width-span-50-fix {
      width: 100%
    }
    .box-480.width-span-60-fix {
      width: 100%
    }
    .box-480.width-span-64-fix {
      width: 100%
    }
    .box-480.width-span-70-fix {
      width: 100%
    }
    .box-480.width-span-80-fix {
      width: 100%
    }
    .box-480.width-span-82-fix {
      width: 100%
    }
    .box-480.width-span-85-fix {
      width: 100%
    }
    .box-480.width-span-90-fix {
      width: 100%
    }


    /* container */

    #container .button-primary a {
      bottom: 2.5%;
      width: 44px;
      height: 44px;
    }

    /* home */


    #container .button-secondary a {
      bottom: 0;
      width: 80px;
      height: 98px;
    }

    #container .button-tertiary p {
      display: block;
    }

    #fullpage .section.home.section-01 .home-kcg-logo {
      margin: 4rem 5% 0 50%;
      width: 40%;
    }

    #fullpage .section.home.section-01 .wrapper .area .illust.illust-01 {
      width: 68vh;
      top: 18vh;
      bottom: auto;
      left: -35%;
    }

    #fullpage .section.home .wrapper .area .text-pc.text-01 {
      max-width: 28vh;
      left: auto;
      right: 2%;
      bottom: 15%;
    }

    #fullpage .section.home.section-02 .home-kcg-logo {
      margin: 4rem 0 0 5%;
      width: 40%;
    }

    #fullpage .section.home.section-02 .wrapper .area .illust.illust-02 {
      right: -10%;
    }

  /* alumnus */

  #fullpage .section.alumnus.section-09 {
    background-image: url('../images/section_alumnus/section_alumnus_07_bg_mb.jpg');
    /* background-image:-webkit-image-set(url("../images/section_alumnus/section_alumnus_07_bg_mb.jpg") 1x,url("../images/@2x/section_alumnus/section_alumnus_07_bg_mb.jpg") 2x); */
  }
  #fullpage .section.alumnus.section-10 {
    background-image: url('../images/section_alumnus/section_alumnus_08_bg_mb.jpg');
    background-position: 5% top;
  }
  #fullpage .section.alumnus.section-11 {
    background-image: url('../images/section_alumnus/section_alumnus_09_bg_mb.jpg');
    background-position: 5% top;
  }

  #fullpage .section.alumnus .belt {
    max-width: 80%;
  }

    #fullpage .section.alumnus .wrapper .area .inner {
      margin: 0 auto;
      padding: 0;
      width: 100%;
    }

    #fullpage .section.alumnus .wrapper .area .inner .alumnus-logo {
      margin: 0;
      padding: 1rem 1rem 1rem 2rem;
      max-width: 22.5%;
      background-color: rgba(255,255,255,1);
    }

    #fullpage .section.alumnus.full .wrapper .area .inner .alumnus-logo {
      margin: 0;
      padding: 1rem 1rem 1rem 2rem;
      max-width: 22.5%;
      background: none;
    }

		#fullpage .section.alumnus.section-13 .wrapper .area .item .text-mb {
			margin: 30vh auto 0 12.5%;
			max-width: 75%;
	  }

    /* teachers */

    #fullpage .section.teachers .wrapper .inner {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    #fullpage .section.teachers .wrapper .area .teachers-logo {
      margin: 1rem auto 0 2rem;
      max-width: 18%;
    }

    #fullpage .section.teachers .wrapper .area .teachers-text {
      margin: 0;
      width: 100%;
    }

    #fullpage .section.teachers .wrapper .area .teachers-photo-mb {
      margin: 0;
      width: 100%;
      height: 450px;
    }

    #fullpage .section.teachers .wrapper .area .teachers-photo-mb img {
      width: 100%;
      height: 450px;
      object-fit: cover; /* この一行を追加するだけ！ */
    }

    /* kyocotan */

    #fullpage .section.section-18 {
      background-image: none;
    }

    #fullpage .section.section-19 {
      background-image: url('../images/section_kyocotan/section_kyocotan_02_bg_mb.jpg');
    }

    #fullpage .section.kyocotan.section-20 .wrapper .area img.illust-20 {
      margin: 5vh auto 3rem 35%;
      width: 30%;
      height: auto;
    }

    #fullpage .section.kyocotan.section-20 .wrapper .local-header.text-20 img {
      margin: 0 auto 0 5%;
      width: 90%;
    }

    #fullpage .section.kyocotan.section-20 .wrapper .area p {
      padding: 0 2.5rem;
      font-size: 3.5vw;
      line-height: 200%;
    }

    #fullpage .section.section-21 {
      background-image: url('../images/section_kyocotan/section_kyocotan_04_bg.jpg');
      background-position: 45% top;
    }

    #fullpage .section.kyocotan.section-18 .wrapper .area .text {
      position: relative;
    }

    #fullpage .section.kyocotan.section-18 .wrapper .area .text.text-18 {
      margin: 2.5rem auto 0;
      width: 75%;
      height: auto;
      bottom: auto;
      left: auto;
      z-index: 10;
    }

    #fullpage .section.kyocotan.section-21 .wrapper .area .kcg-logo {
      margin: 2rem 1rem 1rem;
      max-width: 30%;
    }

      #fullpage .section.kyocotan.section-21 .wrapper .area .illust.illust-21 {
        width: 70%;
        right: 0;
        bottom: 3rem;
      }

      #fullpage .section.kyocotan.section-21 .wrapper .area .illust.shadow-21 {
        width: 100%;
        right: 0;
        bottom: 3rem;
      }

      #fullpage .section.kyocotan.section-21 .wrapper .area .inner .balloon-21 {
        padding: 2rem 14rem 2rem 2rem;
      }

      #fullpage .section.kyocotan.section-22 .wrapper .area .inner {
        position: relative;
      }

      #fullpage .section.kyocotan.section-22 .wrapper .area .kcg-logo {
        margin: 3rem auto 1.5rem;
        max-width: 30%;
      }

      #fullpage .section.kyocotan.section-22 .wrapper .area .section-22-text  {
        padding: 0 2rem;
      }

      #fullpage .section.kyocotan.section-22 .wrapper .area .section-22-text .section-22-play-icon {
        width: 70vw;
        right: -15vw;
        top: -15vw;
      }

      /* open_campus */

      #fullpage .section .area .group {
        padding: 0;
      }

      #fullpage .section .area .group p.opencampus-read {
        margin-bottom: 2rem;
      }

      #fullpage .section .area .group ul.photo-list {
        flex-wrap:wrap;
      }

      #fullpage .section .area .group p.opencampus-header img {
        margin-bottom: 1.5rem;
      }

      #fullpage .section .area .group p.opencampus-header img.illust-23 {
        display: block;
      }

      #fullpage .section .area .group ul.photo-list {
        margin-bottom: 1.5rem;
      }

      #fullpage .section .area .group ul.photo-list li {
        width: 33.3%;
        height: 80px;
      }

      #fullpage .section .area .group ul.photo-list li img {
        width: 100%;
        height: 80px;
        object-fit: cover;
      }

      #fullpage .section .area .group a.opencampus-button {
        display: none;
      }

      #fullpage .section .area .group a.opencampus-button-mb {
        display: block;
      }

      #fullpage .section .area .group ul.photo-list li:nth-of-type(1),
      #fullpage .section .area .group ul.photo-list li:nth-of-type(2),
      #fullpage .section .area .group ul.photo-list li:nth-of-type(3),
      #fullpage .section .area .group ul.photo-list li:nth-of-type(4),
      #fullpage .section .area .group ul.photo-list li:nth-of-type(5) {
        border-bottom: none;
      }

  /* contact */

  #contact .mailform dl dd span.mwform-tel-field input,
  #contact .mailform dl dd span.mwform-zip-field input {
  	padding:3px;
  	width: 28%;
  }

  /* footer */

  #fullpage #footer.section.section-24 .wrapper .area {
    max-width: 100%;
  }

  footer div#fGroup {
  	margin: 0 auto;
  	max-width: 80%;
  }

  footer div#fGroup a.info {
    width: 100%;
  }

  footer div#fGroup a.info {
    padding: 0.5rem 0;
  }

}

@media screen and ( max-width : 420px ) {

}

@media screen and ( max-width : 375px ) {

  #fullpage .section.alumnus .belt {
    max-width: 75%;
  }

  #fullpage .section.alumnus .wrapper .area .inner .text-mb {
    margin: 0 auto;
    max-width: 75%;
  }

	#fullpage .section.alumnus.section-13 .wrapper .area .item .text-mb {
		margin: 30vh auto 0 12.5%;
	}

  footer div#fGroup ul#info li {
    font-size: 3.5vw;
  }

}

@media screen and ( max-width : 320px ) {

  #fullpage .section .area .group ul.photo-list li {
    height: 65px;
  }

  #fullpage .section .area .group ul.photo-list li img {
    height: 65px;
    object-fit: cover;
  }

  #fullpage .section .area .group img.bar {
    height: 5px
  }

}


@media (max-height: 768px) {

  #fullpage .section .area p {
    padding:0 10% 0 10%;
  }

}

/*========= ローディング ===============*/

#loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1f71d8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  z-index: 9999;
}

.loader {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

.completed {
  opacity: 0;
  visibility: hidden;
}