*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  overflow-x: hidden !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}


 
body {
    overflow-x: hidden !important;
    font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
      
  }
 /*
body {
    overflow-x: hidden !important;
    font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
  }

*/



   
  h1 {
      font-size : 48px; 
      line-height : 1;    
      /* 要素の高さ：48px（要素を配置するときの高さの基準の2倍）*/
  }
   
  h2 {
      font-size : 36px;
      line-height : 1.3333;
      font-weight: 600; 
      /* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
  }

  h3 {
      font-size : 30px;
      line-height : 1.3333;    
      font-weight: 600; 
  } 

  .sec_subtit {
    font-size : 28px;
    line-height : 1.3333;    
    font-weight: 600; 
}
.sec_tit img{
  padding: 0 0 30px 0;
}
  hgroup h2,h4,h5,h6 {
      font-size : 16px; 
      line-height : 1.5;   
      /* 要素の高さ：24px（要素を配置するときの高さの基準） */
  }

  p{
    font-size: 1.8rem;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    text-align: center;
   } 
  
   .wf-hannari { font-family:"游明朝", YuMincho; }

   @media screen and (max-width:480px) {
    h1 {
      font-size : 36px; 
      line-height : 1;    
      /* 要素の高さ：48px（要素を配置するときの高さの基準の2倍）*/
  }
   
  h2 {
      font-size : 26px;
      line-height : 1.3333;   
      /* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
  }

  h3 {
      font-size : 24px;
      line-height : 1.5;    
    
  } 
    p{
      font-size: 1.5rem;
      line-height: 2.5rem;
      margin: 0;
      padding: 0 20px;
     text-align: left;
     } 
   } 


a:link {
    color: #333;
    text-decoration: none;
}


a:visited {
    color: #333;
    text-decoration: none;
}


a:hover {
    color: #bb9ba9;
    text-decoration: none;
}

a img {
    border-width: 0px;
    border-style: none;
    border-color: #fff;
    background: transparent;
}






th{
  font-size: 1.5rem;

}

#content{
  display: block;
  position: relative;
  margin: 0 0 0 0;
  width: 100%;
}

section{
  display: inline-block;
  width: 100%;
  margin:0 auto;
}
.tit_area {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0 30px 0;
}

.sec_tit {
  width: 100%;
  line-height : 1.3333;
  letter-spacing: 1px;
  margin:30px auto 30px;
  text-align: center;
}

@media screen and (max-width:480px) {
  .tit_area {
    padding: 40px 0 20px 0;
  }
}


.c-marker {
  background: -webkit-linear-gradient(left, #ffc1fd 50%, transparent 50%);
  background: -moz-linear-gradient(left, #ffc1fd 50%, transparent 50%);
  background: linear-gradient(left, #ffc1fd 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% .8em; 
  background-position: 100% .5em;
  transition: 2s;
}
.c-marker.is-active{
  background-position: 0% .5em;
}




.marker {
  background: linear-gradient(transparent 0%, #ffc1fd 0%);
 font-weight: bold;
 }


 span.stk { text-decoration:line-through; }

/*///共通*/
#content_top{
  margin-top:200px;
}

@media screen and (max-width: 780px) {
#content_top{
  margin-top:150px;
}
}

.bg_group{
  width: 100%;
  background: url(../../img/bg_group.png) no-repeat;
  background-size:contain;
  background-position:center;
  padding:0 0 30px 0;
}

.group_img img{
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width:480px) {
.bg_group{
  width: 100%;
  background: url(../../img/bg_group.png) no-repeat;
  background-size:contain;
  background-position:top;
}
}


/* tokuten_area */

#what {
  padding-top:130px;
  margin-top:-130px;
}

#what .tokuten_area{
  width: 100%;
  margin:0 auto;
  padding:30px 0;
  background-image: linear-gradient(180deg, #ffffff 0%, #e2d1f7 60%, #f8bcd7 100%);
}

#what .tokuten_area .sec_tit{
    text-align: center;
}


#what .tokuten_area .flex-container {
	display: flex;
	flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;

}

#what .tokuten_area .flex-item {
  width: 22%;
	margin: 10px auto;
	padding: 15px 15px;
	box-sizing: border-box;
	color: #fff;
  text-align: center;
  border-radius: 5px;
}

#what .tokuten_area .item_txt{
  font-size: 1.5rem;
  color: #ffffff;
  line-height: 2.3rem;
  letter-spacing: 1px;
  margin: 0;
  padding:15px;
  align-items: center;
  justify-content: center;
  text-align: left;
}




#what .tokuten_area .bg_black{
  height:100%;
  background: rgba(0, 0, 0, 0.4);

}

#what .tokuten_area .flex-item img{
 width:60px;
 margin:10px 0 20px;


}

#what .tokuten_area .img_01{
 background: url(../../img/tokuten_01.jpg) no-repeat center center;
	background-size: cover;
}

#what .tokuten_area .img_02{
  background: url(../../img/tokuten_02.jpg) no-repeat center center;
	background-size: cover;
}

