@charset "utf-8";
/*　************************************

　　　　all.css

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





/*------------------------------------------------------------
  調整
------------------------------------------------------------*/
.m0p0{margin: 0px;padding:0;}


.mt1em{margin-top: 1em;}
.mt2em{margin-top: 2em;}
.mt3em{margin-top:3em;}
.mt4em{margin-top:4em;}
.mt5em{margin-top:5em;}

.mb1em{margin-bottom: 1em;}
.mb2em{margin-bottom: 2em;}
.mb3em{margin-bottom:3em;}
.mb4em{margin-bottom:4em;}
.mb5em{margin-bottom:5em;}


.mt-mb-em1{margin-top: 1em;margin-bottom:1em;}
.mt-mb-em2{margin-top: 2em;margin-bottom:2em;}
.mt-mb-em3{margin-top: 3em;margin-bottom:3em;}
.mt-mb-em4{margin-top: 4em;margin-bottom:4em;}
.mt-mb-em5{margin-top: 5em;margin-bottom:5em;}


.pt1em{padding-top: 1em;}
.pt2em{padding-top: 2em;}
.pt3em{padding-top:3em;}
.pt4em{padding-top:4em;}
.pt5em{padding-top:5em;}

.pb1em{padding-bottom: 1em;}
.pb2em{padding-bottom: 2em;}
.pb3em{padding-bottom:3em;}
.pb4em{padding-bottom:4em;}
.pb5em{padding-bottom:5em;}


.pt-pb-em1{padding-top: 1em;padding-bottom:1em;}
.pt-pb-em2{padding-top: 2em;padding-bottom:2em;}
.pt-pb-em3{padding-top: 3em;padding-bottom:3em;}
.pt-pb-em4{padding-top: 4em;padding-bottom:4em;}
.pt-pb-em5{padding-top: 5em;padding-bottom:5em;}




.opacity:hover{
  filter: alpha(opacity=70);
  -ms-filter: "alpha( opacity=70 )";
  -moz-opacity:0.7;
  opacity:0.7;}


.section {padding: 0;margin: 0;}
.section img{background-size: contain;vertical-align:top; vertical-align:bottom; margin: 0;padding: 0;}



#vert0,.vert0{vertical-align:top; vertical-align:bottom}
#vert,.vert{vertical-align:top; vertical-align:bottom; margin: 0;padding: 0;}
#cp{background-size: contain;margin:0; padding:0;float:left;clear:both;}





/* フォントの太さ */
.fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; }


.t-50{top: -50px !important;}

.c80{text-align: center;margin: 0 10% 0;width: 80%;}
.c90{text-align: center;margin: 0 5% 0;width: 90%;}
.c100{text-align: center;margin: 0 auto 0;width: 100%;}

.c-clear{clear:both}

.f-l{float:left;}
.f-r{float:right;}

.ss-font{font-size:80%;}
.s-font{font-size:90%;}
.l-font{font-size:110%;}
.ll-font{font-size:120%;}

.n-weit{font-weight:normal;}
.l-weit{font-weight:bold;}

.l-sider{text-align:left;}
.c-sider{text-align:center;}
.r-sider{text-align:right;}



/* テキストの位置 */
.taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; }



/* テキストの位置 縦方向の中央揃え IE8から使用可能  */
.table-center {
  display: table-cell;
 vertical-align: middle;
}


