@charset "UTF-8";


/*===============================================
画面の横幅が768px以上（PC用）

(max-width: 767.99px) (max-width: 959.99px)
(max-width: 1024.99px) (max-width: 1059.99px)
===============================================
画面の横幅が約767.99pxまで（SP用）

(min-width: 376px)(max-width: 375.99px)
(min-width: 376px)(max-width: 567.99px)
(min-width: 568px)
(max-width: 959.99px)
===============================================*/

*{box-sizing: border-box;}


html {
  font-size: 62.5%;  /*ベースを10px*/
  scroll-behavior: smooth;  /*スムーズスクロール*/
   }


body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  width: 100%;
  line-height: 1.4;
  color: #222222;
  background: #fff; }

a { text-decoration: none; color: #f68800;transition: 1.0s; }
a:hover {text-decoration: underline; color: #F8B500;}

a img { border: 0; outline: none; }
a:hover img {border: 0; outline: none; opacity: 0.9;transition: 1.0s;}

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


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

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


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

@media screen and (max-width: 767.99px) {
  .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; }



.clear_both{clear: both;}
.clear_none{clear: none;}

.dis_none { display: none;}


/*------------------------------------------------------------
  width調整
------------------------------------------------------------*/
.wi100 {width: 100%!important; }
.wi90 {width: 90%!important; }
.wi80 {width: 80%!important; }
.wi70 {width: 70%!important; }
.wi60 {width: 60%!important; }
.wi50, .width50 {width: 50%!important; }
.wi40, .width40 {width: 40%!important; }
.wi30, .width30 {width: 30%!important; }
.wi25 {width: 25%!important; }
.wi20 {width: 20%!important; }
.wi10 {width: 10%!important; }


.maxwi1100 {max-width: 1100px!important; }
.maxwi1000 {max-width: 1000px!important; }
.maxwi900 {max-width: 900px!important; }
.maxwi800 {max-width: 800px!important; }
.maxwi700 {max-width: 700px!important; }
.maxwi650 {max-width: 650px!important; }


/*------------------------------------------------------------
  padding調整
------------------------------------------------------------*/
.p0 {padding: 0!important; }
.p1 {padding: 1rem!important; }
.p2 {padding: 2rem!important; }
.p3 {padding: 3rem!important; }

.pt0 {padding-top: 0rem!important; }
.pt1 {padding-top: 1rem!important; }
.pt2 {padding-top: 2rem!important; }
.pt3 {padding-top: 3rem!important; }
.pt4 {padding-top: 4rem!important; }
.pt5 {padding-top: 5rem!important; }
.pt10 {padding-top: 10rem!important; }
.pt15 {padding-top: 15rem!important; }

.pb0 {padding-bottom: 0rem!important; }
.pb1 {padding-bottom: 1rem!important; }
.pb2 {padding-bottom: 2rem!important; }
.pb3 {padding-bottom: 3rem!important; }
.pb4 {padding-bottom: 4rem!important; }
.pb5 {padding-bottom: 5rem!important; }
.pb10 {padding-bottom: 10rem!important; }
.pb15 {padding-bottom: 15rem!important; }



@media screen and (max-width: 767.99px) {
.pt1 {padding-top: 0.3rem!important; }
.pt2 {padding-top: 1rem!important; }
.pt3 {padding-top: 1.5rem!important; }
.pt4 {padding-top: 2rem!important; }
.pt5 {padding-top: 2.5rem!important; }
.pt10 {padding-top: 5rem!important; }
.pt15 {padding-top: 7rem!important; }

.pb1 {padding-bottom: 0.3rem!important; }
.pb2 {padding-bottom: 1rem!important; }
.pb3 {padding-bottom: 1.5rem!important; }
.pb4 {padding-bottom: 2rem!important; }
.pb5 {padding-bottom: 2.5rem!important; }
.pb10 {padding-bottom: 5rem!important; }
.pb15 {padding-bottom: 7rem!important; }
}


/* foot padding用 */
.pb80px {
  padding-bottom: 5em!important; }
@media screen and (max-width: 959.99px) {.pb80px {padding-bottom: 7em!important; }}
@media screen and (max-width: 767.99px) {.pb80px {padding-bottom: 3em!important; }}


.ptb0 {
  padding-top: 0!important;
  padding-bottom: 0!important;}


.ptb3 { padding-top: 3rem!important;padding-bottom: 3rem!important; }
@media screen and (max-width: 767.99px) {
.ptb3 {padding-top: 1.5rem!important;padding-bottom: 1.5rem!important; }
}

.ptb5 { padding-top: 5rem!important;padding-bottom: 5rem!important; }
@media screen and (max-width: 767.99px) {
.ptb5 {padding-top: 2rem!important;padding-bottom: 2rem!important; }
}

.prl1 {padding-right: 1%!important;padding-left: 1%!important; }
.prl2 {padding-right: 2%!important;padding-left: 2%!important; }
.prl3 {padding-right: 3%!important;padding-left: 3%!important; }
.prl4 {padding-right: 4%!important;padding-left: 4%!important; }





/*------------------------------------------------------------
  margin調整
------------------------------------------------------------*/
.m0 {margin: 0!important; }
.m1 {margin: 1rem!important; }
.m2 {margin: 2rem!important; }
.m3 {margin: 3rem!important; }

.mt0 {margin-top: 0!important; }
.mt1 {margin-top: 1rem!important; }
.mt2 {margin-top: 2rem!important; }
.mt3 {margin-top: 3rem!important; }
.mt4 {margin-top: 4rem!important; }
.mt5 {margin-top: 5rem!important; }

.mb0 {margin-bottom: 0!important; }
.mb1 {margin-bottom: 1rem!important; }
.mb2 {margin-bottom: 2rem!important; }
.mb3 {margin-bottom: 3rem!important; }
.mb4 {margin-bottom: 4rem!important; }
.mb5 {margin-bottom: 5rem!important; }
.mb6 {margin-bottom: 6rem!important; }
.mb7 {margin-bottom: 7rem!important; }

@media screen and (max-width: 767.99px) {
.mt1 {margin-top: 0.3rem!important; }
.mt2 {margin-top: 1rem!important; }
.mt3 {margin-top: 1.5rem!important; }
.mt4 {margin-top: 2rem!important; }
.mt5 {margin-top: 2.5rem!important; }

.mb1 {margin-bottom: 0.3rem!important; }
.mb2 {margin-bottom: 1rem!important; }
.mb3 {margin-bottom: 1.5rem!important; }
.mb4 {margin-bottom: 2rem!important; }
.mb5 {margin-bottom: 2.5rem!important; }
.mb6 {margin-bottom: 3rem!important; }  
.mb7 {margin-bottom: 3.5rem!important; }
}


.mrl1 {margin-right: 1%!important;margin-left: 1%!important; }
.mrl2 {margin-right: 2%!important;margin-left: 2%!important; }
.mrl3 {margin-right: 3%!important;margin-left: 3%!important; }
.mrl4 {margin-right: 4%!important;margin-left: 4%!important; }
.mrl5 {margin-right: 5%!important;margin-left: 5%!important; }
.mrl10 {margin-right: 10%!important;margin-left: 10%!important; }
.mrl15 {margin-right: 15%!important;margin-left: 15%!important; }

@media screen and (max-width: 767.99px) {
.mrl1 {margin-right: 0.5%!important;margin-left: 0.5%!important; }
.mrl2 {margin-right: 1%!important;margin-left: 1%!important; }
.mrl3 {margin-right: 1.5%!important;margin-left: 1.5%!important; }
.mrl4 {margin-right: 2%!important;margin-left: 2%!important; }
.mrl5 {margin-right: 2.5%!important;margin-left: 2.5%!important; }
.mrl10 {margin-right: 3%!important;margin-left: 3%!important; }
.mrl15 {margin-right: 5%!important;margin-left: 5%!important; }
}

.mrlauto{margin-right: auto!important;margin-left: auto!important;}


/*------------------------------------------------------------
  font調整
------------------------------------------------------------*/
/* ///  フォントサイズ  ///////////////////////　*/

.f-small{font-size: small !important; } 
.f-smaller{font-size: smaller !important; }
.f-large{font-size: large !important; }


.fon100 {font-size: 100% !important; }
.fon105 {font-size: 105% !important; }
.fon110 {font-size: 110% !important; }
.fon120 {font-size: 120% !important; }
.fon130 {font-size: 130% !important; }
.fon140 {font-size: 140% !important; }
.fon150 {font-size: 150% !important; }
.fon160 {font-size: 160% !important; }
.fon95 {font-size: 95% !important; }
.f0n80 {font-size: 80% !important; }
.f0n70 {font-size: 70% !important; }
.f0n60 {font-size: 60% !important; }
@media screen and (max-width: 767.99px) {
.fon150 {font-size: 80% !important;
}}
@media screen and (max-width: 375.99px) {
.fon150 {font-size: 75% !important;
}}
.ssss-text{font-size:50% !important; }
.sss-text{font-size:60% !important; }
.ss-text{font-size:75% !important; }
.s-text{font-size:85% !important; }
.l-text{font-size:108% !important; }
.ll-text{font-size:115% !important; }
.lll-text{font-size:130% !important; }
.llll-text{font-size:150% !important; }
.lllll-text{font-size:170% !important; }
.llllll-text{font-size:200% !important; }


/* 基本文字 */
.txt {
font-size: 16px;
line-height: 1.5;
}

/* 太文字 */
.strong_txt {font-weight: bold!important; }
.strong_stxt {font-weight: 500; }
.strong_0txt {font-weight: normal; }


/* インデント */
.indent-1 {
    padding-left: 1em;
    text-indent: -1em;
}

.indent-kome {
  padding-left: 1em;
  text-indent: -1em; }
.indent-kome::before {
  content: "※"; }


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

/* 字あけ */
.l-space{  letter-spacing: 0.2rem;}

/* 明朝 */
.f-tmincho {font-family: serif;}

/* NOTO明朝 */
.ff_Noto {font-family: 'Noto Serif JP', serif;}

/* normal */
@font-face {
  font-family: "Noto Serif JP", serif;";
  src: url("../NotoSerifJP-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

/* semibold  */
/*@font-face {
  font-family: "Noto Serif JP", serif;";
  src: url("../NotoSerifJP-SemiBold.otf");
    font-weight: bold;
  font-style: normal;
}
*/

/* bold  */
/*@font-face {
  font-family: "font-family: 'Noto Serif JP', serif;";
  src: url("../NotoSerifJP-Bold.otf") format("truetype");
    font-weight: bold;
  font-style: normal;
}*/





/* 影 */
.filt50bk { filter: drop-shadow(0.5px 1px 0.5px #55555550);}
.filt80bk { filter: drop-shadow(1px 1px 0px #55555580);}
.filt50wh { filter: drop-shadow(0.5px 1px 0.5px #ffffff50);}
.filt100wh { filter: drop-shadow(1px 1px 0 #fff);}

/* 白 影 薄め　*/
.white-shadow{filter: drop-shadow(1px 2px 2px #ffffff70);}
/* 黒 影 薄め　*/
.black-shadow{filter: drop-shadow(3px 2px 2px #00000015);}
/* 紫 影 薄め　*/
.purple-shadow{filter: drop-shadow(4px 2px 2px #8386c010);}


/* ///  テキスト位置  ///////////////////////　*/
.f-left {float: left;}
.f-right {float: right;}
.f-initial {float: initial;}
.f-unset {float: unset;}



/*------------------------------------------------------------
POSITION DISPLAY
------------------------------------------------------------*/
.posi_re {position: relative; }
.posi_ab {position: absolute; }
.posi_fi {position: fixed; }
.posi_sta {position: static; }
.posi_sti {position: sticky; }
.posi_sti {position: sticky; }
.posi_inh {position: inherit; }
.posi_ini {position: initial; }
.posi_re {position: revert; }
.posi_un {position: unset; }
.is_none { display: none; }




/*------------------------------------------------------------
  FLEX
------------------------------------------------------------*/
.flex {
  display: flex;
  flex-wrap: wrap; }
@media screen and (max-width: 767.99px) {
.flex {
   display: block;
}}


.disc{list-style:disc;}
.flex{display:flex;flex-wrap: wrap;}
.justify_center {justify-content: center;}
.justify_between{justify-content: space-between;}
.justify_around {justify-content: space-around;}
.align_start   {align-items: flex-start;}
.align_end     {align-items: flex-end;}
.align_center  {align-items: center;}
.align_baseline{align-items: baseline;}

.radius1{border-radius:1rem;}


/*------------------------------------------------------------
  Z-INDEX
------------------------------------------------------------*/
.index-1{z-index: -1;}
.index1{z-index: 1;}
.index10{z-index: 10;}
.index100{z-index: 100;}
.index1000{z-index: 1000;}


/*------------------------------------------------------------
  向き
------------------------------------------------------------*/
.t-center {text-align: center!important;}
.t-right {text-align: right!important;}
.t-left {text-align:left!important;}

.v-top{vertical-align: top!important;}
.v-mid{vertical-align: middle!important;}
.v-bottom{vertical-align: bottom!important;}


.flip-horizontal {transform: scale(-1, 1);} /* 左右反転 */
.flip-vertical {transform: scale(1, -1);} /* 上下反転 */

/*------------------------------------------------------------
  COLOR
------------------------------------------------------------*/
.gold_txt {color:#d8b94d!important;}
.pink_txt {color: #e55d8a!important;}
.pinkred_txt {color: #f54c83!important;}
.red_txt {color: #e50012!important;}
.boldeaux_txt {color: #ad0021!important;}
.white_txt {color: #ffffff!important;}
.green_txt {color: #7d991c!important;}
.r-green_txt {color: #6FBA2C!important;}
.m-green_txt {color: #50711b!important;}
.m2-green_txt {color: #326d0c!important;}
.brown_txt {color: #4d4d4d!important;}
.y-orange_txt {color: #e0ae8d!important;}
.orange_txt {color: #fcaf17!important;}
.yello_txt {color:#ffff00!important;}
.navy_txt {color:#33366a!important;}
.gree_txt {color:#333!important;}


/* *******BG color ******** */

.col-white{background: #fff;}
.col-yr{background: #F3F3E9;}
.col-gr2{background: #f4f4f4;}
.col-gr3{background: #A1C5AB;}
.col-gr4{background: #6FBA2C!important;}
.col-pink {background: #f54c83!important;}
.col-red {background: #e50012;}
.col-boldeaux {background: #ad0021;}
.col-blue{background: #00498f;}
.col-navy{background: #33366a;;}
.col-navy10{background: #33366a10;}
.col_gree{background: #333!important;}
.col_orange{background: #fcaf17;}
.col-no{background: none!important;}


/* *******ohnoya color ******** */
.onoya-green_txt{color: #71bd43!important;}
.onoya-g_txt{color: #6FBA2C!important;}
.onoya-p_txt{color: #8E8BC2!important;}
.onoya-o_txt{color: #F8B500!important;}
.col-onoya-green{background: #71bd43!important;}
.col-onoya-g{background: #6FBA2C!important;}
.col-onoya-p{background: #8E8BC2!important;}
.col-onoya-o{background: #F8B500!important;}


.col-none{background: none!important;}


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

/* 薄黄マーカー　*/
.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: 767.99px) {
.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%, #ffffff80 0%) ;}

/* グリーンーマーカー　*/
.green_line {background:linear-gradient(transparent 60%, #dcf09360 0%) ;}

/* オレンジーマーカー　*/
.orange_line {background:linear-gradient(transparent 90%, #F8B50080 0%) ;}

.brown_line {background:linear-gradient(transparent 90%, #ffa50030 0%) ;}
.brown2_line {background:linear-gradient(transparent 90%, #d5a25030 0%) ;}
.green_line {background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,0,0) 15%,rgba(255,255,0,0) 60%,rgba(226,245,204,0.8) 85%,rgba(255,255,255,0) 100%); 

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


/* 指マーク */
.handpointer{cursor:pointer}
.handpointer:hover {opacity:0.7}



/*------------------------------------------------------------
  ボーダー
------------------------------------------------------------*/

.no-border{border: none!important; }
.gray-boder-b{border-bottom: 1px solid #e7e7e7;}
.gray-boder{border: 1px solid #cbc9c9;}
.naby-boder-b{border-bottom: 5px solid #33366a!important;}
.yello-boder-t{border-top: 1px solid  #fff000;}
.yello-boder-b{border-bottom: 1px solid  #fff000;}
.pink-boder-b{border-bottom: 1px solid  #f9d7f3;}


.border_line { /* 基本ボーダー枠 */
padding: 20px;
border: 2px solid #f2f2f2;
margin-bottom: 20px; }


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


.radius1{border-radius:1rem;}
.radius0{border-radius: 0!important;}


/* 金のボーダー　*/
.gold-boder{
    border-bottom: 3px solid #d4b54b;
    border-image: linear-gradient(to right, #f3e385 0%, #d4b54b 50%,#f3e385 100% );
    border-image-slice: 1;
    border-collapse: collapse; /* 隙間埋め */
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
}


/* 金のボーダー2 左右透過　*/
.gold-boder{
    padding: 0 2%;
    border-bottom: 3px solid #d4b54b;
    border-image: linear-gradient(to right, #ffffff00 0%, #f3e385 25%, #d4b54b 50%, #f3e385 75%, #ffffff00 100% );
    border-image-slice: 1;
    border-collapse: collapse; /* 隙間埋め */
}

/* 大きなドットの背景　*/
.big-dot2{
background-image:
radial-gradient(#ccc 20%, transparent 20%);
background-size: 16px 16px;
}


/* 両サイドにボーダー　*/
.side-shadow{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100px;
    background-color: #fff;
}

.side-shadow::before,
.side-shadow::after{
    content:"";
    position: absolute;
    z-index: -1;
    bottom: 10px;
    display: block;
    width: 50%;
    height: 50%;
    box-shadow: 0 10px 5px rgba(0,0,0,.3);
}

.side-shadow::before{
    left: 5px;
    transform:rotate(-3deg);
}

.side-shadow::after{
    right: 5px;
    transform:rotate(3deg);
}


.border-r1{
border-radius: 1rem!important;
}

/*------------------------------------------------------------
  透過
------------------------------------------------------------*/
/*白にぼかす　*/
.bg-h {
  /*background-image: url(---.jpg);*/
  background-color: rgba(255,255,255,0.5);
  background-blend-mode: lighten;
}



.bg-b {
  /*background-image: url(---.jpg);*/
  background-color: rgba(0,0,0,0.5);
  background-blend-mode: darken;
}


/*------------------------------------------------------------
  HR
------------------------------------------------------------*/
hr.stripe{
    background: repeating-linear-gradient(45deg, #f9d7f300, #f9d7f300 5px, white 5px, white 10px);
    height: 5px;
    padding: 0.4rem 0;
    margin: 0.5rem 0;
    border: none;
}



/* ///  HR アニメ /////////　*/
.line-anime {
  display: block;
  position: relative;
}
.line-anime::after {
  background: linear-gradient(to right, #ad0021 0%,#e50012 50%,#42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line-anime.is-animated::after {
  width: 100%;
}

/* ///  HR 両脇フェード /////////　*/

.kubomi {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}


/* ///  HR CUT LINE /////////　*/
.hasami {
  border-top: 1px solid #ccc;
  height: 1em;
  text-align: center;
  overflow: visible;
  margin: 1rem auto 1.5rem;
}
.hasami::after {
  content: "\002702";
  background: #fff;
  color: #ccc;
  display: inline-block;
  height: 1em;
  line-height: 1em;
  position: relative;
  top: -0.75em;
  padding: 0 1em;
}


/*------------------------------------------------------------
  スクロールバー
------------------------------------------------------------*/

.scroll_bar{
   background-color: #fff;
   overflow-y: scroll;
   width: 100%;
   height: 80vh;
}
.scroll_bar::-webkit-scrollbar{
   width: 14px;}
@media screen and (max-width: 767.99px) {
.scroll_bar::-webkit-scrollbar{
    width: 20px;
}}

.scroll_bar::-webkit-scrollbar-track{
   background-color: #e5001210;
}
.scroll_bar::-webkit-scrollbar-thumb{
    background-color: #E91E63;
}



/*------------------------------------------------------------
  閉じる
------------------------------------------------------------*/

.close_box{
  margin-top: 0.5rem;
  width: 100%;
  height: auto;
  text-align: center;
}

.popup-close {
cursor: pointer;
  right: 0;
}

.close_box a{
    transition: 0.6s ease;
}

.close_box a.close_btn{
  font-weight: normal;
  color: #fff !important;
  text-align: center;
  display: block;
  font-size: smaller;
  text-decoration: none;
}


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



/*------------------------------------------------------------
  ▲上1　▶右2　▶左3　▼下4
------------------------------------------------------------*/

.triangle,
.triangle1,
.triangle2,
.triangle3,
.triangle4 {position: relative;}


.triangle{ /* ▲上 */
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #e50012;
}

.triangle1{ /* ▶右 */
  position: absolute;
  content: "▼";
  color: #fff;
  top: calc(50% - 0.8em);
  right: 3%;
  border-radius: 50%;
  width: 2rem;
  text-align: center;
  font-size: 90%;
  font-weight: bold;
  transform: rotate(-90deg);
  line-height: initial;
}


.triangle2{ /* ▶左 */
  position: absolute;
  content: ">";
  width: 0;
  height: 0;
  left: calc(15% - 0.5em);
  top: 17%;
}


.triangle3{ /* 下 小 */
.triangle3::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 30px solid #EEE;
  border-right: 5vw solid transparent;
  border-left: 5vw solid transparent;
  /* transform: rotate(-90deg); */
}


.triangle4::after {/* 下 大 */
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 4rem 20vw 0px 20vw;
    border-color: #f5f5f5 transparent transparent transparent;
    bottom: -3rem;
    margin: 0 auto;
    width: 0;
    height: 0;
    left: 0;
    right: 0;
    z-index: 500;
}

/* 　単品　中　配置 */
.sankaku {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 39.5px 0 39.5px;
    border-color: #8386c0 transparent transparent transparent;
}

/* 　単品　中　配置　大 */
.sankaku-large {
    margin: 1rem auto 3rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 36px 80px 0 80px;
    border-color: #8588c270 transparent transparent transparent;
}



/*------------------------------------------------------------
  吹き出し
------------------------------------------------------------*/
.balloon {
    position: relative;
    margin: -1em 0;
    padding: 0 5px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    background: #71bd43;
    border-radius: 50%;
    box-sizing: border-box;
    left: -0.2rem;}
 @media screen and (max-width: 767.99px) {
.balloon {
    width: 40px;
    height: 40px;
    line-height: 40px;
}}


.balloon2 { /* 改行小文字2付き */
    position: relative;
    margin: -1em 0;
    padding: 2px 5px;
  width: 60px;
  height: 60px;
    line-height: 1;
    text-align: center;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    background: #71bd43;
    border-radius: 50%;
    box-sizing: border-box;
    left: -0.2rem;}
 @media only screen and (min-width: 768px) and (max-width: 868.99px) {
.balloon2 {
    width: 90px;
    height: 56px;
    line-height: 1;
    margin: -0.7em 0;
    left: -7%;
}}
 @media screen and (max-width: 767.99px) {
.balloon2 {
  margin: -1.4em 0;
}}


.balloon::before,
.balloon2::before{
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #71bd43;
  z-index: 0;}
 @media screen and (max-width: 767.99px) {
.balloon::before,
.balloon2::before{
  bottom: -17px;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #71bd43;
}}



.balloon3 { /* 改行小文字3付き */
  position: relative;
  margin: -1em 0;
  padding: 0 5px;
  width: 60px;
  height: 60px;
  line-height: 4;
  text-align: center;
  color: #FFF;
  font-size: 14px;
  font-weight: bold;
  background: #f63b00;
  border-radius: 50%;
  box-sizing: border-box;
  left: -0.2rem;}
 @media only screen and (min-width: 768px) and (max-width: 868.99px) {
.balloon3 {
    width: 90px;
    height: 56px;
    line-height: 4;
    margin: -0.7em 0;
    left: -3%;
}}
 @media screen and (max-width: 767.99px) {
.balloon3 {
  line-height: 3.8;
  margin: -2.4em 0;
  font-size: 16px;
}}


.balloon3::before{
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #f63b00;
  z-index: 0;}
 @media screen and (max-width: 767.99px) {
.balloon3::before{
  bottom: -17px;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #f63b00;
}}



/*------------------------------------------------------------
  \  /
------------------------------------------------------------*/
.cap-sura {
  margin: 2rem auto;
  width: 100%;
  line-height: 1.8;
  font-size: 100%;
  color: #333;
  text-align: center;
  font-weight: bold;
  position: relative;
}

.cap-sura::before,
.cap-sura::after {
  content: "";
  /*position: absolute; ↑が固定幅なら表示*/
  top: 40%;
  display: inline-block;
  background: #555;
  width: 30px;
  height: 1px;
  vertical-align: middle;  /* absolute 表示しないなら表示*/
}

.cap-sura::before{
  transform: rotate(70deg);
  margin-left: 0;
}

.cap-sura::after{
  transform: rotate(-70deg);
  margin-right: 0;
}


/*------------------------------------------------------------
  inview.js使用　スクロールでフェードイン   
------------------------------------------------------------*/
.js-fadeup {
  opacity: 0; 
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .6s, transform .6s; 
}

.js-fadeup.inview {
  opacity: 1; 
  transform: translateY(0); /* 30px上に移動する */ /*横の場合 translateX*/
  transition-delay: .4s; /* フェード開始を0.5秒遅らせる */
}








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


/* /// 動き /////////　*/
.trans{
  transition: 1s ease-in-out;
}


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

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



/* swing 少しかぶせて上に配置 */
.swing {
  margin: -15em 15% 0;
  animation: swing linear 7s infinite;
  transform-origin: center 70% 0;
  display: block;
  /*float: left;*/
  width: 70%;
  z-index: 10;}
 @media screen and (max-width: 1024.99px) {
.swing {
    margin: -10em 15% 0;
}}
 @media screen and (max-width: 959.99px) {
.swing {
    margin: -8em 15% 0;
}}
 @media screen and (max-width: 767.99px) {
.swing {
  margin: -10.5em 22% 0;
  width: 56%;
}}


@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(0.5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}


/* ///  ふわ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);}



/* huwahuwa  上下*/ 
.huwahuwa{ animation: huwahuwa linear 4s infinite;}

@keyframes huwahuwa {
0% {transform: translateY(0);}
50% {transform: translateY(-7px);}
100% {transform: translateY(0);}
}


/* poyopoyo ぽよぽよ*/ 
.poyopoyo {
  animation: poyopoyo 2.5s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {transform: scale(1.0);}
  50%, 70% {transform: scale(0.9);}
}



/* fadeup フェードイン*/ 
.fadeup {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeup {
  0% {transform: translateY(30px); opacity: 0;}
  80% { opacity: 1;}
  100% { opacity: 1; transform: translateY(0); }
}

/* uneune うねうね*/ 
.circle {
  animation: uneune 5s linear infinite;
}
 
@keyframes uneune {
  0% {border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; }
  25% {border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; }
  50% {border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; }
  75% {border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; }
  100% {border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; }
}




/* changecolorbig 色変更＆ borderBIG*/ 
.blgbtn a:hover {
  color: #333;
}

.blgbtn a:hover::before {
  transform: scale(1); 
  opacity: 1;
}

.blgbtn .alik:hover{
    animation: changecolorbig 4s forwards;}

@keyframes changecolorbig  {
  0% {opacity: 1; color: #333;scale: 1.0;/*transform: translateY(30px);*/}
  40% {opacity: 1; color: #c56283;scale:1.04;}
  80% {opacity: 1;color: #c56283;scale:1.0;}
  100% {opacity: 1;color: #333;scale:1.0;}
}


/* 点滅 */
.blinking{
  -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}
  @media screen and (max-width: 767.99px) {
.blinking{
  animation: none;
    }}

@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/*------------------------------------------------------------
  波紋
------------------------------------------------------------*/

.waves-effect {
    position: relative;
    overflow: hidden;
}
.waves-ripple {
    animation: ripple 1s linear;
    position: absolute;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    background: radial-gradient(rgba(0,0,0,0.2) 0,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.5) 60%,rgba(255,255,255,0) 70%);
    transition: transform,opacity 0.5s ease-out;
    transform: scale(0) translate(0,0);
}
@keyframes ripple {
    to {
        transform: scale(3);
        opacity: 0;
    }
}
.waves-ripple.is-show {
    opacity: 1;
    transform: scale(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%;}}



/* /// shine2  /////////　*/
/*
<div class="kiran-img">
<img src="/images/sample.png" alt="キラーン">
<div class="kiran"></div>
</div>
 */

.kiran-img{
/*width:100%;*/
position :relative;
overflow :hidden;
}
.kiran {
height:100%;
width:30px;
position:absolute;
top:-500px;
left:0;
background-color: #fff;
opacity:0;
transform: rotate(45deg);
animation: reflection 3s ease-in-out normal infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
22% { transform: scale(0) rotate(45deg); opacity: 0; }
23% { transform: scale(2) rotate(45deg); opacity: 0.7; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}



/* /// RIGHT  /////////　*/
.light-box{
  position: relative; /*上階層にrelative */
}

.light {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  overflow: hidden;
}
.light:before {
  content:'';
  display: block;
  position: absolute;
  width: 2px;
  height: 80px;
  top: -75%;
  left: 0;
  transform: rotate(45deg);
  background: rgba(255,255,255,0.5);
  animation: light 7s infinite;
}

@keyframes light {
  0% {opacity: 0; }
  34% {opacity: 0;transform: rotate(15deg);}
  40% {opacity: 0.6;transform: rotate(620deg);}
  48%,100% {opacity: 0;transform: rotate(635deg);}
}



/* グロー */
.glow {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px #f0f,
    0 0 140px 90px #0ff;
}





/* /// border shine  /////////　*/
.border-shine{
background: #f0de94;
    animation: blinkBorder 1.4s ease infinite alternate;
    }
    @keyframes blinkBorder {
  0% { border: 5px solid #f7dc6f ;}
  100% { border: 5px solid #f9edbb ;}
}
.border-shine img{
width: 99.6%;
}

/* ///  上からフェードイン  animation   /////////　*/
#animation {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #e55d8a;
text-align: center;
}
  @media screen and (max-width: 767.98px) {
    #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%*/
    }



/* ///  ふわっとゆっくり現れて繰り返す  /////////　*/

.huwa1 {
    padding: 1rem;
    text-align: center;
    font-size: 140%;
    line-height: 1.4;
    font-family: serif;
    font-feature-settings: "palt";
    animation: fade-in 10s 8s infinite;
}

@keyframes fade-in {
  0% {opacity: 0; /*transform: translateY(30px);*/}
  80% {opacity: 1; }
  100% {opacity: 0; }
}





/* ///  hover 拡大  /////////　*/
.hoverBox{transition-duration: 0.3s;}
.hoverBox:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
}


/* ///  hover 拡大2  /////////　*/
.hoverBox2{animation: bigger2 4s ease;}
.hoverBox2:hover{transition-duration: 0.3s;}

@keyframes bigger2 {
  0% {opacity: 0; }
  60% {opacity: 1;transform: scale(1);transform: rotate(620deg);}
  100% {opacity: 0;transform: scale(1.2);transform: rotate(635deg);}
}


/* ///  色変化  /////////　*/
.changecolor{
    font-family: serif;
    animation: changecolor1 16s infinite; 
}

@keyframes changecolor1 {
  0% {opacity: 1; color: #e55d8a;scale(1.0);}
  50% {opacity: 1; color: #8386c0;scale(1.0);}
  100% {opacity: 1;color: #e55d8a;scale(1.15);}
}