@charset "UTF-8";

/*===============================================
 COMMON.CSS     [共通]
===============================================*/

.sp {display: none; }


@media screen and (max-width: 798px) {
  .pc {display: none; }
  .sp {display: block; } 
}



/* -------------------------------
スタイルの初期化 */
body,
a,
div,
pre,
p,
blockquote,
b,
img form,
fieldset,
input,
textarea,
select,
option,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
table,
th,
td,
embed,
object,
figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }


/* ///  ARROW  ///////////////////////　*/


a { text-decoration: none;color: #333; /*ff4500*/}
a:hover { text-decoration: underline;  color: #d01f26;  }



a img {
    border: 0;
    outline: none; }

img {
  vertical-align: top;
  max-width: 100%; 
  height:auto;
}

ul,
ol {list-style-type: none; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }



.set-clear{clear: both;}


/* ///  フォントサイズ  ///////////////////////　*/
.fzb1_txt { font-size: 105% !important; }
.fzb2_txt { font-size: 110% !important; }
.fzb3_txt { font-size: 140% !important; }
.fzb4_txt { font-size: 150% !important; }
.fzs1_txt {font-size: 95% !important; }
.fzs2_txt { font-size: 80% !important; }


/* 太文字 */
.font-big{font-size: 130%;}

/* 小さい文字 */
.font-small{font-size: 86%;}

/* 太文字 */
.strong_txt {font-weight: bold; }
  
/* インデント */
.indent-1 {
    padding-left: 1rem;
    text-indent: -1rem;
}

/* 字詰め */
.f-tyosei {
font-feature-settings: "palt";
}

/* ///  ボーダー  ///////////////////////　*/
.border_dot {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px dotted #f4f4f4; }


/* ///  調整  ///////////////////////　*/
/* ========= margin 
.m0 {
  margin: 0rem !important; }
  @media screen and (max-width: 798px) {
    .m0 {
      margin: 0rem !important; } }
========== */


.font18rem{font-size:1.8rem;}

.font130{font-size:130%;}


/*------------------------------------------------------------
  向き
------------------------------------------------------------*/

.t-center {text-align: center;}
.t-right {text-align: right;}
.t-left {text-align:left;}

.t_bold {font-weight: bold; }

/*------------------------------------------------------------
  マーカー
------------------------------------------------------------*/

/* 薄黄マーカー　*/
    .marker {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(0%, #fdf3d1));
      background: -webkit-linear-gradient(transparent 60%, #fdf3d1 0%);
      background: -o-linear-gradient(transparent 60%, #fdf3d1 0%);
      background: linear-gradient(transparent 60%, #fdf3d1 0%); }


  @media screen and (max-width: 798px) {
    .marker {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, transparent), color-stop(0%, #fdf3d1));
    background: -webkit-linear-gradient(transparent 20%, #fdf3d1 0%);
    background: -o-linear-gradient(transparent 20%, #fdf3d1 0%);
    background: linear-gradient(transparent 20%, #fdf3d1 );
} }


/* イエローマーカー　*/
.yello_line {background:linear-gradient(transparent 60%, #ffff00 0%) ;}

/* ピンクーマーカー　*/
.pink_line {background:linear-gradient(transparent 60%, #ffdaea 0%) ;}

/* ホワイトーマーカー　*/
.white_line {background:linear-gradient(transparent 60%, #ffffff 0%) ;}


/*------------------------------------------------------------
  COLOR
------------------------------------------------------------*/

.red_txt {color: #d01f26;}
.pink_txt {color: #e55d8a; }
.white_txt {color: #ffffff; }
.green_txt {color: #206229; }


/* *******BG color ******** */
.bg_beige {background: #F4f4f4; }
.col-white{background: #fff;  /*overflow: hidden;*/}
.col-yr{background: #F3F3E9; /*overflow: hidden;*/}
.col-gr2{background: #f4f4f4; /*overflow: hidden;*/}
.col-gr3{background: #A1C5AB; /*overflow: hidden;*/}
.col-blue{background: #00498f; /*overflow: hidden;*/ }


 /* ///  ARROW  ///////////////////////　*/
  a.arrow {
    position: relative;
    padding: 0 0 0 1.5rem;
    display: inline-block; }
    a.arrow:before {
      display: block;
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: 6px;
      left: 0;
      border: 7px solid transparent;
      border-left-color: #6fb62c; }
    @media screen and (max-width: 798px) {
      a.arrow {
        position: relative;
        padding-left: 1rem; }
        a.arrow:before {
          display: block;
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          top: 6px;
          left: 0;
          border: 6px solid transparent;
          border-left-color: #6fb62c; } 
        }


/*------------------------------------------------------------
  anime
------------------------------------------------------------*/

/* ///  横回転 /////////　*/

.rotateX {
  color:#FFF;
  -moz-transition: -moz-transform 2s linear;
  -webkit-transition: -webkit-transform 2s linear;
  -o-transition: -o-transform 2s linear;
  -ms-transition: -ms-transform 2s linear; 
  transition: transform 2s linear; 
}
.rotateX:hover {
  -moz-transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
}


/* ///  ふわ2 /////////　*/

.huwa2  a img {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.huwa2 a:hover img {opacity: 0.6;filter: alpha(opacity=60);}
 



/* ///  ふわふわ /////////　*/

.fuwafuwa {
  -webkit-animation-name:fuwafuwa; /*  */
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count:infinite;
  /*-webkit-animation-direction:alternate;*/
  -webkit-animation-timing-function:ease;

  -moz-animation-name:fuwafuwa;
  -moz-animation-duration:5s;
  -moz-animation-iteration-count:infinite;
  /*-moz-animation-direction:alternate;*/
  -moz-animation-timing-function:ease;
}

@-webkit-keyframes fuwafuwa {
  0% {-webkit-transform:translate(0, 0);}
  50% {-webkit-transform:translate(0, -8px);}
  100% {-webkit-transform:translate(0, 0);}
}

@-moz-keyframes fuwafuwa {
  0% {-moz-transform:translate(0, 0);}
  50% {-moz-transform:translate(0, -8px);}
  100% {-moz-transform:translate(0, 0);}
}

@media screen and (max-width: 960px) {
@-webkit-keyframes fuwafuwa {
  0% {-webkit-transform:translate(0, 0);}
  50% {-webkit-transform:translate(0, -2px);}
  100% {-webkit-transform:translate(0, 0);}
}

@-moz-keyframes fuwafuwa {
  0% {-moz-transform:translate(0, 0);}
  50% {-moz-transform:translate(0, -2px);}
  100% {-moz-transform:translate(0, 0);}
}
}



/* ///  波紋 /////////　*/
.btnripple{
  position: relative;
  margin:0 auto;
  outline: none;
}

.btnripple:hover::before {
    content: '';
    position: absolute;
    left:30%;
    top:0;
    /*波形の形状*/
    border: 1px solid #333;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity:1;
    animation:1s circleanime forwards;
}

@keyframes circleanime{
  0%{transform: scale(0);}
  100%{ transform:scale(2); opacity: 0;}
}


/* ///  Shine  /////////　*/
.shine {position: relative;}

.shine a::before{
  position: absolute;
  top: 0;
  left: -300%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.shine a:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}



/* ///  上からフェードイン  animation   /////////　*/
#animation {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #e55d8a;
text-align: center;
}
  @media screen and (max-width: 798px) {
    #animation  {
      margin: 1rem 0 2rem;}
       }


/* ///  上からフェードダウン fadeInDown   /////////　*/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




/* ///  上からフェードイン fadeIn  /////////　*/
.fadein {
    margin: 0 auto 0rem;
    padding: 0;
    font-family: serif;
    animation: fadeIn 6s ease 1s 1 normal;
    overflow: hidden;
    line-height: 1.8;
    }

    @keyframes fadeIn { /*animation-nameで設定した値を書く*/
        0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
        100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
    }