@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; }

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

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


.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; }
.mt6 {margin-top: 6rem!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; }


@media screen and (max-width: 767.99px) {
.mt0 {margin-top: 0!important; }
.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; }
.mt6 {margin-top: 3rem!important; }

.mb0 {margin-bottom: 0!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; }
}


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

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



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

.f-small{font-size: small;}
.f-large{font-size: large;}

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

/* 太文字 */
.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);}



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



/* ///  DISPLAY ///////////////////////　*/

.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;}
.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
------------------------------------------------------------*/
.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;}

/*------------------------------------------------------------
  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: #5ab620!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: #5ab620;}
.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;}
.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;}

.borderpi{border: 4px solid #f54c83!important;}
.borderyr{border-right: 2px solid #f9f7ef!important;}
.borderbt{border-top: 1px solid #769d5b!important;}
.borderbl{border-left: 2px solid #769d5b!important;}
.borderbr{border-right: 1px solid #769d5b!important;}
.borderb{border-bottom: 2px solid #769d5b!important;}
.borderw{border-bottom: 1px solid #fff!important;}
.borderw2{border-bottom: 2px solid #fff!important;}
.borderwr{border-right: 2px solid #fff!important;}
.borderbl{border-left: 2px solid #769d5b!important;}
.borderu1{border: 2px solid #524327!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%) ;}

.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_dot {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px dotted #d8b94d; 
}


.border-rad.radius1{border-radius:1rem;}
.no-border-rad{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; /* 隙間埋め */
}


/* 両サイドにボーダー　*/
.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;
}


/*------------------------------------------------------------
  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;}
@media screen and (max-width: 767.99px) {
.scroll_bar{
   height: 70vh;
}}


.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: #f0f5e7;
}
.scroll_bar::-webkit-scrollbar-thumb{
    background-color: #6FBA2C60;
}



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

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

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

.close_box a{
    transition: 2s ease;
}

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



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

.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{ /* ▼下 */
  position: absolute;
  content: "▼";
  color: #fff;
  top: calc(50% - 0.6em);
  right: 4%;
  border-radius: 50%;
  width: 2rem;
  text-align: center;
  font-size: 90%;
  font-weight: bold;
  /* transform: rotate(-90deg); */
  line-height: initial;
}


/*------------------------------------------------------------
  吹き出し
------------------------------------------------------------*/
.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 {
    margin: -3rem 0;
    width: 60px;
    height: 60px;
    line-height: 62px;
    font-size: 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;
}





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



/* 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 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s 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;}
}

/* 点滅2 */
.blinking2{
  -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
  @media screen and (max-width: 767.99px) {
.blinking2{
  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;}
}