@charset "UTF-8";

/* CSS Document */
hr.sub_ttl_line {
	display: none;
}
@media screen and (max-width: 828px) {
	hr.sub_ttl_line {
    border-bottom: #000 0.1px solid;
    width: 70%;
    margin: 0 auto 10%;
}
}
.page_first .contents {
    width: 100%;
    float: left;
	  padding: 0 0 5%;
    margin: 3% 0;
    font-size: 15px;
    color: #3e646d;
    border-bottom: dotted #4f9771 0.5px;
}
.expansion_borde{
	position:relative;
}

.expansion_borde:before{
	content: '';
	position: absolute;
	border: 4px solid black;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	-webkit-transition-duration: 0.3s;
}

.expansion_borde:hover:before{
	top: -8px;
	bottom: -8px;
	left: -8px;
	right: -8px;
}

p.small_article{
	font-family: "Times New Roman", Times, "serif";
}
.left_txt{
	width: 50%;
}
p.message {
    padding: 0 0 30px 0;
}
.center{
	text-align: center;
	width: 100%;
}
.text.offs .effect {
  opacity: 0;
}
.text.ons .effect {
  opacity: 1;
  transition-duration: 1s;
}
.delay-4 {
  transition-delay: 0.4s;
}
.delay-5 {
  transition-delay: 0.5s;
}
.delay-6 {
  transition-delay: 0.6s;
}
/*遅延の設定*/
.delay-1 {
  transition-delay: 0.1s;
}
.delay-2 {
  transition-delay: 0.2s;
}
.delay-3 {
  transition-delay: 0.3s;
}

.center{
	text-align: center;
}
.small_img{
	width: 200px;
	margin: 0 auto;
	display: block;
}
.dotted {
    border: dotted 5px #333;
}
.mt20px{
	margin-top: 20px;
}
@media screen and (min-width: 768px) {
	.pc_none{
		display:none;
	}
	.sp_none{
		display:block;
	}	
}/*max-width: 828p*/

@media screen and (max-width: 828px) {
	.pc_none{
		display:block;
	}
	.sp_none{
		display:none;
	}		
}/*max-width: 828p*/

/*Contetns_box内の要素*/

/*透明背景*/
.bg_white_Transparent{
	background-color: #ffffffb5;
    padding: 1%;
    margin: 7px;	
}

.image_base{
  min-height: 800px; /* 高さの最小値を決めることで高さを確保させます。デバイスサイズに応じて数値を変更させると、背景画像もレスポンシブに変化します。　*/
　background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; /* 背景画像をフルスクリーンにフィットさせます */
}

/*コンテンツh2タイトル*/
h2.delighter.started.ended {
	transform: rotate(-90deg);	
}
@media screen and (max-width: 828px) {
	h2 img{
    width: 250px;
    text-align: center;
    display: block;
    margin: 0 auto;
	}
	img.h2_ttl_01{
    width: 250px;
	}
	img.h2_ttl_02{
    width: 130px;
	}
	img.h2_ttl_03{
    width: 270px;
	}	
}/*max-width: 828p*/

/********文言*********/
img.pc-mongon-main {
    max-width: 200px;
    position: absolute;
    right: 2%;
    top: 9%;
}
img.pc-mongon-sub {
    max-width: 140px;
    position: absolute;
    right: 17%;
    top: 10%;
}
@media screen and (max-width: 828px) {
	img.sp-mongon-main {
    max-width: 100%;
    position: absolute;
    top: 2%;
}
img.sp-mongon-sub {
    max-width: 100%;
    position: absolute;
    bottom: 12%;
}
}