#what .tokuten_area .img_03{
  background: url(../../img/tokuten_03.jpg) no-repeat center center;
	background-size: cover;
}

#what .img_04{
  background: url(../../img/tokuten_04.jpg) no-repeat center center;
	background-size: cover;
}

@media screen and (max-width:780px) {
  #what .tokuten_area .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  
  }  
  
  #what .tokuten_area .flex-item {
    width: 45%;
    margin: 10px auto;
    padding: 15px 15px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    border-radius: 5px;
  }
  }

@media screen and (max-width:480px) {

  #what .tokuten_area .flex-item {
  width: 95%;
	margin: 10px auto;
	padding: 10px 10px;
	box-sizing: border-box;
	color: #fff;
  text-align: center;
  border-radius: 5px;
}
#what .tokuten_area .item_txt{
  font-size: 1.5rem;
  color: #ffffff;
  line-height: 2.3rem;
  letter-spacing: 1px;
  margin: 0;
  padding:15px;
  align-items: center;
  justify-content: center;
  text-align: left;
}

}
/* ////tokuten_area */

/* Media Queries */
/* Card sizing */
/* Colors */
/* Calculations */
/* Placeholders */

#history {
  padding-top:100px;
  margin-top:-100px;
}

@media (min-width: 1000px) {
  #timeline .demo-card:nth-child(even) .head::after, #timeline .demo-card:nth-child(odd) .head::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }

  #timeline .demo-card:nth-child(even) .head::before, #timeline .demo-card:nth-child(odd) .head::before {
    position: absolute;
    content: "";
margin-top:120px;
    width: 9px;
    height: 9px;
    background-color: #f2dfff;
    border-radius: 9px;
    box-shadow: 0px 0px 2px 8px #caabdb;
  }
}
/* Some Cool Stuff */
.demo-card:nth-child(1) {
  order: 1;
}

.demo-card:nth-child(2) {
  order: 4;
}

.demo-card:nth-child(3) {
  order: 2;
}

.demo-card:nth-child(4) {
  order: 5;
}

.demo-card:nth-child(5) {
  order: 3;
}

.demo-card:nth-child(6) {
  order: 6;
}

/* Border Box */
* {
  box-sizing: border-box;
}

#timeline {
  background: none;
 /* border-top: 1px solid rgb(153, 21, 21);
  border-bottom: 1px solid rgba(191, 191, 191, 0.4);*/
  background: rgba(89, 97, 249, 0.1);
  padding:50px 0 30px 0;
}
#timeline h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: 200;
  margin-bottom: 20px;
}
#timeline p.leader {
  text-align: center;
  max-width: 90%;
  margin: auto;
  margin-bottom: 45px;
}
#timeline .demo-card-wrapper {
  position: relative;
  margin: auto;
}
@media (min-width: 1000px) {
  #timeline .demo-card-wrapper {
    display: flex;
    flex-flow: column wrap;
    width: 1170px;
    height: 1400px;
    margin: 0 auto;
  }
}
#timeline .demo-card-wrapper::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px solid #a974cf;
  
}
@media (min-width: 1000px) {
  #timeline .demo-card-wrapper::after {
    border-left: 2px solid #a974cf;
  }
}
#timeline .demo-card {
  position: relative;
  display: block;
  padding: 0 0 30px 0;
  margin: 10px auto 40px;
  max-width: 94%;
  z-index: 2;
}
@media (min-width: 480px) {
  #timeline .demo-card {
    max-width: 95%;
  }
  
  #timeline .demo-card .head h2 {
      text-transform: uppercase;
      font-size: 1.3rem;
      font-weight: inherit;
      letter-spacing: 2px;
      margin: 15px;
    
    }
}
@media (min-width: 720px) {
  #timeline .demo-card {
    max-width: 60%;
  }
}
@media (min-width: 1000px) {
  #timeline .demo-card {
    max-width: 450px;
    /*height: 400px;*/
    margin: 90px;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  #timeline .demo-card:nth-child(odd) {
    margin-right: 45px;
  }
  #timeline .demo-card:nth-child(odd) .head::after {
    border-left-width: 15px;
    border-left-style: solid;
    left: 100%;
  }
  #timeline .demo-card:nth-child(odd) .head::before {
    left: 491.5px;
  }
  #timeline .demo-card:nth-child(even) {
    margin-left: 45px;
  }
  #timeline .demo-card:nth-child(even) .head::after {
    border-right-width: 15px;
    border-right-style: solid;
    right: 100%;
  }
  #timeline .demo-card:nth-child(even) .head::before {
    right: 489.5px;
  }
  #timeline .demo-card:nth-child(2) {
    margin-top: 230px;
  }
}
#timeline .demo-card .head {
  position: relative;
  align-items: center;
  color: #8c50a6;
  font-weight: 400;

}
#timeline .demo-card .head .number-box {
  padding:30px 0 0 0;
  margin: 0 15px 15px 30px;
  font-size: 2.5rem;
  font-weight: 600;
}
#timeline .demo-card .head h2 {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: inherit;
  letter-spacing: 2px;
  margin: 30px 10px 10px 30px;
  padding-top:2px solid #000;

}