/* テキストの位置 上下中央　おススメ  */
.table-center2 {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* テキストの位置 縦方向の中央揃え IE11から使用可能  */
.flexiblebox {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */

    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}





/*******************************************************
//*テキスト　IMG　隙間対策 
*******************************************************/

.back-g { text-shadow: 1px 1px 5px #CFCFCF;;} /*文字の後ろに薄グレーぼかし */
.back-w { text-shadow: 0 0 5px #FFFFFF;} /*文字の後ろにしろぼかし */

#cover100,
.cover100 { /*縦横比は固定（画像の中心を常に確認。上下が切れて見える時もある） */
    background-size:cover;
}

#contain100,
.contain100 { /*縦横比は固定（表示領域が変更された場合でも、画像が全て表示される） */
    background-size:contain;
}

#sukima0{/*隙間対処上下0 */
vertical-align:top;
vertical-align:bottom;
}



/*******************************************************
//*文字の縦書き　中央
*******************************************************/

.tate {
  writing-mode: vertical-rl; /*縦書き*/
}



/*******************************************************
//* 改行位置　               一例
*******************************************************/

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



/*******************************************************
//*角丸
*******************************************************/
.kadomaru {
border-radius: 10px; /* CSS3草案 */ 
      -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ 
      -moz-border-radius: 10px; /* Firefox用 */
      overflow:hidden;
}


.kadomaru2  {　　　/*上だけ　*/
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    border-radius: 1em 1em 0 0 / 1em 1em 0 0;
    -webkit-border-radius:  1em 1em 0 0 / 1em 1em 0 0;
    -moz-border-radius:  1em 1em 0 0 / 1em 1em 0 0;
}


/*******************************************************
//*シャドー
*******************************************************/

.shadow{ /*横方向のずれ 下方向のずれ ぼかしの大きさ 影の広がり 影の色; */
  -webkit-box-shadow: 3px 3px 5px 0 #ccc; /* Safari, Chrome用 */
  -moz-box-shadow: 3px 3px 5px 0 #ccc; /* Firefox用 */
  box-shadow: 3px 3px 5px 0 #ccc; /* CSS3 */
}


.shadow1 {
      color: #333333;
      text-shadow:
            0px -1px #ffffff,
            1px 0px #fff<input type="<input type="number" name="" value="" placeholder="">" name="" value="" placeholder="">fff,
            0px 1px #ffffff,
            -1px 1px #ffffff,
}


/*******************************************************
//*グラデーション　Pinnar
*******************************************************/
.gradient01{
     display:block;
     width: 250px;
     height:250px;
    background: linear-gradient(to top, #10d7f1, #6b8aff);
}









/*******************************************************
//*透過
*******************************************************/
.toka{
   opacity: .5;
 -webkit-opacity: .5;
 -moz-opacity: .5;
 filter: alpha(opacity=50); /* IE lt 8 */
 -ms-filter: “alpha(opacity=50)”; /* IE 8 */
}


/*  背景のみ透過 */
.toka-back{
background: rgba(255,255,255,0.5);
｝


/*******************************************************
//*線
*******************************************************/

/*　下にホワイト */
hr.hr-white {
  border-top: 1px solid #333;
  border-bottom: 1px solid #fff;
}

/*　下に影 */
hr.hr-shadow {
  height: 10px;
  border: 0;
  box-shadow: 0 10px 10px -10px #333 inset;
}


/*　左右が消える */ 
hr.hr-no {
  height: 1px;
  background-image: -webkit-linear-gradient(left, #fff, #CEB397, #fff);
  background-image: -moz-linear-gradient(left, #fff, #CEB397, #fff);
  background-image: -ms-linear-gradient(left, #fff, #CEB397, #fff);
  background-image: -o-linear-gradient(left, #fff, #CEB397, #fff);
  margin: 0 4% 1em 4%;
  width: 92%;
  }



/* 一文字目だけ装飾を変える */

.dai-f:first-letter {
font-size: 2em;
color: #7172ac;
}



/* 吹き出しicon　*/
.hukidasi {
position: relative;/*相対位置*/
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
}

.hukidasi:before{ font-family: "Font Awesome 5 Free";/*忘れずに*/
content: "\f075";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}




/*******************************************************
//*回転系
*******************************************************/

/* 縦回転 */
.rotateY {
      color:#FFF;
      -moz-transition: -moz-transform 1s linear;
      -webkit-transition: -webkit-transform 1s linear;
      -o-transition: -o-transform 1s linear;
      -ms-transition: -ms-transform 1s linear; 
      transition: transform 1s linear; 
}
.rotateY:hover {
      -moz-transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      transform: rotateY(360deg);
}


/* 横回転 */
.rotateX {
      color:#FFF;
      -moz-transition: -moz-transform 1s linear;
      -webkit-transition: -webkit-transform 1s linear;
      -o-transition: -o-transform 1s linear;
      -ms-transition: -ms-transform 1s linear; 
      transition: transform 1s linear; 
}
.rotateX:hover {
      -moz-transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      transform: rotateY(360deg);
}







/*******************************************************
//*下からふわっとでてくる
*******************************************************/  

.fade-up {
  transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}


/*******************************************************
//*ふわっとでてくる                          .fadeInDown
*******************************************************/ 
#animation {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #ff0000;
}

.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); }
}




/*******************************************************
//*下からふわっとでてくる2
*******************************************************/ 

.fade-in  {
  animation-duration: 2s;
  animation-name: SlideUp;
  /*animation-iteration-count: infinite; 無限*/
}

/*下から上*/
@keyframes SlideUp {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}

/*******************************************************
//*上からふわっとでてくる
*******************************************************/ 

.fade-down {
  animation-duration: 2s;
  animation-name: SlideDown;
  /*animation-iteration-count: infinite; 無限*/
}

/*上から下*/
@keyframes SlideDown {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* Y軸方向に-50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}


}


/*******************************************************
//*右からふわっとでてくる
*******************************************************/ 

.fade-left {
  animation-duration: 2s;
  animation-name: RightToLeft;
  /*animation-iteration-count: infinite; 無限*/
}

/*右から左*/
@keyframes RightToLeft {
0% {
    opacity: 0;/* 透明 */
    transform: translateX(50px);/* X軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に0px */
}
}



/*******************************************************
//*ズームイン
*******************************************************/ 
#animation-zoom {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #ff0000;
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1; }}

@keyframes zoomIn {
  0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  50% { opacity: 1; }
}


/*******************************************************
//*　枠内でズームイン
*******************************************************/
.scale {
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.scale img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}




/*******************************************************
//*　ページTOP
*******************************************************/ 

/*  PAGE TOP　 */
#pageTop2 {

  position: fixed;
  bottom: 3em;
  right: 3em;
}

 

#pageTop2 a {
  display: block;
  z-index: 999;
  padding: 1em 0.5em 0em 0.5em;
  border-radius: 40px;
  width: 3em;
  height: 3em;
  background-color: #77798b;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}

 

#pageTop2 a:hover {
  text-decoration: none;
  opacity: 0.7;
}