@charset "UTF-8";

/**********************************
共通
***********************************/
html {
    font-size:16px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

body{
    font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Yu Gothic UI','MS UI Gothic',sans-serif;

/*
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
*/
    /*スマホのスクロールをスムーズにするらしい*/
    -webkit-overflow-scrolling: touch;

    font-feature-settings: "palt";
}

/*
body::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  min-height: 300px;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-image:url('../image/bc-sec3.jpg');
  background-size:cover;
}
*/

#container{
  position: relative;
  width:100%;
}

.container{
    width:100%;
}

.wrapper{
  position: relative;
    width:100%;
    overflow-x: hidden;
    z-index: 0;
}
/*
.wrapper::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-2;
  width:100%;
  height:100vh;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-image:url('../image/bc-sec3.jpg');
  background-size:cover;
}*/

@media(max-width:550px){
    html{
        font-size:3.5vw;
    }
}

img{
    width:100%;
    max-width: 100%;
    height: auto;
    align-self: flex-start;/*追加safari対策*/
  }

  a {
    display: block;
  }

  .max-1200{
    max-width: 1200px;
    width:100%;
  }

/*************************************************************
Visible pc  sp
/************************************************************/

@media(min-width:551px){
  .visible_pc{
      display: block;
  }
  .visible_sp{
    display: none;
  }
}

@media(max-width:550px){
  .visible_pc{
    display: none;
  }
  .visible_sp{
    display: block;
  }
}


/************************************************************/
/* Menu Button & Menu Contents */
/************************************************************/
/*ボタン以外の部分をクリックするとメニューが閉じる*/
#fadeLayer {
    position:absolute;
    top:0px;
    left:0px;

    width:100%;
    /*height:100%;*/
    /*height: 1000vh;*/

    /*height: calc(100% * 1);*/
    height: 100%;

    background-color:#000000;
    opacity:0.5;
    visibility:hidden;
    z-index:8;
  }

  .container-click #fadeLayer {
    visibility:visible;
  }

/*input　#menu-btn-chekuを非表示*/
#menu-btn-check{
    width: 0;
    height: 0;
    display: none !important;
}

/*メニューボタン　PC非表示*/
.menu-btn{
    width: 0;
    height: 0;
    display: none;
}

@media(max-width:550px){
    .menu-btn {
        display: flex;
        position: fixed;
        top:2vw;/**8px*/
        right:4vw;/* 8px;*/
        z-index: 9 !important;
        height: 9vw;/*45px;*/
        width: 9vw;/*45px;*/
        justify-content: center;
        align-items: center;
        background-color:#FFF000;
        /*border-radius: 50%;*/
    }
}

/*バーガーメニュー*/
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 5vw;/*25px;*/
    border-radius: 3px;
    background-color: #000;
    position: absolute;
    transition-duration: 0.5s;
}

.menu-btn span:before {
    bottom: 2vw;/*12px;*/
}
.menu-btn span:after {
    top: 2vw;/*12px;*/
}