#timeline .demo-card .head h2 span {
  display: block;
  font-size: 0.6rem;
  margin: 0;
}


@media (min-width: 480px) {
  #timeline .demo-card .head h2 span {
    font-size: 0.8rem;
  }
  
}
#timeline .demo-card .body {

  border-top: 0;
  padding: 15px;
}
@media (min-width: 1000px) {
  #timeline .demo-card .body {
    height: 100%;
  }
}

#timeline .demo-card .body p {
  font-size: 1.5rem;
  line-height: 3rem;
  margin:0 20px 15px;
}
#timeline .demo-card .body .flow_img{
  display: block;
  width: 250px;
  height: 250px;
  border-radius: 50% 50%;
  margin: 0 auto;
  text-align: center;
  object-fit: cover; 
}
#timeline .demo-card--step1 {
  background-color: #fff;
  border-radius: 10px;
}
#timeline .demo-card--step1 .head::after {
  border-color:#fff;
}
#timeline .demo-card--step2 {
  background-color:#fff;
  border-radius: 10px;
}
#timeline .demo-card--step2 .head::after {
  border-color:#fff;
}
#timeline .demo-card--step3 {
  background-color:#fff;
  border-radius: 10px;
}
#timeline .demo-card--step3 .head::after {
  border-color:#fff;
}
#timeline .demo-card--step4 {
  background-color:#fff;
  border-radius: 10px;
}
#timeline .demo-card--step4 .head::after {
  border-color:#fff;
}
#timeline .demo-card--step5 {
  background-color:#fff;
}
#timeline .demo-card--step5 .head::after {
  border-color:#fff;
}






/* kaicyo_area */
#kaicyo{
  width: 100%;
  margin:0 auto;

}

#kaicyo .sec_tit {

  font-size : 28px;
  line-height : 1.3333;    
  font-weight: 600;
}
#kaicyo .sec_tit img{
  padding: 0 0 30px 0;
}
#kaicyo .sec_tit span{ font-size: 1.3rem;}

.hyou{
  width:100%; max-width:400px;
  border-collapse: collapse;border-spacing: 0;margin-bottom: 20px;border-top:#c5a9b0 solid 1px;
  margin: 30px auto;
}

.hyou th{
  text-align: left;
  width: 50%;
}
.hyou th,
.hyou td{
  padding:10px 20px; border-bottom:#c5a9b0 solid 1px; vertical-align:top;
  vertical-align: middle;
}

.hyou td{
  text-align: right;
  font-size: 1.5rem;
}


/* ///kaicyo_area */

/* 宝友之塔　慰霊碑*/
#hoyunotou{ 
  padding-top:130px;
  margin-top:-130px;
}
#hoyunotou_bg{
  background: rgba(223, 208, 252, 0.4);
}
#ireihi{

  padding-top:130px;
  margin-top:-130px;
}
#ireihi_bg{
  background: rgba(252, 224, 250, 0.5);

}

#salon {
  padding-top: 130px;
  margin-top: -130px;
  margin-bottom:50px;
}

#card01 {
  display: inline-block;
  width: 100%;
  display: flex;
  justify-content: space-between;
  -webkit-align-items: flex-start;  /* Safari etc. */
  -ms-align-items    : flex-start;  /* IE10        */
  align-items        : flex-start;
}

#card01 .card {
  
  width: 100%;
 
  margin: 60px auto ;
}


#card01 .card_item{
  width:50%;

}

#card01 .card-thumbnail {
  width: 100%;
}

#card01 .card-img {
    display: block;
    width: 100%;
    padding:0 10px;
    object-fit: cover;

}

#card01 .card-caption {
  width: 100%;
  padding:30px 30px;
  font-size: 16px;
  line-height: 1.5;
}

#card01 .card_tit{
  font-size: 2rem;
  padding:30px 30px 30px 30px;
}

#card01 .card_txt{
  font-size: 1.8rem;
  text-align:left;
}

#card01 .card_txt .kahi{
width: 100%;
max-width:350px;
text-align:center !important; 

}

@media screen and (max-width:760px) {

  #card01 {
    display:block;
    width: 100%;
  }

  #card01 .card {
    display:block;
    width:100%;
  }


  #card01 .card_item{
    width:100%;
    display:block;
  }
  #card01 .card-caption {

    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    padding:30px 0;
  }
  
  #card01 .card_tit{
    font-size: 1.8rem;
    padding:20px 10px 30px 10px;
  }
  
  #card01 .card_txt{
    font-size: 1.5rem;
    padding:0px 30px 30px 30px;
  }

}


@media screen and (max-width:480px) {

  
  #card01 .card_txt{
    font-size: 1.5rem;
    padding:20px 10px 30px 10px;
  }


}


/* ///宝友之塔　慰霊碑*/


