@charset "UTF-8";
/* CSS Document */

@font-face {
font-family:"Didot";
src: url(fonts/Didot.ttf) format(”truetype”);
}

.font-title{
font-size:30px;
font-weight:bold;
font-family: "Didot", serif;
}

.font-title-big{
font-size:19px;
font-weight:;
}

.font-title-small{
font-size:14px;
font-weight:bold;
padding-bottom:1px;
}

.font-link{
font-size:16px;
font-weight:bold;
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.font-title-main{
font-family: "Didot", serif;
	font-size: 35px;
	letter-spacing: 0.05em;
padding-bottom:18px;
padding-top:10px;
}

.font-top-name{
font-family: "Didot", serif;
	font-size: 20px;
	letter-spacing: 0.02em;
}


a:link { color: #af3328; }
a:visited { color: #af3328; }


.seotext_01 {
border-bottom:dotted;/*下線を点線にする*/
border-color:#FF0000;
border-width:1px;
}

a.no-color-change {
  color: #F7FFC1;
}

a.takanawa {
  color: #F19600;
}


#page-top{
position: fixed;
bottom: 20px;
margin-left: 92%;
font-size: 1.6rem;
}

#page-top a{
text-decoration: none;
color: #aaa;
}

#page-top a:hover{
text-decoration: none;
color: #908373;
}


#page-top-xs{
position: fixed;
bottom: 20px;
margin-left: 80%;
font-size: 1.6rem;
}

#page-top-xs a{
text-decoration: none;
color: #aaa;
}

#page-top-xs a:hover{
text-decoration: none;
color: #908373;
}

.back01 {
background-image: url("img/img-back-01big.png");
background-repeat: no-repeat;
background-position: 54px -2px; 
background-size:39px;
}


.slope:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
margin: 3% -10% 0;
background: #222;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
z-index: -1;
}

.slope {
position: relative;
overflow: hidden;
margin: 0% 0;
padding: 0px 0;
}

.slope_inner {
box-sizing: boder-box;
width: 100%;
max-width: 740px;
height: 100%;
margin: 0 auto;
padding: 100px 10px 0px;
}

.mintyo {
font-family:
"ヒラギノ明朝 ProN W6",
"HiraMinProN-W6",
"HG明朝E",
"ＭＳ Ｐ明朝",
"MS PMincho",
"MS 明朝",
serif;
font-weight: bold;
line-height:1.5;
}

.naname01 {
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}

.naname02 {
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}


/* 追加 */

body {
  line-height: 2;
  letter-spacing: 1.5px;
font-family: "Didot", serif;
	font-family: "Crimson Text", serif;
	font-family: "Noto Serif JP", serif;
	font-family: "Noto Sans JP", sans-serif;
	font-feature-settings: "palt";
}

.title-text {
  color: #ddd;
  text-shadow: 1px 1px 0 #EB8A42,
               -1px 1px 0 #EB8A42,
               1px -1px 0 #EB8A42,
               -1px -1px 0 #EB8A42;
	letter-spacing: 3px;
	font-size:2em;
}


.title-text-02 {
  color: #efefef;
  text-shadow: 1px 1px 0 #EB8A42,
               -1px 1px 0 #EB8A42,
               1px -1px 0 #EB8A42,
               -1px -1px 0 #EB8A42;
	letter-spacing: 3px;
	font-size:1.5em;
}


.naname01 {
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}

.naname02 {
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}

	
.title-text-top {

}

.text-small{
	font-size:small;
}

.text-large{
	font-size:120%;
}

.text-large-story{
	font-size:4em;
}


/* 動画はめ込み設定 */

p.resizeimage img { width: 100%; }

.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.vimeo-size { max-width: 90%; text-align:center; }


/* artist css */

	.artist-text-name{
		font-size:large;
		font-weight: bold;
	}
	.artist-text-bold{
		font-weight: bold;
	}
	.artist-text{
		font-size: 90%;
	}


/* access css */
#containered{display:none;}
#loading{
	position:absolute;
	left:50%;
	top:20%;
	margin-left:-30px;
}


