@charset "utf-8";
/* CSS Document */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:link {
  color: #FFFFFF;
}
a:visited {
  color: #808080;
}
a:hover {
  color: #AEAEAE;
  text-decoration: underline;
}
a:active {
  color: #F9F9F9;
}
/*▼***********ユーティリティーここから*******************************************▼*/
/*カラー*/
.main-cl-a{
    color: #282828;
}
.main-cl-b{
    color: #393939;
}
.main-cl-c{
    color: #A3A3A3;
}
.main-cl-d{
    color: #747474;
}


/*カラーここまで*/


/*マージン*/
.mg-t1, .mg-y1, .tab-mg-t1, .tab-mg-y1 {
  margin-top: 10px !important;
}
.mg-b1, .mg-y1, .tab-mg-b1, .tab-mg-y1 {
  margin-bottom: 10px !important;
}
.mg-l1, .mg-x1, .tab-mg-l1, .tab-mg-x1 {
  margin-left: 10px !important;
}
.mg-r1, .mg-x1, .tab-mg-r1, .tab-mg-x1 {
  margin-right: 10px !important;
}
.pd-t1, .pd-y1, .tab-pd-t1, .tab-pd-y1 {
  padding-top: 10px !important;
}
.pd-b1, .pd-y1, .tab-pd-b1, .tab-pd-y1 {
  padding-bottom: 10px !important;
}
.pd-l1, .pd-x1, .tab-pd-l1, .tab-pd-x1 {
  padding-left: 10px !important;
}
.pd-r1, .pd-x1, .tab-pd-r1, .tab-pd-x1 {
  padding-right: 10px !important;
}
.mg-t2, .mg-y2, .tab-mg-t2, .tab-mg-y2 {
  margin-top: 20px !important;
}
.mg-b2, .mg-y2, .tab-mg-b2, .tab-mg-y2 {
  margin-bottom: 20px !important;
}
.mg-l2, .mg-x2, .tab-mg-l2, .tab-mg-x2 {
  margin-left: 20px !important;
}
.mg-r2, .mg-x2, .tab-mg-r2, .tab-mg-x2 {
  margin-right: 20px !important;
}
.pd-t2, .pd-y2, .tab-pd-t2, .tab-pd-y2 {
  padding-top: 20px !important;
}
.pd-b2, .pd-y2, .tab-pd-b2, .tab-pd-y2 {
  padding-bottom: 20px !important;
}
.pd-l2, .pd-x2, .tab-pd-l2, .tab-pd-x2 {
  padding-left: 20px !important;
}
.pd-r2, .pd-x2, .tab-pd-r2, .tab-pd-x2 {
  padding-right: 20px !important;
}
.mg-t3, .mg-y3, .tab-mg-t3, .tab-mg-y3 {
  margin-top: 30px !important;
}
.mg-b3, .mg-y3, .tab-mg-b3, .tab-mg-y3 {
  margin-bottom: 30px !important;
}
.mg-l3, .mg-x3, .tab-mg-l3, .tab-mg-x3 {
  margin-left: 30px !important;
}
.mg-r3, .mg-x3, .tab-mg-r3, .tab-mg-x3 {
  margin-right: 30px !important;
}
.pd-t3, .pd-y3, .tab-pd-t3, .tab-pd-y3 {
  padding-top: 30px !important;
}
.pd-b3, .pd-y3, .tab-pd-b3, .tab-pd-y3 {
  padding-bottom: 30px !important;
}
.pd-l3, .pd-x3, .tab-pd-l3, .tab-pd-x3 {
  padding-left: 30px !important;
}
.pd-r3, .pd-x3, .tab-pd-r3, .tab-pd-x3 {
  padding-right: 30px !important;
}
.mg-t4, .mg-y4, .tab-mg-t4, .tab-mg-y4 {
  margin-top: 40px !important;
}
.mg-b4, .mg-y4, .tab-mg-b4, .tab-mg-y4 {
  margin-bottom: 40px !important;
}
.mg-l4, .mg-x4, .tab-mg-l4, .tab-mg-x4 {
  margin-left: 40px !important;
}
.mg-r4, .mg-x4, .tab-mg-r4, .tab-mg-x4 {
  margin-right: 40px !important;
}
.pd-t4, .pd-y4, .tab-pd-t4, .tab-pd-y4 {
  padding-top: 40px !important;
}
.pd-b4, .pd-y4, .tab-pd-b4, .tab-pd-y4 {
  padding-bottom: 40px !important;
}
.pd-l4, .pd-x4, .tab-pd-l4, .tab-pd-x4 {
  padding-left: 40px !important;
}
.pd-r4, .pd-x4, .tab-pd-r4, .tab-pd-x4 {
  padding-right: 40px !important;
}
.mg-t5, .mg-y5, .tab-mg-t5, .tab-mg-y5 {
  margin-top: 50px !important;
}
.mg-b5, .mg-y5, .tab-mg-b5, .tab-mg-y5 {
  margin-bottom: 50px !important;
}
.mg-l5, .mg-x5, .tab-mg-l5, .tab-mg-x5 {
  margin-left: 50px !important;
}
.mg-r5, .mg-x5, .tab-mg-r5, .tab-mg-x5 {
  margin-right: 50px !important;
}
.pd-t5, .pd-y5, .tab-pd-t5, .tab-pd-y5 {
  padding-top: 50px !important;
}
.pd-b5, .pd-y5, .tab-pd-b5, .tab-pd-y5 {
  padding-bottom: 50px !important;
}
.pd-l5, .pd-x5, .tab-pd-l5, .tab-pd-x5 {
  padding-left: 50px !important;
}
.pd-r5, .pd-x5, .tab-pd-r5, .tab-pd-x5 {
  padding-right: 50px !important;
}
.mg-t6, .mg-y6, .tab-mg-t6, .tab-mg-y6 {
  margin-top: 60px !important;
}
.mg-b6, .mg-y6, .tab-mg-b6, .tab-mg-y6 {
  margin-bottom: 60px !important;
}
.mg-l6, .mg-x6, .tab-mg-l6, .tab-mg-x6 {
  margin-left: 60px !important;
}
.mg-r6, .mg-x6, .tab-mg-r6, .tab-mg-x6 {
  margin-right: 60px !important;
}
.pd-t6, .pd-y6, .tab-pd-t6, .tab-pd-y6 {
  padding-top: 60px !important;
}
.pd-b6, .pd-y6, .tab-pd-b6, .tab-pd-y6 {
  padding-bottom: 60px !important;
}
.pd-l6, .pd-x6, .tab-pd-l6, .tab-pd-x6 {
  padding-left: 60px !important;
}
.pd-r6, .pd-x6, .tab-pd-r6, .tab-pd-x6 {
  padding-right: 60px !important;
}
.mg-t7, .mg-y7, .tab-mg-t7, .tab-mg-y7 {
  margin-top: 70px !important;
}
.mg-b7, .mg-y7, .tab-mg-b7, .tab-mg-y7 {
  margin-bottom: 70px !important;
}
.mg-l7, .mg-x7, .tab-mg-l7, .tab-mg-x7 {
  margin-left: 70px !important;
}
.mg-r7, .mg-x7, .tab-mg-r7, .tab-mg-x7 {
  margin-right: 70px !important;
}
.pd-t7, .pd-y7, .tab-pd-t7, .tab-pd-y7 {
  padding-top: 70px !important;
}
.pd-b7, .pd-y7, .tab-pd-b7, .tab-pd-y7 {
  padding-bottom: 70px !important;
}
.pd-l7, .pd-x7, .tab-pd-l7, .tab-pd-x7 {
  padding-left: 70px !important;
}
.pd-r7, .pd-x7, .tab-pd-r7, .tab-pd-x7 {
  padding-right: 70px !important;
}
.mg-t8, .mg-y8, .tab-mg-t8, .tab-mg-y8 {
  margin-top: 80px !important;
}
.mg-b8, .mg-y8, .tab-mg-b8, .tab-mg-y8 {
  margin-bottom: 80px !important;
}
.mg-l8, .mg-x8, .tab-mg-l8, .tab-mg-x8 {
  margin-left: 80px !important;
}
.mg-r8, .mg-x8, .tab-mg-r8, .tab-mg-x8 {
  margin-right: 80px !important;
}
.pd-t8, .pd-y8, .tab-pd-t8, .tab-pd-y8 {
  padding-top: 80px !important;
}
.pd-b8, .pd-y8, .tab-pd-b8, .tab-pd-y8 {
  padding-bottom: 80px !important;
}
.pd-l8, .pd-x8, .tab-pd-l8, .tab-pd-x8 {
  padding-left: 80px !important;
}
.pd-r8, .pd-x8, .tab-pd-r8, .tab-pd-x8 {
  padding-right: 80px !important;
}
.mg-t9, .mg-y9, .tab-mg-t9, .tab-mg-y9 {
  margin-top: 90px !important;
}
.mg-b9, .mg-y9, .tab-mg-b9, .tab-mg-y9 {
  margin-bottom: 90px !important;
}
.mg-l9, .mg-x9, .tab-mg-l9, .tab-mg-x9 {
  margin-left: 90px !important;
}
.mg-r9, .mg-x9, .tab-mg-r9, .tab-mg-x9 {
  margin-right: 90px !important;
}
.pd-t9, .pd-y9, .tab-pd-t9, .tab-pd-y9 {
  padding-top: 90px !important;
}
.pd-b9, .pd-y9, .tab-pd-b9, .tab-pd-y9 {
  padding-bottom: 90px !important;
}
.pd-l9, .pd-x9, .tab-pd-l9, .tab-pd-x9 {
  padding-left: 90px !important;
}
.pd-r9, .pd-x9, .tab-pd-r9, .tab-pd-x9 {
  padding-right: 90px !important;
}
.mg-t10, .mg-y10, .tab-mg-t10, .tab-mg-y10 {
  margin-top: 100px !important;
}
.mg-b10, .mg-y10, .tab-mg-b10, .tab-mg-y10 {
  margin-bottom: 100px !important;
}
.mg-l10, .mg-x10, .tab-mg-l10, .tab-mg-x10 {
  margin-left: 100px !important;
}
.mg-r10, .mg-x10, .tab-mg-r10, .tab-mg-x10 {
  margin-right: 100px !important;
}
.pd-t10, .pd-y10, .tab-pd-t10, .tab-pd-y10 {
  padding-top: 100px !important;
}
.pd-b10, .pd-y10, .tab-pd-b10, .tab-pd-y10 {
  padding-bottom: 100px !important;
}
.pd-l10, .pd-x10, .tab-pd-l10, .tab-pd-x10 {
  padding-left: 100px !important;
}
.pd-r10, .pd-x10, .tab-pd-r10, .tab-pd-x10 {
  padding-right: 100px !important;
}
/*フレックス*/
.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  /*  justify-content: center;*/
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.flex--howto { /*howtoページのwidthを指定する*/
  max-width: 1128px;
  min-width: 750px;
  margin-right: auto;
  margin-left: auto;
  padding-left: auto;
  padding-right: auto;
}
.flex > * {
  box-sizing: border-box;
}
.flex > * {
  box-sizing: border-box;
}
.flex--pc2 * {}
.flex.flex--pc2 > * {
  width: calc(50% - 30px);
}