/* 劇団バナー*/
#bnarea_bg {
  background-image: linear-gradient(315deg, #e9d3e3 0%, #e9dfff 50%);
  }
  .bnarea_flex{
      display: flex;
      width:100%;
      padding:10px 0;
      justify-content: center;
      flex-wrap:wrap;
  }
  
  .bnarea_flex .bnarea_item img{ width:100%; max-width: 170px; margin:0 auto; padding:5px 10px;}
/* ///劇団バナー*/

/* メールフォーム*/


/* ///メールフォーム*/

/* contact */
#contact{
  padding-top:80px;
  margin-top:-80px;
  }
#contact.mailarea {
  margin-top:0px;
}
#contact_bg{
  width: 100%;
  
  } 
  
  #contact .content_h{
width: 100%;    
  }
  #contact .content_h img{
    width: 100%;  
    height:200px;
    object-fit: cover;
      }
  .contact_box{
   
    margin: 40px auto 50px ;
    padding: 0 0 30px;
	
	}

   #contact .contact_txt{
     max-width: 600px;
     margin:0 auto;
   }
   

   
  @media screen and (max-width: 640px) {
    #contact .contact_txt{
      margin:0 1rem;
    }
 }
 

  /* ///contact */

#mail_form dt{
font-size: 16px;

}

/*
btnのいろいろ
*/
.sub_gnavi .btn_area{width: 100%; max-width: 150px; margin:0 auto;}


.btn_area{width: 100%; max-width: 250px; margin:0 auto;}

.btn_area .button_01{
	display: inline-block;
  font-size: 1.5rem;
  height:54px;
	margin: 5px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
  }
  .btn_area .button_01::before,
  .btn_area .button_01::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
  }
  .btn_area .button_01,
  .btn_area .button_01::before,
  .btn_area .button_01::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
  }

  .btn_area .button_01 {
    width: 100%;
    max-width: 250px;
    background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);
    border-radius: 30px;
    margin:10px auto;
	  color: #fff;

  }
  .btn_area .button_01:hover {
    background-image: linear-gradient( 135deg, #90c0ee 10%, #aa64ad 100%);
	color: #fff;
  }

  @media screen and (max-width: 640px) {
    .btn_area {
      width: 100%;
      margin:0 auto;
    }
 }


 

    a.s_btn {color:#a02323;}


    .btn_area .button_03 {
      display: inline-block;
      width: 270px;
      height: 30px;
      margin: 5px;
      text-align: center;
      text-decoration: none;
      line-height: 30px;
      outline: none;
      }
      .btn_area .button_03::before,
      .btn_area .button_03::after {
      position: absolute;
      z-index: -1;
      display: block;
      content: '';
      }
      .btn_area .button_03,
      .btn_area .button_03::before,
      .btn_area .button_03::after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all .3s;
      transition: all .3s;
      }
    
      .btn_area .button_03 {
      background-color: #a02323;
      border: 1px solid #a02323;
      border-radius: 5px;
      color: #fff;
    
      }
      .btn_area .button_03:hover {
      opacity: 0.8;
      background-color: #a02323;
      border-color: #a02323;
      color: #fff;
      }
 

      
.btn_area .button_04{
	display: inline-block;
	width: 200px;
	height: 54px;
	margin: 5px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
  }
  .btn_area .button_04::before,
  .btn_area .button_04::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
  }
  .btn_area .button_04,
  .btn_area .button_04::before,
  .btn_area .button_04::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
  }

  .btn_area .button_04 {
	background-color: #a02323;
  border: 2px solid #a02323;
  border-radius: 5px;
	color: #fff;

  }
  .btn_area .button_04:hover {
  opacity: 0.8;
	background-color: #a02323;
  border-color: #a02323;
	color: #fff;
  }
    
    /* アニメーション設定 */
    .arrowWrap {
      position: relative; 
      margin-top: -80px;
      padding-bottom:50px;
      text-align: center;
     z-index: 9999;
    }
    .arrowWrap p{
      max-width: 100px;
      padding:40px 0 0 10px;
      color:#000 ;
      font-size: 1rem;
      letter-spacing: 0.2rem;
      bottom:100px;
      margin:0 auto ;
      text-align: center;
    }
    .arrow1 {
      width: 15px;
      margin: 0 auto;
      -webkit-animation: arrow1 2s linear 0s infinite normal;
      animation: arrow1 2s linear 0s infinite normal;
    }
    
    .arrow2 {
      width: 15px;
      margin: 0 auto;
      -webkit-animation: arrow2 2s linear 0s infinite;
      animation: arrow2 2s linear 0s infinite;
    }
    
    .arrow1 span,
    .arrow2 span {
      position: relative;
      display: block;
      left: 50%;
    }
    
    .arrow1 span {
      margin-top: -10px;
    }
    
    .arrow1 span:before,
    .arrow2 span:before {
      content: '';
      width: 20px;
      height: 20px;
      border: 0;
      border-top: solid 2px #000;
      border-right: solid 2px #000;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      box-sizing: border-box;
    }
    
    @keyframes arrow1 {
      0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
      }
    
      20% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
      }
    
      40% {
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0);
      }
    
      60% {
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0);
      }
    
      80% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
      }
    
      100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
      }
    }
    
    @keyframes arrow2 {
      0% {
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0);
      }
    
      20% {
        -webkit-transform: translate3d(-50%, 20px, 0);
        transform: translate3d(-50%, 20px, 0);
      }
    
      40% {
        -webkit-transform: translate3d(-50%, 20px, 0);
        transform: translate3d(-50%, 20px, 0);
      }
    
      60% {
        -webkit-transform: translate3d(-50%, 20px, 0);
        transform: translate3d(-50%, 20px, 0);
      }
    
      80% {
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0);
      }
    
      100% {
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0);
      }
    }


    .fadein {
      opacity : 0;
      transform: translateY(20px);
      transition: all 1s;
    }

    a .arrow01{
  width: 14px;
  transition: transform 0.4s;
}
a .arrow01:hover{
transform: translateX(5px); 
}