#top-head {
    background: url(https://www.loft-prj.co.jp/LOFT/25th/wp-content/themes/LOFT-25TH-ANV/images/Top_bg.png) no-repeat;
	background-size: cover;
    height: 100vh !important;	
}
section#about {
    background: url(https://www.loft-prj.co.jp/LOFT/25th/wp-content/themes/LOFT-25TH-ANV/images/about-bg.png) no-repeat;
    background-size: cover;
    /* height: 100vh; */
}
#about p {
	color: #fff;
    width: 73%;
    margin: 0 0 0 22%;
    padding: 18% 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: left;	
}
section#Schedule {
    background: url(https://www.loft-prj.co.jp/LOFT/25th/wp-content/themes/LOFT-25TH-ANV/images/schedule-bg.png) no-repeat;
    background-size: cover;
    min-height: auto;
    margin: 0 auto;
    height: auto !important;
}

@media screen and  (max-width: 828px) {
	
#about p {
    color: #fff;
    width: 92%;
    margin: 0 auto;
    padding: 31% 0 0 0;
    font-size: 15px;
    letter-spacing: 2px;
}
section#about {
    background-size: cover;
    height: auto;
    background-position: top;
	    padding: 0 0 8vh 0;
}
section#Schedule {
    background-size: cover;
    height: auto !important;
    background-position: center;
    margin: 0 auto;
}	
}

/*Schedule*/
.Schedule{
	position: relative;
    padding: 0 0 10vh 0;
    width: 100%;
    overflow: hidden;	
}
.Schedule h2{
    letter-spacing: 2px;
    color: #c85250;
    margin: 0 0 10px 20px;
    line-height: 2rem;
    font-size: 20px;
}
.Schedule h3 {
    font-size: 18px;
    margin: 20px 0 0 20px;
    line-height: 1.5rem;
}
.card_text p {
    margin: 0 0 0 20px;
    font-size: 11px;
}
.Schedule h2.delighter.started.ended {
    font-family: hira_W8;
    font-size: 4em;
    position: absolute;
    color: #919191;
    margin: 0px auto;
    top: 10vh;
    left: -57px;
    text-align: center;
    transition: 0.5s;
}
.card_text {
    width: 75%;
    text-align: left;
    float: left;
    line-height: 1rem;
}
ul.Schedule_list {
    width: 100%;
    padding: 1vh 0;
    height: auto;
    display: grid;
    padding: 0 0 1% 0;
    /* overflow-x: scroll; */
    /* height: 305vh; */
}
ul.Schedule_list li {
    width: 250px;
    list-style: none;
    display: inline-block;
    border-spacing: 10px;
    vertical-align: top;
}
ul.Schedule_list img{
    width: 25%;
    height: auto;
    float: left;
    aspect-ratio: unset;
    overflow: unset;
    overflow-clip-margin: unset;	
}
.number_img img{
    clip-path: polygon(4rem 0px, calc(100% - 0rem) 0px, 100% 1rem, 100% calc(100% - 0rem), calc(100% - 1rem) 100%, 0rem 100%, 0px calc(100% - 0rem), 0px 4rem)	
}
ul.Schedule_list .contents {
    position: relative;
    width: 95%;
    margin: 0 auto 5vh;
    border-bottom: 0.5px solid #ffffff;
    padding: 0 0 6vh 0;
}
ul.Schedule_list p.number {
    color: #589998;
    width: 26px;
    font-size: 41px;
    margin: 0;
    position: absolute;
    top: -18px;
    font-family: cursive;
    font-weight: 900;
    left: 3px;
}
ul.Schedule_list li p.detail {
    font-size: 12px;
    margin: 0 0;
    color: #589998;
    font-family: system-ui;
}
ul.Schedule_list li p.detail a {
    color: #589998;
    font-weight: 800;
}
li.Schedule .img_container a img{
    filter: brightness(52%) grayscale(100%) contrast(197%);
    width: 50%;
    margin: 0 auto;	
    transition:1s all;
    opacity:1;
}
.small_link_txt{
	width: 95%;
    text-align: right;
    position: relative;
    right: 0px;	
    font-family: system-ui;	
}
.small_link_txt a{
    color: #599998;
    font-size: 14px;
}
@media screen and (max-width: 828px) {
li.Schedule{
    height: auto;
    border-bottom: none;
    border-right: none!important;
    border-left: none!important;
}
.Schedule h2.delighter.started.ended {
    top: 7vh;
    left: -69px;
    font-size: 3em;
    font-family: system-ui;
}
ul.Schedule_list .contents {
    width: 95%;
    margin: 0 auto 0;
    padding: 5vh 0;
}	
ul.Schedule_list li{
    float: unset;
    display: unset;
}
li.Schedule_item a {
    font-size: 10px;
}
ul.Schedule_list {
    margin: 0;
    width: 82%;
}
ul.Schedule_list img{
    width: 50%;
}	
li.Schedule img {
    display: none;
}
li.Schedule_list p.number {
    font-family: cursive;
}
.Schedule h3 {
    font-size: 203%;
    margin: 6% auto;
    line-height: 2.5rem;
    width: 100%;
}
.card_text p {
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.5rem;
    width: 100%;
}
.Schedule h2 {
    letter-spacing: 2px;
    margin: 4% auto;
    line-height: 2rem;
    font-size: 20px;
    width: 100%;
}
}
/*max-width: 828px*/