/*メニュー内コンテンツ*/
.menu-content{
    width:100vw;/*100vw;86vw;300px 100%*/
    height: 100%;
    position: fixed;
    top: 20.1vw;
    left: 100%;
    z-index: 10;
    padding:8vw 4vw;
    background-color : #090957;
    color:#fff;
    transition-duration: 0.5s;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/*使用してない*/
.menu-content_closebtn{
  display: flex;
  position: absolute;
  top:2vw;/**8px*/
  left:80%;/* 8px;*/
  z-index: 10 !important;
  height: 9vw;/*45px;*/
  width: 9vw;/*45px;*/
  border: #fff solid;
}

.menusp-item1{
  margin: 4vw 0 0 0;
  width: 70vw;
  height: auto;
}

.menusp-foot{
  margin: 10vw 0 0 0;
  width: 70vw;

  color:#fff;
  line-height: 1.8;
}


@media(max-width:550px){
    /*メニュー内コンテンツ*/
    .menu-content {

    }
  }

/***************
menu-btn action
****************/

#menu-btn-check:checked ~ .menu-btn span {
    transition-duration: 0.5s;
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span:before {
    transition-duration: 0.5s;
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span:after {
    transition-duration: 0.5s;
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check:checked ~ .menu-content {
	/*メニューを画面内へ*/
    /*left: 80%;left:1050px;*/
    transition-duration: 0.5s;
    left:calc(100% - 100vw);/*left:calc(100% - 300px);*/
}

/*---------------------------------------*/
/*　コンタクトエリ　テキスト

input

textarea

button

*/
/*---------------------------------------*/

.contactflm{
  background-color: (255,255,255,0.2);
  width: 83.33vw;
  max-width: 1000px;
  padding:4% 0;
  display: flex;
  justify-content: center;
}

.inputid{

}

.contact_areaup{
  background-color: (255,255,255,0.2);
  width: 68.33vw;
  max-width: 820px;
  padding:4% 0;


}

.contact_area{

}

.sendbtn{

}





/*---------------------------------------*/
/*　買い目　テキスト*/
/*---------------------------------------*/

.sk4{/*買い目数字*/
    font-size : 0.7em;/*1.4em*/
    font-weight: 700;
    border: 1px #000 solid;
    width:22px;/*36px*/
    height: 22px;/*36px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;/*#fff;*/
}

.sk-{/*買い目のハイフン*/
  color:#000;
  width:12px;/*16px -> 20px*/
  height:22px;/*36px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  color:#000;/*#fff;*/
}

.bg-cap1{
    background-color: #fff;
    color:#000;
    padding:0 4px;
}
.bg-cap2{
    background-color: #000;
    color:#fff;
}
.bg-cap3{
    background-color: #D32D26;
    color:#fff;
}
.bg-cap4{
    background-color: #1E2082;
    color:#fff;
}
.bg-cap5{
    background-color: #FFF134;
    color:#000;
}
.bg-cap6{
    background-color: #196739;
    color:#fff;
}

@media (max-width:550px){

  .sk4{/*買い目数字*/
    font-size : 0.6rem;/*1rem;1.4em*/
    width:4vw;/*6vw;4.4vw;6.7vw;36px*/
    height:4vw;/*6vw;4.4vw;6.7vw;36px;*/
}

.sk-{/*買い目のハイフン*/
  width:2.4vw;/*3.2vw;2.4vw;4.85vw;26px*/
  height:4vw;/*6vw;4.4vw;6.7vw;36px;*/
}

/*
  .sk4{
      font-size   : 16px;
      line-height : 1em;
      padding:0 4px;

  }
  .sk-{
      font-size   :8px;
        width:12px;
        height:30px;
  }
  */
}

/*---------------------------------------*/
/*アンダーライン*/
/*---------------------------------------*/

.ctw-marker-bold {
    padding:1px 1px 9px 1px;/* 3px 1px;/*3px 1px*/
    background-size: 200% 20%;/*200% 30%  12px*/
    background-position: 0 100%;/*0 100% bottom; 0 10px*/
    background-repeat: repeat-x;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
}

.ctw-marker-bold.ctw-marker-position {
    background-position: -100% 100%;/*-100% 10px*/
}
.ctw-marker-yellow {
background-image: -webkit-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: -moz-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: -o-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: -ms-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
}

/*---------------------------------------*/
/*color bgcolor*/
/*---------------------------------------*/

.bg-white{
    background-color: #fff;
  }
  .bg-white07{
    background-color: rgba(255,255,255,0.7);
  }
  .bg-transparent{
    background-color: transparent;
  }
  .white08{
    color:rgba(255,255,255,0.8);
  }
  .red08{
    color:rgba(204,51,102,0.8);
  }
  .blue08{
    color:rgba(94,144,179,0.8);
  }
  .green08{
    color:rgba(0,128,0,0.8);
  }
  .yellow08{
    color:rgba(250,210,106,0.8);
  }
  .under_yellow{
  background:linear-gradient(transparent 70%, #FFFF00 0%);
  }
  .under_yellow2{
  background:linear-gradient(transparent 50%, #FFFF00 0%);
  }

  /*---------------------------------------*/
  /*　縦　テキスト*/
  /*---------------------------------------*/
  .tate-txt{
    /*color:#fff;*/
    display: inline-block;
    text-align: left;/*上揃い*/
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    /*text-orientation: upright;*/
  }

  @media(max-width:550px){
    .sp-yoko-txt{
      /*color:#fff;*/
      display: inline-block;
      text-align: center;/*上揃い*/
      -webkit-writing-mode:horizontal-tb;
      writing-mode: horizontal-tb;
      /*text-orientation: upright;*/
    }
  }


/***************************************
Flex
****************************************/
.flx{
    display:flex;
}

.flx_r{
    display:flex;
    flex-direction: row;
}

.flx_c{
    display:flex;
    flex-direction: column;
}

.flx-c{
    display:flex;
    justify-content: center;
}

.flx-fs{
    display:flex;
    justify-content:flex-start;
}

.flx-fe{
    display:flex;
    justify-content:flex-end;
}

.flx-sa{
    display:flex;
    justify-content: space-around;
}

.flx-sb{
    display:flex;
    justify-content: space-between;
}

.flx-se{
    display:flex;
    justify-content: space-evenly;
}

.flx_r{
    display:flex;
    flex-direction: row;
}

.flx_c{
    display:flex;
    flex-direction: column;
}

.jc-c{justify-content: center;}
.jc-sa{justify-content: space-around;}
.jc-sb{justify-content: space-between;}
.jc-se{justify-content: space-evenly;}
.jc-fs{justify-content: flex-start;}
.jc-fe{justify-content: flex-end;}

.ali-c{align-items: center;}
.ali-st{align-items: stretch;}
.ali-fs{align-items: flex-start;}
.ali-fe{align-items: flex-end;}

.flxdir-rev{flex-direction: row-reverse;}
.flxdir-c-rev{flex-direction: column-reverse;}
.fwrap{flex-wrap: wrap;}
.fwrap-r{flex-wrap: wrap-reverse;}
.fnowrap{flex-wrap: nowrap;}

.f-child1{order:1;}
.f-child2{order:2;}
.f-child3{order:3;}
.f-child4{order:4;}
.f-child5{order:5;}

/***************************************
Grid
***************************************/

.gwrap {
    display: grid;
    grid-template-rows: 80px auto 100px;/*head:80px body:auto footer:100px*/
    grid-template-columns: auto 200px;/*main:auto leftside:200px*/
}

.gheader {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

.gmain {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.gsidebar {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.gfooter {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}


/****************************************
ローディング　画面
****************************************

#loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    z-index: 9999;
  }

  .loader,
  .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
  }
  .loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }


  @-webkit-keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
  }
  @keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
  }

**************************************/

/*************************************
background sample
**************************************/

/*固定バックグラウンドサンプル
.fixdbg{
width: 100%;
}
.fixdbg:before{
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../image/hanabi-bg.png);
    top: 0;
    left: 0;
    background-position: top center;
    z-index: -2;
    background-size: cover;
}
*/