.oshirase{
border-radius:10px ;
border:2px dotted #a02323;
padding:10px;
font-size: 1rem;

}


/* /// 共通エリア /*







/*
* MAIN CONTENTS
******************************************************/
.content_wrap{line-height:1.5rem;}



.main-content__wrapper {
	width:100%;
	overflow:hidden;
}
.main-content__outer {
	background: #FFFFFF;
	overflow: hidden;
}
.main-content__outer-stripe {
	background: url(../img/common/bg-border.png) repeat;
}
.main-content {
	max-width:980px;
	margin:auto;
}
.main-content__inner {
	max-width: 980px;
	margin: auto;
}

.con_nav nav{
  width: 100%;
  overflow:hidden;
  padding:0;
  background-color:#222;
}

.con_nav nav ul {

  display:flex;
  list-style: none;
  width: 100%;
  max-width:750px;
  background-color:#222;
/*justify-content: center;*/
  margin:0px auto ;
  transition: 0.24s all ease;
  padding:10px 0;
}
.con_nav nav ul li {
  display: inline-block;
text-align: center;
width: 100%;
  font-size:1.1rem;
  margin:0 auto;
  padding:5px 0;
  color:#fff;

}

.con_nav nav ul li a {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all  0.7s ease;
color:#fff;
}

.con_nav li a:hover
{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-decoration: none;
position: relative;
transition: .24s all ease;
background: url('../img/common/menu-hover.png')no-repeat;
color: #f1cbcb;
padding: 3px 0;
}
a .arrow01{
  width: 14px;
  transition: transform 0.4s;
}
a .arrow01:hover{
transform: translateX(5px); 
}
@media screen and (max-width:480px) {

  .con_nav nav{
    width: 100%;
    
    padding:0;
    background-color:#222;
  }
  .con_nav nav ul{
  display: block;
}

  .con_nav nav ul li {
   
   width: 100%;
    font-size:1.0rem;
    margin:0 auto;
  text-align:center;
  
  }
}
/* content_tit*/ 



.sub-title{
    width:100%;
    max-width: 250px;
    margin: 10px auto 30px;
    font-size: 1.5rem;
    text-align: center;
    
    }
    
    .head-border {
        position: relative;
        padding: 0 50px;
    }
    
    .head-border:before,
    .head-border:after {
        content: '';
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 50px;
        height: 1px;
        background-color: #666;
    }
    
    .head-border:before {
        left: 0;
    }
    
    .head-border:after {
        right: 0;
    }
 /* ///content_tit*/   


@media screen and (max-width:480px) {
	.main-content {
		padding: 15px 0;
	}
}




 
    






/* パソコンで見た時はclass名pc-onlyだけ表示 */
.pc-only{
    display: block;
}
.sp-only{
    display: none;
}

/* スマホで見た時はclass名sp-onlyだけ表示 */
@media screen and (max-width: 768px){
    .pc-only{
        display: none;
    }
    .sp-only{
        display: block;
    } 
}  

@media screen and (max-width:640px) {
	.pc {
		display: none;
	}
}
@media screen and (min-width:641px) {
	.sp {
		display: none;
	}
}




/* bn_area */
.bn_box {width:100%; text-align: center; }

.bn_box img{
	width:98%;
	max-width:851px;
    margin:30px auto;
}
/*
.gradient {
    border: 3px solid #bdbdbc;
    border-image: linear-gradient(to right, #f7e581 0%, #a58109 100%);
    border-image-slice: 1;
  }
*/
	@media screen and (max-width: 768px) {
		.bn_box img{
			width:100%;
			margin:30px auto;}
		
	  }



/* ///bn_area */

.center{
  margin:0 auto;
  text-align: center;
  padding:30px;
  letter-spacing: 0.1rem;
}

.left{
  text-align: left;
  letter-spacing: 0.1rem;
}



/* セクションnavi */ 

.sec_gnavi {
width: 100%;
margin:0 auto 40px;
font-size: 1.5rem;
letter-spacing: 0.1rem;

}