@media screen and (min-width: 2056px) {
li.Schedule{
    height: 407px;
}
ul.Schedule_list {
    margin: 21% auto;
	}
}	

/*ABOUT*/
.about{
	position: relative;
    padding: 0;
    width: 100%;
}
.about h2{
    letter-spacing: 4px;
    color: #919191;
    margin: 0 0 0 20px;
    font-family: hira_W8;
}
.about h2.delighter.started.ended {
    font-family: hira_W8;
    font-size: 4em;
    position: absolute;
    color: #919191;
    margin: 0px auto;
    top: 10vh;
    left: -57px;
    text-align: center;
    transition: 0.5s;
}
.about div{
    margin: 0 0 0 16%;
    width: 84%;
    padding: 25vh 0;
    position: relative;
    border-top: 6px dotted #919191;
}
.about p {
    width: 90%;
    text-align: center;
    margin: 0 auto;
    color: #589998;
    font-size: 15px;
    line-height: 2em;
}
@media screen and (max-width: 828px) {
li.about{
    height: auto;
    border-bottom: none;
    border-right: none!important;
    border-left: none!important;
}
.about p{
    border-left: none;
    text-align: center;
    width: 85%;
    padding: 0 0 0 0;
    border-right: none;
    border-top: none;
    border-bottom: none;	
    font-family: system-ui;	
}
.about p br {
    display: none;
}	
.about h2.delighter.started.ended {
    top: 6vh;
    left: -64px;
    font-size: 3em;
    font-family: system-ui;	
}
.about div {
    padding: 10vh 0;	
}
}
/*max-width: 828px*/


/*head_logo*/
#head_logo {
    width: 300px;
}
#head_logo.mini {
    width: 150px !important;
}
#head_logo.mini{
    width: 150px !important;
    -webkit-animation-name: logo_anime;
    -webkit-animation-duration:1s;
    animation-name:logo_anime;
    animation-duration:1s;
}
@-webkit-keyframes logo_anime{
    from{
        width: 300px;
    }
    to {
        width: 150px !important;
    }
}
@keyframes logo_anime{
    from{
        width: 300px;
    }
    to{
        width: 150px !important;
    }
}

/*Schedule*/
@media screen and (max-width: 828px) {
li.Schedule{
    height: auto;
    border-bottom: none;
    border-right: none!important;
    border-left: none!important;
}
ul.Schedule_list p.number {
    left: 5px;
}
.Schedule h2.delighter.started.ended {
    font-size: 6em;
    font-family: system-ui;
    transform: none;
    text-align: center;
    position: unset;
}
ul.Schedule_list li{
    float: unset;
    display: unset;
}
li.Schedule_item a {
    font-size: 10px;
}
ul.Schedule_list {
    margin: 0 auto;
    width: 95%;
    padding: 0;
    /* overflow-x: scroll; */
    /* height: 97vh; */
}
ul.Schedule_list img{
    width: 70%;
    float: unset;
    display: block;
    margin: 0 auto 5%;
}	
li.Schedule img {
    display: none;
}
.card_text {
    width: 100%;
    text-align: left;
    float: unset;
    line-height: 1rem;
}	
}/*max-width: 828px*/

