/*(max-width:690px)*/

/*共通事項*/

body {
  line-height: 1.6;
  font-size: 14px;
}

.for_5s {
  display: none;
}

.for_medium {
  display: none;
}

.for_wide {
  display: none;
}

.for_small {
  display: block;
}

.header_top h1 a.for_small {
  display: block;
}

.inner {
  padding: 15% 7%;
}

.main_img {
  background-image: url('../img/main_img_sp.jpg');
  margin: 0 auto;
  max-width: 750px;
  width: 100%;
}

.main_img #logo img {
  max-width: 100%;
  width: 50vw;
  height: auto;
}

h2 {
  width: 50%;
}

/*main_img*/

.main_img .credit img {
  width: 100%;
  max-width: 500px;
}

.main_img .main_catch {
  margin-top: 8%;
}

.main_img .main_catch img {
  width: 80%;
}

.main_img h1 img {
  width: 90%;
  margin-top: 50px;
}

.main_img .credit img {
  width: 80%;
}

.bnr{
  display: flex;
  margin-top: 30%;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-left: 0;
}

/*
.four_walling_bnr img{
  max-width: 150px;
}*/


.shop_bnr{
  margin-top: 3%;
}


/*nav*/


.fixed_nav {
  height: 30px;
  line-height: 30px;
}

.zdo_drawer_menu .zdo_drawer_nav_wrapper{
  width:250px;
}

.zdo_drawer_menu .zdo_drawer_button{
  top:10px;
  right:15px;
}

.zdo_drawer_menu .zdo_drawer_nav {
  padding: 40px 24px;
}


/*sns*/
ul.sns_timeline {
  width: 100%;
  max-width: 300px;
}

/*sub_catch*/

.sub_catch.flex img {
width: 60%;
max-width: 489px;
}


/*story*/

#story .catch1 {
  margin-bottom: 15%;
}

#story .catch1 .flex img {
  max-width: 231px;
  width: 40%;
}

#story .catch2 .flex img {
  margin-bottom: 5%;
  max-width: 461px;
  width: 70%;
}

#story .catch1 p {
  margin-right: 0;
  margin-bottom: 5%;
  width: 100%;
}

#story .catch2 p {
  margin-left: 0;
  width: 100%;
}

/*director_comments*/

#director_comments h2 img{
  width: 100%;
}

#director_comments .flex{
justify-content: center;
}

#director_comments .photo{
  margin-right: 0;
  margin-bottom: 5%;
  width: 90%;
}

#director_comments .profile_text{
    width: 100%;
}

/*staff*/

#staff dt {
  float: none;
  margin: 0 auto;
  text-align: center;
}

#staff dd {
  margin-left: 0;
    margin: 0 auto;
      margin-bottom: 2%;
      text-align: center;
}


#staff dt.support {
  margin-top: 5%;
}

#staff dd.support{
  margin-bottom: 5%;
}

/*theater*/

#theater .polepole_talkinfo h3{
font-size: 120%;
}

#theater .polepole_talkinfo p.info1, #theater .polepole_talkinfo p.info2{
  font-size: 110%;
}

/*four_walling*/

#four_walling{
background: none;
}

#four_walling #fw_flow ul li{
  margin-bottom: 20%;
}

#four_walling #fw_flow ul li:before{
  content: "";
  display: block;
  position: absolute;
  border: 35px solid transparent; /* 三角形の元となる指定（一旦全て透過にする） */
  border-top-color: #c1e882; /* 作成したい三角形に合わせて１辺の色をつける */
  bottom: -80px;
  left: 50%; /* 中央寄せに使用 */
  margin-left: -35px; /* 中央寄せに使用*/
}

#fw_contact .flex{
  display: block;
}

#fw_contact .kirokubito_logo{
  margin-bottom: 10px;
}

/*onlineTheater*/

#onlineTheater .talk_ev dl.schedule>dt, #onlineTheater .talk_ev dl.venue>dt, #onlineTheater .talk_ev dl.price>dt{
  margin: 0 auto;
  margin-bottom: 5%;
}

#onlineTheater .talk_ev dl.schedule>dd, #onlineTheater .talk_ev dl.venue>dd, #onlineTheater .talk_ev dl.price>dd{
   width:100%;
}

#onlineTheater .procedure li.step1 img, #onlineTheater .procedure li.step2 img, #onlineTheater .procedure li.step3 img, #onlineTheater .procedure li.step4 img{
    width: 60px;
    margin: 0 auto;
}

#onlineTheater .procedure li.step1 p, #onlineTheater .procedure li.step2 p, #onlineTheater .procedure li.step3 p, #onlineTheater .procedure li.step4 p{
    width: 100%;
}