@charset "UTF-8";

@scope (:root) to (#fuwel-wrapper) {

  /* -----------------------------------------------
  *  	         btn setting
  * ----------------------------------------------- */

  /* =========== btn =========== */
  .btn {
    position: relative;
    z-index: 1100;
    font-size: 20px;
  }
  .btn.is-center {
    text-align: center;
  }
  .btn input {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    font-size: 1.2rem;
    font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 3.7;
    cursor: pointer;
  }
  .btn a,
  .btn span {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 230px;
    border: none;
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    font-size: 1.2rem;
    font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 3.7;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: 0.15s;
    transition-property: opacity;
  }
  @media only screen and (max-width: 30em) {
    .btn a,
    .btn span {
      margin-bottom: 10px;
      font-size: 10px;
      font-size: 1rem;
    }
  }
  .btn a:hover,
  .btn span:hover {
    opacity: 0.6;
  }
  .btn a:hover:after,
  .btn span:hover:after {
    right: 12px;
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }

  /* = btn type-b = */
  .btn a.type-b:hover:after,
  .btn span.type-b:hover:after {
    left: 12px;
  }
  .btn a.type-b:after,
  .btn span.type-b:after {
    right: auto;
    left: 15px;
    background-image: url("../img/icon_arrow-left-black.png");
  }

  /* = btn is-disabled = */
  .btn a.is-disabled,
  .btn span.is-disabled {
    background-color: #d6d6d6 !important;
    color: #999 !important;
  }
  .btn a.is-disabled:after,
  .btn span.is-disabled:after {
    background-image: url("../img/icon_arrow-right-gray.png");
  }
  .btn a.is-disabled:hover,
  .btn span.is-disabled:hover {
    opacity: 1 !important;
  }
  .btn a.is-disabled:hover:after,
  .btn span.is-disabled:hover:after {
    right: 15px !important;
    -webkit-transform: rotate(0) !important;
            transform: rotate(0) !important;
  }

  .btn a:after,
  .btn span:after {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    width: 6px;
    height: 9px;
    background-image: url("../img/icon_arrow-right-white.png");
    background-size: cover;
    content: "";
    transition-timing-function: linear;
    transition-duration: 0.15s;
    transition-property: left, right, -webkit-transform;
    transition-property: left, right, transform;
    transition-property: left, right, transform, -webkit-transform;
  }


  .Btn.neoBtn{
    margin: 20px auto;
    width: 200px;
    border: 1px solid #000;
    color: #000;
    font-family: 'Akshar', sans-serif;
    letter-spacing: 2px;
    line-height: 35px;
    border-radius: 4px;
    font-weight: 500;
  }
  .Btn.neoBtn:hover{
    border: 1px solid #009944;
    background-color: #009944 !important;
    color: #fff;
  }
  @media only screen and (max-width: 30em) {
  .Btn.neoBtn{
    width: 150px;
    border: 1px solid #000;
    color: #000;
    background-color: #FFF;
    letter-spacing: 0.8px;
    line-height: 30px;
    border-radius: 3px;
  }
  }



  .Btn.neoBtn_white{
    margin: 20px auto;
    width: 200px;
    border: 1px solid #fff;
    color: #fff;
    font-family: 'Akshar', sans-serif;
    letter-spacing: 2px;
    line-height: 35px;
    border-radius: 4px;
    font-weight: 500;
  }
  .Btn.neoBtn_white:hover{
    border: 1px solid #009944;
    background-color: #009944 !important;
    color: #fff;
  }
  @media only screen and (max-width: 30em) {
  .Btn.neoBtn_white{
    width: 150px;
    border: 1px solid #fff;
    color: #fff;
    letter-spacing: 0.8px;
    line-height: 30px;
    border-radius: 3px;
  }
  }





  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　提案A　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

  /* ========== h1 ========== */
  h1 {
    color: #ddcf9a;
    text-align: center;
    font-size: 45px;
    line-height: 65px;
  }
  @media only screen and (max-width: 30em) {
    h1 {
      font-size: 25px;
      line-height: 40px;
    }    
  }


  /* ========== text ========== */
  .lead_text1 {
    text-align: center;
    line-height: 40px;
    font-size: 18px;
  }
  .lead_text1 span{
    color: #ddcf9a;
  }
  .lead_text2 {
  font-size: 18px;
  line-height: 35px;
  }
  @media only screen and (max-width: 30em) {
  .lead_text1 {
    line-height: 30px;
    font-size: 15px
  }
  .lead_text2 {
  font-size: 15px;
  line-height: 30px;
  }  
  }


  /* ========== contents ========== */
  .contents-img img {
    border-radius: 8px;
  }
  .contents-box {
    display: flex;
    align-items: flex-start;
  }
  .contents-box h2 {
    font-size: 70px;
    letter-spacing: 3px;
    font-family: 'Akshar', sans-serif;
  }
  .contents-box img {
    width: 640px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
  }
  .contents-box .text-right {
    margin: 0 0 0 40px;
    padding: 0;
    width: 900px;
  }
  .contents-box .text-left {
    margin: 0 40px 0 0;
    padding: 0;
    width: 900px;
  }
  @media only screen and (max-width: 30em) {
  .contents-img img {
    border-radius: 5px;
  }
  .contents-box h2 {
    font-size: 35px;
    letter-spacing: 2px;
  }    
  .contents-box img {
    display: none;
  }
  .contents-box .text-right {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .contents-box .text-left {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  }

  .experience_area{
    padding-bottom: 10%;
  }



  /* =========== header nav =========== */

  .header-area.type-a .header-nav >ul a {
    color: #fff;
    font-family: 'Akshar', sans-serif;
    letter-spacing: 2px;
    padding: 0 60px;
  }

  .header-area.type-a .header-nav >ul {
    border-color: rgba(255, 255, 255, 0);
  }

  /*お問合せボタン表示*/
  .clone-header .header-box-outer .reservation {
    display: block;
  }
  /*お問合せボタン表示*/
  .header-box-right .reservation{
    display: none;
  }


  /* =========== headerBox =========== */
  /* = header-box-outer = */
  .header-box-outer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5000;
    padding: 15px;
    width: 100%;
  }
  .header-box-outer:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: "";
  }
  @media only screen and (max-width: 48em) {
    .header-box-outer {
      top: 0;
      z-index: 9000;
      padding: 5%;
    }
    .header-box-outer .header-box_link,
    .header-box-outer .header-box_tel {
      display: none;
    }
    .header-box-outer .btn a:after {
      display: none;
    }
  }



  /* =========== mainVisual =========== */
  /* = mainvisual_movie = */
  .mainvisual_movie {
    display: block;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .mainvisual {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }
  .mainvisual:after {
    display: none;
  }
  .mainvisual_movie-outer:after {
    display: none;
  }



  /* =========== 共通 =========== */
  .pc_mb30{
    margin-bottom: 30px;
  }
  .pc_mb50{
    margin-bottom: 50px;
  }
  .pc_mb80{
    margin-bottom: 80px;
  }
  @media only screen and (max-width: 30em) {
  .limited{
    width: 90%;
  }
  .pc_mb30{
    margin-bottom: 15px;
  }
  .pc_mb50{
    margin-bottom: 0;
  }
  .pc_mb80{
    margin-bottom: 30px;
  }  
  }





  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　提案B　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

  /*======= LINK area =======*/
  .link_area{
    color: #fff;
    position: absolute;
    top:50%;
    left: 50%;
  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    transform: translate(-50%,-50%);/*センター寄せの修正*/
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
  }
  @media only screen and (max-width: 30em) {
  .link_area{
    width: 300px;
  }
  }


  /*======= LOCATION =======*/
  article.top_location_arti{
    height: 100vh !important;
    background-image: url(../../top/img/about_img3_04.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    z-index: 55555;
  }
  article.top_location_arti::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
  }
  /* 768px */
  /*
  @media only screen and (max-width: 48em) {
  article.top_partymice_arti{
    background-image: url(/top/img/mainvisual_import_mb.jpg);
  }
  }
  */


  /*======= PARTY&MICE =======*/
  article.top_partymice_arti{
    height: 100vh !important;
    background-image: url(../../top/img/about_img3_03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    z-index: 55555;
  }
  article.top_partymice_arti::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
  }
  /* 768px */
  /*
  @media only screen and (max-width: 48em) {
  article.top_partymice_arti{
    background-image: url(/top/img/mainvisual_import_mb.jpg);
  }
  }
  */


  /*======= AFTERNOON TEA =======*/
  article.top_afternoontea_arti{
    height: 100vh !important;
    background-image: url(../../top/img/about_img3_02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
  }
  article.top_afternoontea_arti::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
  }
  /* 768px */
  /*
  @media only screen and (max-width: 48em) {
  article.top_afternoontea_arti{
    background-image: url(/top/img/mainvisual_import_mb.jpg);
  }
  }
  */


  /*======= WEDDING =======*/
  article.top_wedding_arti{
    height: 100vh !important;
    background-image: url(../../top/img/about_img3_01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
  }
  article.top_wedding_arti::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
  }
  /* 768px */
  /*
  @media only screen and (max-width: 48em) {
  article.top_wedding_arti{
    background-image: url(/top/img/mainvisual_import_mb.jpg);
  }
  }
  */


  /* ========== text ========== */
  .font1{
    font-family: 'Akshar', sans-serif;
  }
  .link_area h2 {
    font-size: 80px;
    letter-spacing: 5px;
    text-align: center;
    font-weight: 500;
    line-height: 80px;
  }
  .lead_text2_B {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 2%;
    }
  h3{
    font-size: 25px;
    letter-spacing: 3px;
    text-align: center;  
    color: #444;
    margin-bottom: 10%;
  }
  .color_gold{
    color: #E5D772;
  }
  .color_green{
    color: #009944;
  }
  @media only screen and (max-width: 30em) {
  h3{
    font-size: 18px;
    letter-spacing: 2px;
  }  
  .lead_text2_B {
    font-size: 13px;
  }
  .link_area h2 {
    font-size: 60px;
    letter-spacing: 3px;
    line-height: 70px;
  }
  }

  /* ========== img ========== */
  .about_img img{
  border-radius: 5px;
  }

  img {
    width: 100%;
    border: none;
    vertical-align: middle;
  }


  /* ========== contents ========== */
  .contents-img_B{
  margin-bottom: 50px;
  padding: 0 30px;
  }
  .contents-img_B img {
    border-radius: 5px;
  }
  .contents-box_B {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  .contents-box_B h2 {
    font-size: 45px;
    letter-spacing: 3px;
    font-family: 'Akshar', sans-serif;
  }
  .contents-box_B img {
    width: 640px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
  }
  .contents-box_B .text-right {
    margin: 0 0 0 40px;
    padding: 0;
    width: 900px;
  }
  .contents-box_B .text-left {
    margin: 0 40px 0 0;
    padding: 0;
    width: 900px;
  }
  @media only screen and (max-width: 30em) {
  .contents-box_B {
    margin-bottom: 0;
  }
  .contents-box_B h2 {
    font-size: 35px;
    letter-spacing: 2px;
  }    
  .contents-img_B{
  margin-bottom: 15px;
  padding: 0;
  }
  .contents-img_B img {
    border-radius: 0 !important;
  }
  .contents-box_B img {
    display: none;
  }
  .contents-box_B .text-right {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .contents-box_B .text-left {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  }

  .neo_lead_text{
    text-align: left;
  }




  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■　画面分割　片側固定　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


  /*========= 左固定レイアウトのためのCSS ===============*/

  /*左と右を囲う全体のエリア*/
  #wrapper{
    position: relative;/*position stickyの基点にするため relativeをかける*/
    display: flex;/*左エリア、右エリア横並び指定*/
    flex-wrap: wrap;/*ボックスの折り返し可*/
  }

  /*左エリア*/
  #fixed-area{
    /*左固定記述*/
    position: -webkit-sticky;/*Safari用*/
    position: sticky;
    top:0;
    width: 50%;/*横半分50%　縦を100vhにする*/
    height: 100vh;
    /*装飾のためのCSS*/
    display: flex;
    justify-content: center;
    align-items: center;
    background:url(../../top/movie/dummy.jpg) no-repeat center;
    background-size:cover;
    color:#fff;
  }

  /*右エリア*/
  #container{
    width:50%;/*横半分50%にする*/
  }
  /*右各セクション 装飾のためのCSS*/
  section{
  /*  min-height: 100vh;*/
    padding: 0 30px;
  }

  /*
  section:nth-of-type(2n){
  /*装飾のためのCSS*/
  /*  background:#eee;
  }
  */

  @media only screen and (max-width: 30em) {
  section.topics-box_area{
    padding: 0;
  }  
  }



  /*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

  @media screen and (max-width:768px){
  #wrapper{
    display: block;/*display:flex;を解除*/
  }
  section{
    min-height:auto;/*縦を100vh⇒解除*/
  }

  #fixed-area{
    display: none;
  /*　position:relative!important;/*position stickyを解除*/
  /*　width:100%;/*横幅を100%にして1列に見せる*/
  /*　height: 40vh;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
  }

  #container{
    width:100%;/*横幅を100%にして1列に見せる*/
  }
  }






  /*========= EXPERIENCE スライド ===============*/

  /* スライドの動き等速 */
  .swiper-wrapper {
    transition-timing-function: linear;
  }
  /* 画像のサイズ調整 */
  .swiper-slide img {
    height: auto;
    width: 96%;
    border-radius: 5px;
  }
  @media only screen and (max-width: 30em) {
  .swiper-slide img {
    width: 96%;
    border-radius: 3px;
  }  
  }



















  /* リンク装飾 */
  .MainContentBlock a {
  /*  text-decoration: underline;*/
  }

  /* 電話番号 */
  .contact_modalbox_txt {
    margin-bottom: 5% !important;
  }
  a.Btn_Style2 {
    font-size: 18px !important;
  }
  a.Btn_Style2 span{
    font-size: 28px !important;
  }
  /* 768px */
  @media only screen and (max-width: 48em) {
    a.Btn_Style2 {
      font-size: 16px !important;
    }
    a.Btn_Style2 span{
      font-size: 24px !important;
    }
    }

  .clone-header .header-nav .nav_item >a {
    color: #000 !important;
    font-family: 'Akshar', sans-serif;
    letter-spacing: 1px;
  }
  /*ハンバーガーナビ*/
  @media only screen and (max-width: 48em) {
    .clone-header .header-box-outer {
      padding: 2%;
    }
    /*
    .clone-header .header-box-outer .nav-trigger {
      background-color: #fff;
      background-image: url("/bridal/osaka/jacksongarden/common/img/icon_trigger-green.png");
    }*/
  }



  .spinner {
    color: #ffffff;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    top: 30%;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  }
  @-webkit-keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  @keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  @-webkit-keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

}