@media screen and (min-width: 2056px) {
li.Schedule{
    height: 407px;
}
ul.Schedule_list {
    margin: 21% auto;
	}
}	

/*アニメ*/

/* delighters.jsが読み込まれると、 [data-delighter] 属性を持っている要素それぞれに .delighter が付与されます。*/
.delighter {
  transition: all .7s ease-out;
  transform: translateY(-90%);
  opacity: 1;
}

/* スクロールしてターゲットが画面上部（初期設定）から75%（初期設定）の位置にきた際 .started が設定されます。*/
.delighter.started {
  transform: none;
  opacity: 1;
}

/* スクロールしてターゲットが画面下部（初期設定）から75%（初期設定）の位置にきた際 .ended が設定されます。 */
.delighter.started.ended {
  border: none;
}

.delighter.splash {
  transition: all 2s ease-out;
}
.delighter.splash.ended {
  background: #fff;
}
.delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
.delighter.right.started { transform:none; opacity:1; }

.content.delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
.content.delighter.left.started { transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li { opacity: 1; transform: none; }
.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; }
.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; }
.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; }
.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; }
.delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; }
.delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
.delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }

.delighter pre {
  display: block; transition: all 2s ease-out; opacity: 0;
  padding: 20px 0;
  width: 1px; overflow: hidden;
}
.delighter.started pre {
  max-width: 99999px; width: 100%; opacity: 1;
}
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }

/*---FadeUp----*/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@media screen and (max-width: 767px){
.sp_none{display:none;}	
	}
@media screen and (min-width: 768px){
.pc_none{display:none;}		
	}

/*TAB*/
.clear{
  clear:both;
}
nav.tab{
    width: 78%;
    margin: 0 0 0 22%;
    padding: 2% 0 0 0;	
  }
nav.tab a{  
    font-weight: bold;
    display: inline-block;
    width: 10.5%;
    height: 88px;
    float: left;
    line-height: 89px;
    color: #ffffff;
    font-size: 40px;
    text-align: center;
    text-decoration: none;
}
nav.tab a:first-child{
  border:none;
}
nav.tab a:last-child{
  border:none;
}
.tabContainer{
	width: 78%;
	height: auto;
	margin: 0 0 0 20%;
	text-align: center;
	position: relative;
	}
.Tabcondent{
    width: 100%;
    /* height: auto; */
    /* background-color: #dc5f48; */
    color: #fff;
    text-align: left;
    line-height: 150px;
    opacity: 0;
    border-radius: 32px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    transition: all ease-in-out 0.3s;
    position: absolute;
    /* overflow-x: scroll; */
    /* height: auto; */
  }
nav.tab a.active{
    background-color: #ffffff;
    color: #000 !important;
}
.Tabcondent.active{
    width: 100%;
    /* height: 100vh; */
    opacity: 1;
    border-radius: 0px;
    transition: all ease-in-out 0.6s;
    margin: 0 auto;
    position: relative;
    /* overflow-x: scroll; */
    height: auto;
	    z-index: 9999;
}
@media screen and (max-width: 828px) {
nav.tab {
    width: 100%;
    margin: 0 auto 5vh;
    padding: 14vh 0 0 0;
}
.tabContainer {
    width: 100%;
    height: auto;
    margin: 0 auto;
	}
nav.tab a{  
    font-weight: bold;
    display: inline-block;
    width: 11%;
    height: 64px;
    float: left;
    line-height: 60px;
    color: #fff;
    font-size: 163%;
    text-align: center;
    text-decoration: none;
}	
.Tabcondent{
    overflow-x: scroll;
    height: 72vh;	
	}
}