@charset "utf-8";
/*－－－－－－－－－－共通－－－－－－－－－－*/
  
* {
    margin: 0px;
    padding: 0;
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1em;
    line-height: 1.7;
    margin: 0px;
    padding: 0px;
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
p, li, dl {
    line-height: 1.6;
}
p {
    margin: 0.5em 0;
}
li {
    list-style-type: none;
}
img {
    border: 0;
}
/* pc */
@media screen and (min-width: 721px) {
/*ここにpc用スタイルを記述*/
    .f12 {
    font-size: 12px;
}
.f18 {
    font-size: 18px;
}
.f20 {
    font-size: 20px;
}
.f22 {
    font-size: 22px;
}
.f24 {
    font-size: 24px;
}
.f26 {
    font-size: 26px;
}
.f30 {
    font-size: 30px;
}
.f36 {
    font-size: 36px;
}
.sT20 {
   margin-top: 20px;
}
.sT40 {
   margin-top: 40px;
}
.f_brush{
    font-family: "ro-brush-std",sans-serif;
    font-weight: 500;
}
.f_seurat {
 font-family: "fot-seurat-pron",sans-serif;
    font-weight: 500;
}

.theatreLp {
    min-width: 800px;
    background-color: #F1F1F1;
    margin:0px -15px;
    padding-top: 0px;
    overflow: hidden;
    font-size: 18px;
    }
    .wrap {
    max-width: 1280px;
        margin: 0px auto;
        
       }
        .theatreLp span {
    font-size: 120%;
    color: #300304;
    font-weight: 600;
    }
     .theatreLp strong {
    font-size: 100%;
         font-weight: 600;
    
        }
    .theatreLp_title {
        background-color: #FAE000;
    width: 100%;
        margin: 0px 0px 40px;
    }
	.theatreLp_title img {
         width: 80%;
        margin: 0px auto;
        display: block;
            }
     .theatreLp_p {
          width: 56%;
        margin: 56px auto;
    }
     .theatreLp_p h3 {
        font-size:22px;
         color: #300304;
        margin: 32px auto 0px;
    }
      .theatreLp h4 {
        font-size:32px;
         color: #300304;
        margin: 80px auto 0px;
          text-align: center;
          display: block;
              }

     .theatreLp_p li a, .theatreLp a {
	color: #300304;
	text-decoration: underline;
	margin: 8px 0px;
     }
    .theatreLp_p li a:hover {
        color: #7C7C7C;
     }
     #n01, #n02, #n03, #n04, #n05, #n06, #n07, #n08 {
      margin-top: -170px;
         padding-top: 170px;
     }
       .theatreLp dl {
	margin:24px auto ;
	width: 96%;
         display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
        overflow: hidden;
        }
        .theatreLp dt {
		width: 100px;
            display: block;
            text-align: right;
            line-height: 160%;
        }
       .theatreLp dd {
           width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 100px) ;
		width: calc(100% - 100px);
           display: block;
           line-height: 160%;
           margin-bottom: 24px;
        }
.wrap_boxT{
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
 -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
    margin: 120px auto;
    width: 76%;
  margin-left: 0vw;
      max-width: 1080px;
}
   
