@charset "UTF-8";
/*--common--------------------------------------------------*/
*{
	box-sizing: border-box;
}
img{
	max-width: 100%;
}
html{
	font-family: 'Shippori Mincho B1', serif;
	font-size: 14px;
	max-width: 1480px;
	width:  100%;
	margin: 0 auto;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
@media (max-width:767px) {
.medi{
	display: none;
}
}

.space-30px{
	padding: 30px;
}
/*----------------------------------------------------------*/
header{
	background-color: #9786d9;
	height: 180px;
	text-align: center;
	font-family: 'Kaisei Decol', serif;
}

header p{
	line-height: 3.0;
}

h1{
	font-size: 2.5rem;
	line-height: 1.5;
	padding-top: 30px;
}
iframe{
	display: block;
	margin: 0px auto;
}
.video{
	background-color: #ca86d9;
	width: 100%;
    background: linear-gradient(to bottom, #ca86d9 0%, #f5dcd7 100%);
}
@media (max-width:560px) {
iframe{
	width: 100%;
}
}

.what{
	background: linear-gradient(to bottom, #f4dcd7 0%, #fff 100%);
	background-color: #f4dcd7;
	height: calc(120%);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding-left: 10%;
	padding-right:10%;
	flex-wrap: wrap;
}
h2{
	font-size: 2rem;
	padding-top: 50px;
	margin-bottom: 20px;
	font-family: 'Kaisei Decol', serif;
}

.merit-wrapper {  
  display: block;
  position: relative;
  margin: 20px auto;
  padding: 10px 0;
  width: 300px;

}
.merit {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 0 -30px -20px;
  width: calc(100% + 20px);
  background: #dfadd8;
  font-size: 1.4rem;
  text-align: center;
  z-index: 10;
}
.merit:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #b58aaf;
}

.maru{
	display: block;
	font-size: 1.2rem;
	color: #fff;
	width: 175px;
	height: 175px;
	border-radius: 175px;
	text-align :center;
	vertical-align:middle;
	line-height: 1.5;
	padding:50px 10px;
	background: linear-gradient(150deg, #f4ac41, #ad662b, #f4ac41);
	position: relative;
	letter-spacing: 0.01em;
	font-family: Zen Maru Gothic;
}
.maru:nth-child(2){
padding-top: 40px;
}
.square_left{
	max-width: 550px;
}
.flex_box1{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
section img{
	max-height: 280px;
	padding-top: 50px;
}

.line01{
	border-bottom: 1px solid #5bcdaa;
	margin-top: 5px;
}
@media (max-width:1100px) {
.flex_box1{
	display: block;
}
}
@media (max-width:1100px) {
.maru{
	display: block;
	font-size: 1.5rem;
	color: #fff;
	width: 300px;
	height: 300px;
	border-radius: 300px;
	text-align :center;
	vertical-align:middle;
	line-height: 1.5;
	padding:125px 10px;
	background: linear-gradient(150deg, #f4ac41, #ad662b, #f4ac41);
	position: relative;
	letter-spacing: 0.01em;
	font-family: Zen Maru Gothic;
}
.maru:nth-child(2){
padding-top: 100px;
}
}

@media (max-width:767px){
	.maru{
	display: block;
	font-size: 1.2rem;
	color: #fff;
	width: 175px;
	height: 175px;
	border-radius: 175px;
	text-align :center;
	vertical-align:middle;
	line-height: 1.5;
	padding:50px 10px;
	background: linear-gradient(150deg, #f4ac41, #ad662b, #f4ac41);
	position: relative;
	letter-spacing: 0.01em;
	font-family: Zen Maru Gothic;
}
.maru:nth-child(2){
padding-top: 40px;
}
}


/*-----------------------------------------------------------*/
h3{
	font-size: 2.0rem;
	padding-top: 50px;
	font-family: 'Kaisei Decol', serif;
}
.story{
	background: url(../images/hoshiyomitheatre.jpg) no-repeat right;
	background-size: cover;
	width: 100%;
	height: auto;
	color: #f8f7e1;
	line-height: 1.8;
	padding-left: 10%;
}
.wide{
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	line-height: 1.5;
	padding-top:30px;
	/*font-family: 'Kaisei Decol', serif;*/
}
.door img{
	width: 150px;
}

.door{
	display: flex;
	align-items: center;	
	font-size: 1.3rem;
	color: #5bcdaa;

}
.door a:hover, .door a:visited{
	text-decoration: none;
   color: #5bcdaa;
}

.face{
	width:150px;
	border-radius: 50px;
	margin-left: 10%;
	padding-bottom:20px;
	margin-top: 30px;
}
.fukidashi{
	position: relative;
	display: inline-block;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 20px;
    border: 3px solid #333;
    font-size: 1.5rem;
    margin-left: 10%;
}

.fukidashi:before {
    content: "";
  position: absolute;
  top: -24px;
  left: 10%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.fukidashi:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 10%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #555;
  z-index: 1;
}

.flex_box2{
	display: flex;
	flex-direction: row;
	/*justify-content: space-between;*/
	margin-top: 30px;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-around;
}
.intro{
	max-width:220px;
	margin-left: 30px;
	margin-right: 30px;
	line-height: 1.5;
}
.photo{
	width:50px;
	border-radius: 30px;
	margin: 10px 20px;
}
.name{
	font-size: 2rem;
	text-align: center;
	line-height: 2;
	font-family: 'Kaisei Decol', serif;
}
.chara{
	max-width:200px;
	margin: 10px 10px;
}
.indent{
	padding-left:1em;
	text-indent:-1em;
	font-size: 1rem;
}
.line02{
	/*background:linear-gradient(transparent 50%, #9786d9 80%);*/
	background:linear-gradient(transparent 50%, #5bcdaa 80%);
}

.cast{
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 1rem;
}
.content-wid{
 margin-left: 150px;
 margin-right:150px;
}
.space2{
	padding-bottom: 50px;
}
.line{
	border-bottom: 2px dashed #ccb8a3;
}
.flex_box1{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.insert{
	max-width:260px;
}

footer{
	display: block;
	background-color: #e7ded4;
	height: 120px;
}
@media (max-width:1100px) {
.intro{
	margin: 5px auto;
}
.flex_box1{
    flex-direction: column-reverse;
  }
}
/*--fixed-button------------------------------------------------------------------------*/
.bg{
	position: relative;
	display: inline-block;
	width: 60%;
	max-width:200px;
	height: 80px;
	border-radius: 100px;
	padding: 16px 0;
}
.button p{
	position: absolute;
	font-size: 1.2rem;
	line-height: 1.2;
	color: #5bcdaa;
	text-align: center;
	width: 200px;
	padding:60px 10px 20px 10px;
	z-index: 2;
	font-family: 'Kaisei Decol', serif;
}
.button .bg{
	position: fixed;
	bottom: 100px;
	right: 20px;
}
/*------------------------------------------*/
.bg00{
	position: relative;
	display: inline-block;
	width: 60%;
	max-width: 120px;
	height: 80px;
	border-radius: 100px;
	background-color: #5bcdaa;
	padding: 16px 0;
}
.button00 p{
	position: absolute;
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
	text-align: center;
	width: 120px;
	padding:5px 10px;
}
.button00 .bg00{
	position: fixed;
	bottom: 40px;
	right: 20px;
}
/*-------------------------------------------*/
@media (min-width:500px){
	.button00{
		display: none;
	}
}
@media (max-width:500px) {
 .button{
 	display: none;
 }
}