/* menue css */
.navbar-default {
background-color: #fff;
border-color: #eee;
}


/* program css */


	
/* MIT https://github.com/NigelOToole/angled-edges */
.angle--both-right-right {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% calc(0% + 2vw), 100% calc(100% - 2vw), 0 100%);
          clip-path: polygon(0 0, 100% calc(0% + 2vw), 100% calc(100% - 2vw), 0 100%);
}

@supports not ((-webkit-clip-path: polygon(0 0, 100% calc(0% + 2vw), 100% calc(100% - 2vw), 0 100%)) or (clip-path: polygon(0 0, 100% calc(0% + 2vw), 100% calc(100% - 2vw), 0 100%))) {
  .angle--both-right-right::before, .angle--both-right-right::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
  .angle--both-right-right::before {
    top: 0;
    border-width: 8vw 0 0 100vw;
    border-color: #fff transparent transparent transparent;
  }
  .angle--both-right-right::after {
    bottom: 0;
    border-width: 0 0 8vw 100vw;
    border-color: transparent transparent #fff transparent;
  }
}


.angle--top-right {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% 100%, 0 100%);
}

@supports not ((-webkit-clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% 100%, 0 100%)) or (clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% 100%, 0 100%))) {
  .angle--top-right::before, .angle--top-right::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
  .angle--top-right::before {
    top: 0;
    border-width: 8vw 0 0 100vw;
    border-color: #fff transparent transparent transparent;
  }
}


.angle--top-left {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 calc(0% + 3vw), 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 calc(0% + 3vw), 100% 0, 100% 100%, 0 100%);
}

@supports not ((-webkit-clip-path: polygon(0 calc(0% + 3vw), 100% 0, 100% 100%, 0 100%)) or (clip-path: polygon(0 calc(0% + 3vw), 100% 0, 100% 100%, 0 100%))) {
  .angle--top-left::before, .angle--top-left::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
  .angle--top-left::before {
    top: 0;
    border-width: 8vw 100vw 0 0;
    border-color: #fff transparent transparent transparent;
  }
}	


.angle--bottom-left {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
}

@supports not ((-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw))) or (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw)))) {
  .angle--bottom-left::before, .angle--bottom-left::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 10;
    display: block;
    border-style: solid;
  }
  .angle--bottom-left::after {
    bottom: 0;
    border-width: 0 100vw 8vw 0;
    border-color: transparent transparent #fff transparent;
  }
}	

/* 背景色 */
.angle--colour {
  color: #fff;
  background-color: #191919;
  padding: 6% 0;
}	

.angle--colour-pink {
  color: #fff;
  background-color: #E15473;
  padding: 6% 0;
}

.angle--colour-pink2021 {
  color: #fff;
  background-color: #B86EA9;
  padding: 6% 0;
}
	
.angle--colour-green {
  color: #fff;
  background-color: #11AE92;
  padding: 6% 0;
}

.angle--colour-green2021 {
  color: #fff;
  background-color: #EA6052;
  padding: 6% 0;
}
	
.angle--colour-orange {
  color: #fff;
  background-color: #EB8A42;
  padding: 6% 0;
}

.angle--colour-orange2021 {
  color: #fff;
  background-color: #44BCCE;
  padding: 6% 0;
}


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


.btn-flat-logo {
  position: relative;
  display: inline-block;
  font-weight: ;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #fff;
  background: #111;
  transition: .4s;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  width:140px;
}

.btn-flat-logo:hover {
  background:#454545;
}

/* フェードインコンテンツ */
.inviewfadeIn {
opacity: 0;
transition: .8s;
}

.fadeIn {
opacity: 1.0;
}

.inviewUp {
transform: translate(0, 40px);
-webkit-transform: translate(0, 40px);
transition: 1s;
}

.Up {
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}

.inviewfadeInUp {
opacity: 0;
transform: translate(0, 20px);
-webkit-transform: translate(0, 20px);
transition: 1s;
}

.fadeInUp {
opacity: 1.0;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}

.inviewzoomIn {
transform: scale(0, 0);
-webkit-transform: scale(0, 0);
transition: 1s;
}

.zoomIn {
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}