/*文字サイズ*/
.text-basic {
  /*text-align: justify;*/
  color: #A3A3A3;
  font-size: 1.2em;
  line-height: 1.8em;
}
.text-basic-2 {
  /*text-align: justify;*/
  color: #FFFFFF;
  font-size: 1.2em;
  line-height: 1.8em;
}

.text_center {
  text-align: center;
}
.text_left {
  text-align: justify;
}


/*画面幅によって見えなくなる*/





/*SP*/
@media (max-width : 767px) {
  /*imgや文章の横幅を指定*/
  .width-basic *{
    width: 90%;
      margin-left: auto;
      margin-right: auto;
  }
}
/*PC*/
@media (min-width : 768px) {
  /*imgや文章の横幅を指定*/
  .width-basic *{
    max-width: 800px;
     width: 90%; 
      margin-left: auto;
      margin-right: auto;
  }
}
/*▲***********ユーティリティーここまで*******************************************▲*/



#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 11;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -250px;
  margin-left: -200px;
  text-align: center;
  color: #eaeaea;
  z-index: 2;
  font-size: 2em;
  letter-spacing: 0.5em;
}

/*メニュー*/
nav.NavMenu {
  position: fixed; /*表示位置を固定*/
  z-index: 5; /*重ね順を変更*/
  top: 63px; /*表示位置を指定*/
  left: 0; /*表示位置を指定*/
  background: #fff; /*背景を白にする*/
  color: #000; /*文字色を黒にする*/
  text-align: center; /*テキストを中央揃え*/
  width: 100%; /*全幅表示*/
  transform: translateY(-100%); /*ナビを上に隠す*/
  transition: all 0.6s; /*アニメーションの時間を指定*/
}
nav.NavMenu ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #000000;
  opacity: 0.8;
}
nav.NavMenu ul li {
  font-size: 1.1em;
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px dotted #333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.2em;
}
nav.NavMenu ul li:last-child {
  padding-bottom: 0;
  border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}