.sec_gnavi_box {
display: flex; /*子要素を横並びにするには、親要素に display: flex; を指定*/
/*display: inline-flex; インライン要素に使うのであれば、親要素に display: inline-flex; を指定*/
flex-direction: row; /*子要素をどの方向に配置していくかを指定row-reverse column column-reverse*/
flex-wrap: wrap; /*子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置*/
justify-content: center;/*親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定*/
align-items: center;/*親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定*/
align-content: space-around;/*子要素が複数行に渡った場合の垂直方向の揃えを指定*/
margin: 20px 0;
padding-bottom:30px;
line-height:50px;
}

.sec_gnavi_box .item a{
  background:#3c363d;
  color:#fff;
  padding:10px 20px;
  margin:0 5px;
  border-radius: 50px;
  border:2px solid #cfb9c8;
  
}

.sec_gnavi_box .item a:hover{
  background:#fff;
  color:#3c363d;;
  padding:10px 20px;
  margin:0 5px;
  border:2px solid #cfb9c8;
  border-radius: 50px;
  
}
@media screen and (max-width: 780px) {

.sec_gnavi {
  width: 100%;
  margin:0 auto 40px;
  font-size: 1.5rem;
  
  }
  

}


/* セクションnavi */ 

.sec_gnavi02 {
  width: 100%;
  margin:0 auto 40px;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  
  }
  
  .sec_gnavi_box02  {
  display: flex; /*子要素を横並びにするには、親要素に display: flex; を指定*/
  /*display: inline-flex; インライン要素に使うのであれば、親要素に display: inline-flex; を指定*/
  flex-direction: row; /*子要素をどの方向に配置していくかを指定row-reverse column column-reverse*/
  flex-wrap: wrap; /*子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置*/
  justify-content: center;/*親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定*/
  align-items: center;/*親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定*/
  align-content: space-around;/*子要素が複数行に渡った場合の垂直方向の揃えを指定*/
  margin: 20px 0;
  padding-bottom:30px;
  line-height:40px;
  }
  
  .sec_gnavi_box02 .item a{
    background:hsla(278, 84%, 83%, 0.3);
    color:#44454b;
    padding:5px 10px;
    margin:0 5px;
    border:0px solid #f7d9ed;
    
  }
  
  .sec_gnavi_box02 .item a:hover{
    background:#fff;
    color:#3c363d;;
    padding:5px 10px;
    margin:0 5px;
    border-bottom:1px solid hsla(278, 84%, 83%, 0.3);
    ;
    
  }
  @media screen and (max-width: 780px) {
  
  .sec_gnavi02 {
    width: 100%;
    margin:0 auto 40px;
    font-size: 1.5rem;
    
    }
    
  
  }

#benefit .area01{

  padding:30px 0;
}
#benefit .area02{
  background: #eddffc;
}

/*
#benefit .area03{
  background: #fcdff4;
}
*/
.red{
  color: #b82121;
}




#benecard02{
	display: flex;
	flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;

}

#benecard02 .card {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 46%;
margin: 15px 2% ;
float:left;
box-shadow: 0 5px 10px 0 rgba(79, 57, 105, 0.4);
}


#benecard02 .card_item{
overflow: hidden;
display: inline-block;
width: 50%;
background: #fff;
position: relative;
}


.btn_animation_area{

  display: block;
  width: 100%;
  margin: 0 auto;
bottom: 10px;


}

.btn-animation-02 {
  display: inline-block;
    position: absolute;
  width: 100%;
  max-width: 200px;
  text-align: center;
  background-color: #a184f0;
  border: 2px solid #cfb9c8;
  font-size: 16px;
  color: #fff !important;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;

 
}

.btn-animation-02 span {
  position: relative;
  z-index: 1;
}

.btn-animation-02::before,
.btn-animation-02::after {
  content: "";
  display: block;
  background-color: #373535;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 30px;
  top: 0;
  transition: .2s;

}
.btn-animation-02::before {
  left: 0;
}
.btn-animation-02::after {
  right: 0;
}

.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
  width: 0;
  background-color: #6123a0;
}

.btn-animation-02:hover {
  color: #FFF !important;
}

#benecard02 .card-img {
  display: block;
  width: 100%;
  height: 270px;
  margin:0 auto;
  object-fit: cover;

}

#benecard02 .card-caption {
overflow:hidden;
width: 100%;
height:auto;
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
padding: 20px;

}

#benecard02 .card_tit{
font-size: 2rem;
padding:0 0 20px 0;
font-weight: 600;
margin: 0 auto;
}

#benecard02 .card_txt{
font-size: 1.5rem;
padding:0 0 20px 0;
line-height:2.3rem;
margin: 0 auto;
}


/* 偶数番目に登場する.cardは右から左に要素が配置されるようにする

.card:nth-child(even) {
flex-direction: row-reverse;
}
*/


@media screen and (max-width:800px) {

  #benecard02{
 
width: 100%;
    margin:0 auto;

  } 
  #benecard02 .card {
    display: block;
    overflow: hidden;
    width: 100%;
    height:auto;
    justify-content: center;
    width: calc((94% - 2%) / 2);
    flex-wrap: wrap;
    margin: 15px 2%;
 
    }
  
  
      
      