.wrap_boxK {
     display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
   -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
    margin: 120px auto;
    width: 76%;
         max-width: 1080px;
    -webkit-flex-direction: row-reverse; /* Safari */
    flex-direction: row-reverse;
    margin-right: 0vw;
       }
    .contentsBox {
    position: relative;
    padding: 16px 32px 16px;
    border: 2px solid #300304;
    border-radius: 32px;
       width: 68%;
    background-color: #FFFFFF;
    text-align: justify;
 
    }
        .contentsBox:hover {
       -webkit-box-shadow: 8px 8px 24px #C4C4C4;
    box-shadow: 8px 8px 24px #C4C4C4;
    }
     .contentsBox:hover span,  .contentsBox2:hover span {
   color: #FF6600;
    }
  .contentsBox::before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #300304;
 position: absolute;
 left: -21px;
 top: 36px;
 margin-top: -8px;
}
.contentsBox::after {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #FFFFFF;
 position: absolute;
 left: -18px;
 top: 36px;
 margin-top: -8px;
}
    .contentsBox2 {
    position: relative;
    padding: 16px 32px 16px;
    border: 2px solid #300304;
    border-radius: 32px;
       width: 68%;
    
    background-color: rgba(255,249,201,0.3);
}
      .contentsBox2:hover  {
       -webkit-box-shadow: 8px 8px 24px #C4C4C4;
    box-shadow: 8px 8px 24px #C4C4C4;
    }
        .contentsBox2:hover a  {
     color: #00AFDC;
            font-weight: 600;
    }
  .contentsBox2::before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #300304;
 position: absolute;
 right: -21px;
 top: 36px;
 margin-top: -8px;
}
.contentsBox2::after {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #F3F2E2;
 position: absolute;
 right: -18px;
 top: 36px;
 margin-top: -8px;
}
    .imgBox {
    width: 20%;
    margin: -18px auto;
    text-align: center;
   
}
	.imgBox img {
    width: 100%;
 
}
       .contentsBox_in {
    margin: 16px auto;
    padding: 8px 0px;
         border-top: 1px dotted #300304;
           font-size: 95%;
           color:  rgba(48,3,4,0.86);
    }
      .contentsBox2 a {
    color: #300304;
  
    }
  
     .contentsBox2 li {
    font-size: 16px;
    color: #300304;
        margin: 16px 0px 24px 40px;
    list-style-position: outside;
    list-style-type: decimal;
    padding-left: 8px;       
    }
        .contentsBox p, .contentsBox2 p {
    line-height: 2em;   
        color: #300304;
        }
    .cv_btn {
	margin:40px auto 160px;
	text-align: center;
	color: #300304;
	font-size: 26px;
	border-radius: 16px;
	font-family: "filson-soft";
	letter-spacing: 0.1em;
	background-color: #FAE000;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	width: 520px;
        display: block;

    }
	.cv_btn a {
	text-decoration: none;
	color: #444;
	padding: 16px 32px 16px;
		border-radius: 16px;        
        display: block;

}
		.cv_btn a:hover {
	text-decoration: none;
	color: #777;
		background-color: #FFEF6C;
	padding: 16px 32px 16px;
        display: block;
            
}
        .cv_btn_in {
	margin:40px auto 0px;
	text-align: center;
	color: #300304;
	font-size: 18px;
	border-radius: 16px;
	font-family: "filson-soft";
	letter-spacing: 0.1em;
	background-color: #FAE000;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	width: 90%;
        display: block;

    }
	.cv_btn_in a {
	text-decoration: none;
	color: #444;
	padding: 16px 32px 16px;
		border-radius: 16px;        
        display: block;

}
		.cv_btn_in a:hover {
	text-decoration: none;
	color: #777;
		background-color: #FFEF6C;
	padding: 16px 32px 16px;
        display: block;
            
    }
   .theatreLp_img img {
	margin:40px auto 80px;
	text-align: center;
	width: 60%;
	display:block;
	}
  
}

/* pc */
 
 
 
 

 
  
 
/* smartPhone */
@media screen and (max-width: 	720px) {
/*ここにスマホ用スタイルを記述*/
.f12 {
    font-size: 12px;
}
.f18 {
    font-size: 14px;
}
.f20 {
    font-size: 15px;
}
.f22 {
    font-size: 16px;
}
.f24 {
    font-size: 17px;
}
.f26 {
    font-size: 18px;
}
.f30 {
    font-size: 19px;
}
.f36 {
    font-size: 20px;
}
.sT20 {
   margin-top: 20px;
}
.sT40 {
   margin-top: 40px;
}
.f_brush{
    font-family: "ro-brush-std",sans-serif;
    font-weight: 500;
}
.f_seurat {
 font-family: "fot-seurat-pron",sans-serif;
    font-weight: 500;
}

.theatreLp {
   min-width:320px;
    background-color: #F1F1F1;
    margin:0 -15px;
    /* padding-top: 10px; */
    overflow: hidden;
    font-size: 14px;
    }
    .wrap {
  
       }
        .theatreLp span {
    font-size: 120%;
    color: #300304;
    font-weight: 600;
    }
     .theatreLp strong {
    font-size: 100%;
         font-weight: 600;
    
        }
    .theatreLp_title {
        background-color: #FAE000;
    width: 100%;
        margin: 0px 0px 40px;
    }
	.theatreLp_title img {
         width: 80%;
        margin: 0px auto;
        display: block;
            }
     .theatreLp_p {
          width: 80%;
        margin: 56px auto;
    }
     .theatreLp_p h3 {
        font-size:18px;
         color: #300304;
        margin: 32px auto 0px;
    }
      .theatreLp h4 {
        font-size:18px;
         color: #300304;
        margin: 80px auto 0px;
          text-align: center;
          display: block;
              }

     .theatreLp_p li a, .theatreLp a {
        color: #300304;
		 text-decoration: underline;
	margin: 8px 0px;
     }
    .theatreLp_p li a:hover {
        color: #7C7C7C;
     }
     #n01, #n02, #n03, #n04, #n05, #n06, #n07, #n08 {
      margin-top: -170px;
         padding-top: 170px;
     }
       .theatreLp dl {
	margin:24px auto ;
	width: 96%;
         display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
        overflow: hidden;
        }
        .theatreLp dt {
		width: 56px;
            display: block;
            text-align: right;
            line-height: 160%;
        }
       .theatreLp dd {
           width : 70% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 56px) ;
		width: calc(100% - 56px);
           display: block;
           line-height: 160%;
           margin-bottom: 24px;
        }