nav.NavMenu ul li a {
  display: block; /*クリックできる領域を広げる*/
  color: #CECECE;
  padding: 1em 0;
}
nav.NavMenu.active {
  transform: translateY(0%); /*ナビを表示する*/
}

/*メニューボタン*/
.Toggle {
  /*display: block;
  position: fixed; *//* bodyに対しての絶対位置指定 */
/*  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 3;*/
   /* padding-top: 20px;*/
    z-index: 10;
    height: 64px;
    position: fixed; 
    top: 0px;
    background-color: #404040;
    /*background-color: #282828;*/
    width: 100%;
    
    
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 65%);
    
}
.Toggle > div {
    position: relative;
    margin-left: calc(100% - 55px);
}


/*header{
    z-index: 10;
    height: 64px;
    position: fixed; 
    top: 0px;
    background-color: #FFF;
    width: 100%;
    
    
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}*/

/*ハンバーガー作成*/
.Toggle span {
  display: block;
  position: absolute;
  width: 30px;
   /* border-bottom: 3px solid #282828;*/
  border-bottom: 3px solid #8D7630;
  -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
  -moz-transition: .35s ease-in-out; /*変化の速度を指定*/
  transition: .35s ease-in-out; /*変化の速度を指定*/
  left: 6px;
}
.Toggle span:nth-child(1) {
  top: 22px;
}
.Toggle span:nth-child(2) {
  top: 30px;
}
.Toggle span:nth-child(3) {
  top: 38px;
}
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
  top: 38px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2), .Toggle.active span:nth-child(3) {
  top: 38px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bg{
    background-color: #FFFFFF;
    position: fixed;
    width: 100vw;
    height: 64px;
    top: 0;
}

/*メニューここまで*/

h1{
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 100;
}


#fade {
  display: none;
}
.topback {
  background-image: url(../images/maintop.jpg);
  left: auto;
  right: auto;
  width: 100%;
  height: 800px;
  /*margin-top: 200px;*/
  position: relative;
  background-position: center top;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
}
.temph1 {
  margin-top: 73px;
  color: #FFFFFF;
  font-size: 2em;
  /*margin-bottom: -14px;*/
  letter-spacing: 0.35em;
}
.yof_per_r {
  height: 200px;
  width: 300px;
  margin-left: auto;
  color: #FFFFFF;
  margin-right: 20%;
}
.yof_per_l {
  width: auto;
  text-align: left;
  color: #FFFFFF;
  height: 300px;
  margin-left: 20%;
  margin-right: auto;
}
.clear_left {
  margin-bottom: 100px;
  color: #A3A3A3;
  text-align: right;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}