#benecard02 .card_item{
  width:100%;
  margin: 0 auto;
  text-align: center;

 
}

#benecard02 .card-img {
  display: inline-block;
  width: 100%;
  height:250px;
  margin:0 auto;
  object-fit: cover;

}

#benecard02 .card-caption {
  overflow:hidden;
  height:auto;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  background:#fff;
  text-align: center;
 
}


#benecard02 .card_tit{
  font-size: 1.8rem;
  padding:0 10px 20px 10px;
}

#benecard02 .card_txt{
  font-size: 1.5rem;
  padding:0px 10px 20px 10px;
}

}

@media screen and (max-width:480px) {

  #benecard02{
    width:100%;
    margin:0 auto;
    overflow: hidden;
  } 
  #benecard02 .card {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width:94%;
    margin: 15px 3%; 
    }
  


#benecard02 .card_item{
  width:100%;
  margin: 0 auto;


}

  #benecard02::after {
    content: '';
    display: block;
    clear: both;
  }
  
  
  #benecard02 .card-caption {

    width: 100%;
    font-size: 16px;
    line-height: 2rem;
    margin: 0 auto;
    padding: 10px;
}

  
    #benecard02 .card-img {
    width: 100%;
    height:250px;
    object-fit: cover;
    
    }
    #benecard02 .card_tit{
      font-size: 1.8rem;
      padding:10px 0;
    }
    
    #benecard02 .card_txt{
      font-size: 1.5rem;
      padding:0 0 20px;
    }
    
  }




#benecard01 {
  width: 100%;
  text-align: left;
}

#benecard01 .card {
  display: flex;
  justify-content: space-between;
  margin: 50px 3% 50px;
  box-shadow: 0 5px 10px 0 rgba(79, 57, 105, 0.4);

}


#benecard01 .card_item{
  width:50%;

  background: #fff;
}

#benecard01 .card-thumbnail {
  width: 100%;
}

#benecard01 .card-img {
    width: 100%;
    height:100%;
    object-fit: cover;

}

#benecard01 .card-caption {
  font-size: 16px;
  line-height: 1.5;
  padding: 20px;
}
#benecard01 .part_tit{
  font-size: 16px;
  background: #ecebeb;
  padding:5px 0 5px 10px;
  font-weight: 600;
  letter-spacing: 5px;
}

#benecard01 .card_tit{
  font-size: 2rem;
  padding:0 0 20px 0;
  font-weight: 600;
  margin: 0 auto;
  text-align: left;
  }
  
  #benecard01 .card_txt{
  font-size: 1.5rem;
  padding:0 20px 20px;
  line-height:2.3rem;
  margin: 0 auto;
  text-align: left;
  }

  #benecard01 .btn_area02 {
    position: relative;
    width: 100%;
    max-width: 300px;
    height:50px;
    bottom: 0;
    margin: 0 auto 20px;
   }
  
   #benecard01 .btn_area02 .button_02{
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    margin:0 auto;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    outline: none;
  }
  #benecard01 .btn_area02 .button_02::before,
  #benecard01 .btn_area02 .button_02::after {
     position: absolute;
     z-index: -1;
     display: block;
     content: '';
  }
  #benecard01 .btn_area02 .button_02,
  #benecard01 .btn_area02 .button_02::before,
  #benecard01 .btn_area02 .button_02::after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all .3s;
      transition: all .3s;
  }
    
  #benecard01 .btn_area02 .button_02 {
      background-color: #ffffff;
      border: 2px solid #6123a0;
      border-radius: 5px;
      color: #6123a0;
    
      }
  #benecard01 .btn_area02 .button_02:hover {
      opacity: 0.8;  
      background-color: #f5e7f5;
      border-color: #6123a0;
      color: #6123a0;
      }

@media screen and (max-width:780px) {
  #benecard01 {
    display: block;
    width: 100%;
    text-align: left;

  }

  #benecard01 .card {
    display: block;
    width:94%;
    margin: 0px 3% 0;

 
  }

  #benecard01 .card_item{
    width:100%;

  }
  #benecard01 .card-caption {

    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0 30px;
    }
  
  #benecard01 .card_tit{
    font-size: 1.8rem;
    padding:20px 10px 30px 10px;
  }
  
  #benecard01 .card_txt{
    font-size: 1.5rem;
    padding:10px 20px 30px 20px;
  }
  #benecard01 .btn_area02 {
   bottom: 20px; 
}
}


#benecard03 {
  display: inline-block;
  width: 100%;

}
.benecard03_area{
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#benecard03 .card {
  width: calc((100% - 4%) / 3);
padding:20px 10px;
align-items: center;


}
#benecard03 .card-caption {
height:300px;


}


#benecard03 .card_item{
  width:100%;
  background: #fff;
}

#benecard03 .card-thumbnail {
  width: 100%;

}