.wrap_boxT{
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
 -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
    margin: 60px auto;
    width: 100%;
  margin-left: 0vw;
 
}
   
.wrap_boxK {
     display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
   -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
    margin: 60px auto;
    width: 100%;
       
    -webkit-flex-direction: row-reverse; /* Safari */
    flex-direction: row-reverse;
    margin-right: 0vw;
       }
    .contentsBox {
     position: relative;
    padding: 16px 16px 16px;
    border: 2px solid #300304;
    border-radius: 32px;
    width: 70%;
    background-color: #FFFFFF;
    text-align: justify;
    margin-right: 4%;
 
    }
        .contentsBox:hover {
       -webkit-box-shadow: 8px 8px 24px #C4C4C4;
    box-shadow: 8px 8px 24px #C4C4C4;
    }
     .contentsBox:hover span,  .contentsBox2:hover span {
   color: #FF6600;
    }
  .contentsBox::before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #300304;
 position: absolute;
 left: -21px;
 top: 36px;
 margin-top: -8px;
}
.contentsBox::after {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #FFFFFF;
 position: absolute;
 left: -18px;
 top: 36px;
 margin-top: -8px;
}
    .contentsBox2 {
       position: relative;
    padding: 16px 16px 16px;
    border: 2px solid #300304;
    border-radius: 32px;
    width: 70%;
    background-color: rgba(255,249,201,0.3);
    margin-left: 4%;
}
      .contentsBox2:hover  {
       -webkit-box-shadow: 8px 8px 24px #C4C4C4;
    box-shadow: 8px 8px 24px #C4C4C4;
    }
        .contentsBox2:hover a  {
     color: #00AFDC;
            font-weight: 600;
    }
  .contentsBox2::before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #300304;
 position: absolute;
 right: -21px;
 top: 36px;
 margin-top: -8px;
}
.contentsBox2::after {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #F3F2E2;
 position: absolute;
 right: -18px;
 top: 36px;
 margin-top: -8px;
}
    .imgBox {
    width: 20%;
    margin: 0px auto;
    text-align: center;
   
}
	.imgBox img {
    width: 100%;
}
       .contentsBox_in {
    margin: 16px auto;
    padding: 8px 0px;
         border-top: 1px dotted #300304;
           font-size: 95%;
           color:  rgba(48,3,4,0.86);
    }
      .contentsBox2 a {
    color: #300304;
  
    }
  
     .contentsBox2 li {
    font-size: 16px;
    color: #300304;
        margin: 16px 0px 24px 16px;
    list-style-position: outside;
    list-style-type: decimal;
    padding-left: 8px;       
    }
        .contentsBox p, .contentsBox2 p {
    line-height: 1.8em;   
        color: #300304;
        }
    .cv_btn {
	margin:40px auto 120px;
	text-align: center;
	color: #300304;
	font-size: 18px;
	border-radius: 16px;
	font-family: "filson-soft";
	letter-spacing: 0.1em;
	background-color: #FAE000;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	width: 84%;
        display: block;

    }
	.cv_btn a {
	text-decoration: none;
	color: #444;
	padding: 16px 8px 16px;
		border-radius: 16px;        
        display: block;

}
		.cv_btn a:hover {
	text-decoration: none;
	color: #777;
		background-color: #FFEF6C;
	padding: 16px 8px 16px;
        display: block;
            
}
       .cv_btn_in {
	margin:40px auto 0px;
	text-align: center;
	color: #300304;
	font-size: 14px;
	border-radius: 16px;
	font-family: "filson-soft";
	letter-spacing: 0.1em;
	background-color: #FAE000;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	width: 90%;
        display: block;

    }
	.cv_btn_in a {
	text-decoration: none;
	color: #444;
	padding: 16px 32px 16px;
		border-radius: 16px;        
        display: block;

}
		.cv_btn_in a:hover {
	text-decoration: none;
	color: #777;
		background-color: #FFEF6C;
	padding: 16px 32px 16px;
        display: block;
            
    }
    .theatreLp_img img {
	margin:40px auto 80px;
	text-align: center;
	width: 100%;
        }
    #page-top {
    position: fixed;
    right: 0px;
}
#page-top img {
    width: 40px;
    height:auto;
}

}
/* smartPhone */