.cb {
  /* floatを解除 */
  clear: both;
}
.youtube_box {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}
.link_for_button {
  display: inline-block;
  text-align: center;
  margin: 40px 0 0;
}
.link_for_button_home {
  display: inline-block;
  text-align: center;
  margin: 40px 0 60px;
}
.link_for_button:hover, .link_for_button_home:hover {
  text-decoration: none;
}
/*メディアクエリここから*/
/* sp */
@media (max-width : 767px) {
  .flex.flex--sp1 > * {
    width: 100%;
    /*margin-right: auto; 
    margin-left: auto;*/
  }
  .flex--howto { /*howtoページのwidthを指定する*/
    max-width: 90vw;
    min-width: 90vw;
  }
  .clear_left {
    margin-bottom: 100px;
    color: #A3A3A3;
    text-align: right;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .yof_column h5 {
    text-align: left;
    font-size: 1.5em;
    font-weight: normal;
    letter-spacing: 0.2em;
    width: 300px;
  }
  .temph1 {
    margin-top: 0px;
    color: #FFFFFF;
    font-size: 1.3em;
    margin-bottom: -14px;
    letter-spacing: 0.3em;
  }
  .temph1 img {
    margin-top: 73px;
    color: #FFFFFF;
    font-size: 1.3em;
    margin-bottom: -14px;
    letter-spacing: 0.3em;
    padding-right: 15px;
  }
  .topback {
    background-image: url(../images/maintop_sp.jpg);
    left: auto;
    right: auto;
    width: 100%;
    height: 550px;
    margin-top: 150px;
    position: relative;
    background-position: center top;
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
  }
  #loader-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #000;
    z-index: 1;
  }
  #loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -130px;
    margin-left: -200px;
    text-align: center;
    color: #eaeaea;
    z-index: 2;
    font-size: 1.1em;
    letter-spacing: 0.5em;
  }
  #loader img {
    width: 40%;
  }
  .copyclas {
    font-size: 0.5em;
  }
  .yof_per_r {
    height: 200px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    color: #FFFFFF;
    padding-top: 20px;
  }
  .yof_per_l {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    color: #FFFFFF;
    height: 300px;
  }
}
.osusume {
  margin-top: 40px;
  margin-right: 10%;
  margin-left: 10%;
  text-align: center;
  width: 80%;
}
.hiaruronsan {
  margin-top: 20px;
  margin-right: 5%;
  margin-left: 5%;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 40px;
  text-align: center;
  width: 90%;
}
.hiaruronsan img {
  margin-right: 5%;
  margin-left: 5%;
  text-align: center;
  width: 90%;
}
/*hr用*/
.dot_line {
  border-bottom: thin dotted #777777;
  border-right-width: thin;
  border-left-width: thin;
  border-top: 0;
  border-right-color: #777777;
  border-left-color: #777777;
  width: 90%;
}
/*hr用*/
.hiaruronsan h2 {
  color: #FFFFFF;
}
.hiaruronsan p {
  color: #cccccc;
  line-height: 30px;
  font-size: 1.2em;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-left: auto;
  margin-right: auto;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.mio_movie {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  min-width: 900px;
}
.top_text {
  margin-right: 5%;
  margin-left: 5%;
  margin-bottom: 20px;
  padding-bottom: 20px;
  text-align: center;
  width: 90%;
  margin-top: -30px;
}
.osusume h2 {
  color: #FFFFFF;
}
.osusume h3 {
  color: #FFFFFF;
  margin-top: -14px;
  font-size: 1em;
}
.osusume p {
  color: #FFFFFF;
}
.top_text p {
  color: #cccccc;
  line-height: 30px;
  font-size: 1.2em;
}
.tyu {
  color: #cccccc;
  font-size: 0.8em;
}
.copyclas {
    
}

.yof_column h5 {
  text-align: left;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.2em;
  width: auto;
}
.yof_column p {
  text-align: left;
}
.clear {
  clear: none;
  margin-bottom: 146px;
}
.insta_sec {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  margin-top: 10px;
  max-width: 700px;
  color: #CCCCCC;
}
.movie_sec {
  height: 0;
  padding-top: 56.25%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.movie_sec iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*PC*/
@media (min-width: 768px) {
    .topback{
        margin-top: 250px;
        
    }
    
  .hiaruronsan img {
    margin-right: 5%;
    margin-left: 5%;
    text-align: center;
    max-width: 800px;
    margin-top: 10px;
  }
  .top_text {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    padding-bottom: 20px;
    text-align: center;
    margin-top: -30px;
    max-width: 900px;
  }
  .hiaruronsan p {
    color: #cccccc;
    line-height: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}
/*ここまで*/