#benecard03 .card-img {
    display: block;
    width: 100%;
    height:300px;
    object-fit: cover;

}

#benecard03 .card-caption {

  width: 100%;
  font-size: 16px;
  line-height: 1.5;
}

#benecard03 .card_tit{
  font-size: 2rem;
  padding:30px 30px 30px 30px;
}

#benecard03 .card_txt{
  font-size: 1.5rem;
  padding:0px 30px 30px 30px;
}


#benecard03 .btn_area02 {
  position: relative;
  max-width: 250px;
  height:50px;
  bottom: 20px;
margin:0 auto;
 }

 #benecard03 .btn_area02 .button_02{
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  margin:0 auto;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
}
#benecard03 .btn_area02 .button_02::before,
#benecard03 .btn_area02 .button_02::after {
   position: absolute;
   z-index: -1;
   display: block;
   content: '';
}
#benecard03 .btn_area02 .button_02,
#benecard03 .btn_area02 .button_02::before,
#benecard03 .btn_area02 .button_02::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
  
#benecard03 .btn_area02 .button_02 {
    background-color: #ffffff;
    border: 2px solid #6123a0;
    border-radius: 5px;
    color: #6123a0;
  
    }
#benecard03 .btn_area02 .button_02:hover {
    opacity: 0.8;  
    background-color: #f5e7f5;
    border-color: #6123a0;
    color: #6123a0;
    }


@media screen and (max-width:480px) {
  #benecard03 .card {
    display:block;
    width:50%;
  }

  #benecard03 .card_item {
    width:100%;
  }

  #benecard03 .card-caption {
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
  }
  
  #benecard03 .card_tit{
    font-size: 1.8rem;
    padding:20px 10px 30px 10px;
  }
  
  #benecard03 .card_txt{
    font-size: 1.1rem;
    padding:0px 10px 30px 10px;
  }

  }


#manner {
width: 100%;
}
#kokoroe{
  background: #f9f3ff;
}

.manner_txt {
  width: 100%;
  max-width:800px;
 }
.end_txt{
  margin:30px auto;
}
   
#manner ol { 
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
    background: #fff;
    box-shadow: 0px 0px 0px 10px #fff;/*線の外側*/
    border-radius: 9px;
    padding: 0.5em 0.5em 0.5em 2em;
    font-size: 1.8rem;
  }
  
  #manner ol li {
    display: list-item;
    list-style-type: decimal;
    margin-left: 24px;/* リストの左側に余白 */
    text-align: left;
    line-height: 3rem;
    padding: 0.5em 0;
    letter-spacing: 0.1rem;
    border-bottom: dotted 1px #bb9ba9;
  }

.img_area {
  width: 100%;
  height: 300px;
  object-fit: cover;

}
    

  @media screen and (max-width:480px) {
    #manner ol { 
      width: 90%;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0px 0px 0px 10px #fff;/*線の外側*/
      border-radius: 9px;
      padding: 0.5em 1em 0.5em 1em;
      font-size: 1.5rem;
    }
    
    #manner ol li {
    display: list-item;
    list-style-type: decimal;
    margin-left: 15px;/* リストの左側に余白 */
    text-align: left;
    line-height: 2.8rem;
    padding: 0.5em 0;
    border-bottom: dotted 1px #bb9ba9;
  }
}

/* know */
.gallary{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  width: 80%;
  margin:0 auto;
  padding:0 0 30px 0;
}

.galla {
	position: relative;
  overflow: hidden;
  width : calc(100% / 2) ;
  width: 50%;
  object-fit: cover;
	overflow:		hidden;
	}

.galla img{width: 100%;} 

.galla .caption {
	font-size:		120%;
	text-align: 		center;
	color:			#fff;
}

.galla .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.galla:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		50px;	/* ホバーで下にずらす */
}
.caption p{
	padding:20px 30px; text-align: left;}

@media screen and (max-width:780px) {
  .gallary{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    width: 100%;
    margin:0 auto;
    padding:0 0 30px 0;
  }

  .galla .mask {
    width:			100%;
    height:			100%;
    position:		absolute;
    top:			0;
    left:			0;
    opacity:		0;	/* マスクを表示しない */
    background-color:	rgba(0,0,0,0.4);
    -webkit-transition:	all 0.6s ease;
    transition:		all 0.6s ease;
  }
	.galla:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		30px;	/* ホバーで下にずらす */
}
.caption p{
	padding:20px 30px; text-align: left;}
}


@media screen and (max-width:480px) {
	.galla {
	position: relative;
  overflow: hidden;
  width: 100%;
  object-fit: cover;
	overflow:		hidden;
	}

.galla img{width: 100%;} 

.galla .caption {
	font-size:		120%;
	text-align: 		center;
	color:			#fff;
}
.galla .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
	.galla:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:	30px;	/* ホバーで下にずらす */
}
.caption p{
	padding:10px 10px;}
}


.bg_img_area {
  width: 100%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media screen and (max-width: 480px){
.bg_img_area {
  width: 100%;
  max-width: 480px;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
}