@charset "UTF-8";


html { 
      font-size: 100%; /* =16px */
      margin: 0;
      overflow-x : hidden;
      -webkit-overflow-scrolling: touch;
     overflow-scrolling: touch;
} 
body {
      background-color: #fff;
      font-family: 'Playfair', serif;/* Arial, Helvetica, sans-serif; */
      color: #333333;/*#555555*/
      font-size: 16px;
      line-height:1.5;
      text-align:left;
      margin: 0;
      overflow-x : hidden;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
}
.wrapper {
  overflow: hidden;
}
.arial {
 font-family:Arial, Helvetica, sans-serif;
}
.niconne {
  font-family: 'Niconne', cursive;
}
.Gelasio {
  font-family: 'Gelasio', serif;/*英語 かっちりカッコイイ*/
}
.Playfair {
  font-family: 'Playfair', serif;/*英語 少しなめらかなライン*/
}
.Parisienne {
font-family: 'Parisienne', cursive; /*英語 筆記体*/
}
.Caveat Brush {
font-family: 'Caveat Brush', cursive; /*英語 カジュアルなブロック体*/
}
.Damion {
font-family: 'Damion', cursive; /*英語 筆記体*/くせのある筆記体
}
.Italianno {
font-family: 'Italianno', cursive; /*英語 カッコイイ筆記体*/
}
.Oxygen {
font-family: 'Oxygen', sans-serif; /*英語 丸っこいブロック体*/
}
.Playball {
font-family: 'Playball', cursive; /*英語 縦長カッコイイ筆記体*/
}
.Tangerine {
font-family: 'Tangerine', cursive; /*英語 スタイリッシュカッコイイブロック体*/
}
.italic {
  font-style:italic;
}
#container {
  padding-top: 45px;
}
.global {
  position: fixed;
  width: 100%;
  top: 12px;
  left: 5px;
  z-index: 10000;
}
a:link {
      color: #4169e1;
}
#link2 a:link {
      color: #56a764;
}
a:visited {
      color: #000080;
}
.deco-non {
  text-decoration: none;
}
a {
      text-decoration: none;
}
.block a {
  display:block;
  width:100%;
}
.nowrap {
  white-space: nowrap;
}
h1{
      font-family: 'Playfair';
      font-style:italic;
      font-weight:500;
      color:#fff;
      background: linear-gradient(135deg, #BCC3C6, #327AA5); /* rgba(0,0,0,0.35); */
      text-align: center;
      padding: 10px 0;
}
.maintitle{
      display:block;
      font-size:1.1rem;
      line-height:1.2rem;
      letter-spacing:-2px;
}
.description{
      display:block;
      font-size:0.8rem;
      line-height:1.0rem;
      letter-spacing:-1px;
}
h2,h3,h4,h5,h6 {
      font-size: 1.1rem;
      line-height:1.35;
      font-weight : normal;
}
.filter20 {
      filter: brightness(20%);
}
.filter25 {
      filter: brightness(25%);
}
.filter30 {
      filter: brightness(30%);
}
.filter40 {
      filter: brightness(40%) contrast(200%) saturate(100%);
}
.filter45 {
      filter: brightness(45%) contrast(200%) saturate(100%);
}
.filter50 {
      filter: brightness(50%) contrast(200%) saturate(100%);
}
.filter55 {
      filter: brightness(55%) contrast(200%) saturate(100%);
}
.filter60 {
      filter: brightness(60%) contrast(200%) saturate(100%);
}
.filter65 {
      filter: brightness(65%) contrast(200%) saturate(100%);
}
.filter70 {
      filter: brightness(70%) contrast(200%) saturate(100%);
}
.filter75 {
      filter: brightness(75%) contrast(200%) saturate(100%);
}
.filter85 {
      filter: brightness(85%);
}
.filter90 {
      filter: brightness(90%);
}
.filter95 {
      filter: brightness(95%);
}
.filter105 {
      filter: brightness(105%);
}
.filter110 {
      filter: brightness(110%);
}
.filter120 {
      filter: brightness(120%);
}
.filter130 {
      filter: brightness(130%);
}
.filter140 {
      filter: brightness(140%);
}
.filter150 {
      filter: brightness(150%);
}
.pad-h-03 {
      padding-left: 0.3rem;
      padding-right: 0.3rem;
}
.pad-h-05 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
}
.pad-h-06 {
      padding-left: 0.625rem;
      padding-right: 0.625rem;
}
.pad-h-08 {
      padding-left: 0.8rem;
      padding-right: 0.8rem;
}
.pad-h-1 {
      padding-left: 1rem;
      padding-right: 1rem;
}
.pad-h-15 {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
}
.pad-h-2 {
      padding-left: 2rem;
      padding-right: 2rem;
}
.pad-t-03 {
       padding-top:0.3rem;
}
.pad-t-05 {
       padding-top:0.5rem;
}
.pad-t-08 {
       padding-top:0.8rem;
}
.pad-t-1 {
       padding-top:1rem;
}
.pad-t-15 {
       padding-top:1.5rem;
}
.pad-t-2 {
       padding-top:2rem;
}
.pad-t-25 {
       padding-top:2.5rem;
}
.pad-t-3 {
       padding-top:3rem;
}
.pad-t-35 {
       padding-top:3.5rem;
}
.pad-t-4 {
       padding-top:4rem;
}
.pad-t-45 {
       padding-top:4.5rem;
}
.pad-t-5 {
       padding-top:5rem;
}
.pad-t-6 {
       padding-top:6rem;
}
.pad-t-7 {
       padding-top:7rem;
}
.pad-t-8 {
       padding-top:8rem;
}
.pad-t-9 {
       padding-top:9rem;
}
.pad-t-10 {
       padding-top:10rem;
}
.pad-b-03 {
       padding-bottom:0.3rem;
}
.pad-b-05 {
      padding-bottom:0.5rem;
}
.pad-b-08 {
      padding-bottom:0.8rem;
}
.pad-b-1 {
      padding-bottom:1rem;
}
.pad-b-15 {
      padding-bottom:1.5rem;
}
.pad-b-2 {
      padding-bottom:2rem;
}
.pad-b-25 {
      padding-bottom:2.5rem;
}
.pad-b-3 {
      padding-bottom:3rem;
}
.pad-b-35 {
      padding-bottom:3.5rem;
}
.pad-b-4 {
      padding-bottom:4rem;
}
.pad-b-45 {
      padding-bottom:4.5rem;
}
.pad-b-5 {
      padding-bottom:5rem;
}
.pad-b-6 {
      padding-bottom:6rem;
}
.pad-b-7 {
      padding-bottom:7rem;
}
.pad-b-8 {
      padding-bottom:8rem;
}
.pad-b-9 {
      padding-bottom:9rem;
}
.pad-b-10 {
      padding-bottom:10rem;
}
.ls05{
      letter-spacing:0.5px;
}
.ls1{
      letter-spacing:1px;
}
.ls2{
      letter-spacing:2px;
}
.ls3{
      letter-spacing:3px;
}
.ls4{
      letter-spacing:4px;
}
.ls5{
      letter-spacing:5px;
}
.ls8{
      letter-spacing:8px;
}
.ls10{
      letter-spacing:10px;
}
.font70 {
      font-size: 70%;
}
.font80 {
      font-size: 80%;
}
.font10 {
      font-size: 10px;
}
.font11 {
      font-size: 11px;
}
.font12 {
      font-size: 12px;
}
.font13 {
      font-size: 13px;
}
.font14 {
      font-size: 14px;
}
.font15 {
      font-size: 15px;
}
.font16 {
      font-size: 16px;
}
.font17 {
      font-size: 17px;
}
.font18 {
      font-size: 18px;
}
.font19 {
      font-size: 19px;
}
.font20 {
      font-size: 20px;
}
.font21 {
      font-size: 21px;
}
.font22 {
      font-size: 22px;
}
.font23 {
      font-size: 23px;
}
.font24 {
      font-size: 24px;
}
.font25 {
      font-size: 25px;
}
.font26 {
      font-size: 26px;
}
.font27 {
      font-size: 27px;
}
.font28 {
      font-size: 28px;
}
.font29 {
      font-size: 29px;
}
.font30 {
      font-size: 30px;
}
.rem065 {
      font-size: 0.65rem;
}
.rem07 {
      font-size: 0.7rem;
}
.rem075 {
      font-size: 0.75rem;
}
.rem08 {
      font-size: 0.8rem;
}
.rem085 {
      font-size: 0.85rem;
}
.rem09 {
      font-size: 0.9rem;
}
.rem095 {
      font-size: 0.95rem;
}
.rem1 {
      font-size: 1rem;
}
.rem105 {
      font-size: 1.05rem;
}
.rem11 {
      font-size: 1.1rem;
}
.rem115 {
      font-size: 1.15rem;
}
.rem12 {
      font-size: 1.2rem;
}
.rem13 {
      font-size: 1.3rem;
}
.rem14 {
      font-size: 1.4rem;
}
.rem15 {
      font-size: 1.5rem;
}
.rem16 {
      font-size: 1.6rem;
}
.rem17 {
      font-size: 1.7rem;
}
.rem18 {
      font-size: 1.8rem;
}
.rem19 {
      font-size: 1.9rem;
}
.rem2 {
      font-size: 2rem;
}
.rem25 {
      font-size: 2.5rem;
}
.rem3 {
      font-size: 3rem;
}
.rem35 {
      font-size: 3.5rem;
}
.normal {
      font-weight: normal;
}
.bold6 {
      font-weight: 600;
}
.bold {
      font-weight: bold;
}
.shadow {
    text-shadow:
    0 1px #bbb, 
    0 2px #aaa,
    0 3px #999,
    0 4px #888,
    0 5px #777,
    0 6px #666,
    0 7px #555,
    0 8px #444,
    0 9px #333,
    0 32px 24px rgba(0,0,0,0.7);
}
.shadow-white {
      text-shadow:0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff;
}
.shadow-black {
      text-shadow:0.5px 0.5px #000000,0.5px 0.5px #000000,0.5px 0.5px #000000,0.5px 0.5px #000000,0.5px 0.5px #000000;
}
.shadow-brown {
      text-shadow:0.5px 0.5px #a52a2a,0.5px 0.5px #a52a2a,0.5px 0.5px #a52a2a,0.5px 0.5px #a52a2a,0.5px 0.5px #a52a2a;
}
.shadow-pink {
  text-shadow: 
    0 0 0.05em #F06292,
    0 0 0.10em #F06292,
    0 0 0.15em #F06292,
    0 0 0.30em #F06292;
  filter: saturate(80%);
}
.shadow-pink-mirror {
  text-shadow: 
    0 0 0.05em #F06292,
    0 0 0.10em #F06292,
    0 0 0.15em #F06292,
    0 0 0.30em #F06292;
  filter: saturate(80%);
  -webkit-background-clip: text;
  -webkit-box-reflect: below -0.25em -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .8)), to(transparent));
}
.std {
      line-height:1.2;
}
.center {
      text-align: center;
}
.right {
      text-align: right;
}
.right-margin250 {
  width: 250px;
  margin-right: 0;
  margin-left: auto;
}
.right-flex {
  display: flex;
  justify-content: flex-end;
}
.left {
      text-align: left;
}
.br1 {
      margin-bottom: 1rem;
}
.br2 {
      margin-bottom: 2rem;
}
.br3 {
      margin-bottom: 3rem;
}
.br4 {
      margin-bottom: 4rem;
}
.br5 {
      margin-bottom: 5rem;
}
.br6 {
      margin-bottom: 6rem;
}
.br7 {
      margin-bottom: 7rem;
}
.br8 {
      margin-bottom: 8rem;
}
.br9 {
      margin-bottom: 9rem;
}
.br10 {
      margin-bottom: 10rem;
}
.br22 {
      margin-bottom: 22rem;
}
.bt1 {
      margin-top: 1rem;
}
.bt2 {
      margin-top: 2rem;
}
.bt3 {
      margin-top: 3rem;
}
.bt4 {
      margin-top: 4rem;
}
.bt5 {
      margin-top: 5rem;
}
.bt6 {
      margin-top: 6rem;
}
.bt7 {
      margin-top: 7rem;
}
.bt22 {
      margin-top: 22rem;
}
.hr1 {
      border-width: 2px 0px 0px 0px;
       border-style: solid;
      border-color: #B1CDB5;/* /* =16px */ */
      height: 2px;
}
.hr2 {
      border-width: 24px 0px 0px 0px;
      border-style: solid;
      border-color: #B1CDB5;/* /* =16px */ */
      height: 24px;
}
.hr3 { 
  border: 0; 
  height: 2px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0); 
}
.hr4 { 
  border: 0; 
  height: 8px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #B8860B, #f0f0f0); 
}
.white {
      color: #FFFFFF;
      background-color: #91cd99;
      padding: 0.5rem 0.3rem;
      font-weight: bold;
}
.white2 {
      color: #FFFFFF;
      background-color: #B1CDB5;
      padding: 0.5rem 0.3rem;
      font-weight: bold;
}
.white-grey {
      color: #FFFFFF;
      font-style:normal;/*litalic*/
      background: linear-gradient(135deg, #BCC3C6, #204D68);
      padding: 0.5rem 0.3rem;
      font-weight: normal;/*bold*/
}
.white-blue {
      color: #FFFFFF;
      font-style:normal;/*litalic*/
      background: linear-gradient(135deg, #BCC3C6, #327AA5);
      padding: 0.5rem 0.3rem;
      font-weight: normal;/*bold*/
}
.white-brown {
      color: #FFFFFF;
      font-style:normal;/*litalic*/
      background: linear-gradient(135deg, #EAE2E5, #6D364E);
      padding: 1.25rem 0rem;
      font-weight: normal;/*bold*/
}
.siro {
      color: #ffffff;
}
.black {
      color: #000000;
}
.navy {
      color: #0000ff;
}
.blue {
      color: #2b95ff;
}
.royalblue {
      color: #4169e1;
}
.grey {
      color: #555555;
}
.grey1 {
      color: #808080;
}
.silver {
      color: #c0c0c0;
}
.copper {
      color: #C9AE5D;
}
.brown {
      color: #6D5824;
}
.dullorange {
      color: #9B6239;
}
.darkorange {
      color: #5D3B22;
}
.deeporange {
      color: #B55603;
}
.rose {
      color: #CC0066;
}
.vividpink {
      color: #D600D6;
}
.magenta {
      color: #ff00ff;
}
.pink {
      color: #ff69b4;
}
.lightpink {
      color: #F4D6F3;
}
.orange {
      color: #FF5F17;
}
.green {
      color: #00A474;
}
.green2 {
      color: #005D42;
}

.green3 {
      color: #001F16;
}

.lightgreen {
      color: #ECFFF8;
}
.lightgreen2 {
      color: #86FFD2;
}
.lightgreen3 {
      color: #00E19F;
}
.red {
      color: #FF0000;
}
.strongred {
      color: #DA9496;
}
.strongred2 {
      color: #901E23;
}
.gold {
      color: gold;
}
.gold2 {
      color: #FFE248;
}
.lightyellow {
      color: #ffffe0;
}

.beige {
      color: #f5f5dc;
}
.silk {
      color: #fff8dc;
}
.snow {
      color: #fffafa;
}
/*背景グラデーション*/
.gdn2 {
  height: 100%;
  margin: 0 10% 0 1%;
  padding: 0.5rem 0.3rem 0.5rem 0.2rem;
  border-radius: 20px;
  background: linear-gradient(45deg, #E6E6FA, #E6E6FA, #E6E6FA);/*#E6E6FA*/
  background-size: 600% 600%;
  animation: AnimationName 6s ease infinite;
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/*グラデーションのみ レッドだがオーキッドになっている。(225deg, #F4D6F3, #E498E1);(225deg, #EDEAFF, #B8ADFF);*/
.gdn-red {
    background: linear-gradient(225deg, #EDEAFF, #B8ADFF);
}
/* 元レッド、グラデーションstyle="background: linear-gradient(135deg, #ff7a7a, #F83634);"*/
.gdn-blue {
    background: linear-gradient(135deg, #ff7a7a, #F83634);
}
/*バックグラウンドカラー*/
.bg-white {
      background-color: #fff;
}
.bg-ghostwhite {
      background-color: #f8f8ff;
}
.bg-snow {
      background-color: #F2F2F2;
}
.bg-royalblue {
      background-color: #4169e1;
}
.bg-brightnavy {
      background-color: #272CB9;
}
.bg-palenavy-2 {
      background-color: #F4F3FF;
}
.bg-palenavy {
      background-color: #EDEAFF;/*#EDEAFF;*/
}
.bg-lightblue {
      background-color: #2b95ff;
}
.bg-lightblue2 {
      background-color: #2789EA;
}
.bg-lightblue3 {
      background-color: #247DD6;
}
.bg-paleblue {
      background-color: #F7FBFF;
}
.bg-paleblue1 {
      background-color: #EFF8FF;
}
.bg-paleblue2 {
      background-color: #C6E6FF;
}
.bg-paleblue3 {
      background-color: #C6E6FF;
}
.bg-palewhite {
      background-color: #F7F7F7;
}

.bg-palewhite2 {
      background-color: #e6e6fa;
}

.bg-palewhite3 {
      background-color: #D2D2FA;
}
.bg-palepink {
      background-color: #EAE2E5;
}
.bg-palepink2 {
      background-color: #EABCCD;
}
.bg-palepink11 {
      background-color: #F4D6E0;
}
.bg-palepink12 {
      background-color: #E598B1;
}
.bg-palepink13 {
      background-color: #DB7093;
}
.bg-strongred {
      background-color: #B9272D;
}
.bg-strongred2 {
      background-color: #901E23;
}
.bg-palered {
      background-color: #DA9496;
}
.bg-palered2 {
      background-color: #D48588;
}
.bg-palered3 {
      background-color: #AAAAAA;
}
.bg-palered4 {
      background-color: #D45257;
}
.bg-lightorange-2 {
      background-color: #F7F0E8;
}
.bg-lightorange {
      background-color: #F0E0D1; /*#DEB794;*/
}
.bg-lightorange2 {
      background-color: #DE9A5E;
}
.bg-lightorange3 {
      background-color: #DEB794; /*#DE6A04;*/
}
.bg-lightorange4 {
      background-color: #B55603;
}
.bg-grayishorange {
      background-color: #E6E3D6;
}
.bg-blue {
      background-color: #5D9CEC;
}
.bg-gray {
      background-color: rgba(0,0,0,0.08);
}
.bg-rgba02 {
  background: rgba(0,0,0,0.02);
}
.bg-rgba03 {
  background: rgba(0,0,0,0.03);
}
.bg-rgba04 {
  background: rgba(0,0,0,0.04);
}
.bg-rgba05 {
  background: rgba(0,0,0,0.05);
}
.bg-rgba06 {
  background: rgba(0,0,0,0.06);
}
.bg-rgba07 {
  background: rgba(0,0,0,0.07);
}
.bg-rgba08 {
  background: rgba(0,0,0,0.08);
}
.bg-rgba09 {
  background: rgba(0,0,0,0.09);
}
.bg-rgba1 {
  background: rgba(0,0,0,0.1);
}
.bg-rgba15 {
  background: rgba(0,0,0,0.15);
}
.bg-rgba2 {
  background: rgba(0,0,0,0.2);
}
.bg-rgba25 {
  background: rgba(0,0,0,0.25);
}
.bg-rgba3 {
  background: rgba(0,0,0,0.3);
}
/*padding radiusあり バックグラウンドカラー padding radiusあり*/
.bg-green {
      background-color: #EDF7EE;/*#C0DDD5;*/
      padding: 1rem 1rem;
      border-radius: 12px;
}
.bg-green-nasi {
      background-color: #EDF7EE;
}
.bg-green2-nasi {
      background-color: #7DB081;
}
.bg-green1 {
      background-color: #C0DDD5;/*#EDF7EE;*/
      padding: 0.5rem 0.3rem 0.5rem 0.2rem;
      border-radius: 15px;
}
.bg-green2 {
      background-color: #C0DDD5;/*#EDF7EE;*/
      margin: 0 10% 0 1%;
      padding: 0.5rem 0.3rem 0.5rem 0.2rem;
      border-radius: 20px;
}
.bg-brown {
      background-color: #FFFCED;
      color: #6D5824;
      padding: 0.5rem 0.5rem;
      border-radius: 12px;
}
.bg-brown1 {
      background-color: #EDF7EE;/*#FFFCED;*/
      margin: 0 1% 0 17%;
      padding: 0.5rem 0.5rem 0.5rem 0;
      border-radius: 12px;
}
.bg-brown2 {
      background-color: #EDF7EE;
      margin: 0 17% 0 1%;
      padding: 0.5rem 0.5rem 0.5rem 0;
      border-radius: 12px;
}
.bg-black {
      background-color: #C2AA6D;/*#472539#837403#5C304A#111111;rgba(0,0,0,0.6);*/
      color: #fff;
      margin: 0 17% 0 1%;
      padding: 0.5rem 0.5rem 0.5rem 0;
     border-radius: 12px;
}
.down-2 {
      margin-bottom: -2px;
}
.down-1 {
      margin-bottom: -4px;
}
.down-0 {
      margin-bottom: -6px;
}
.down0 {
      margin-bottom: -8px;
}
.down00 {
      margin-bottom: -10px;
}
.down {
      margin-bottom: -12px;
}
.down000 {
      margin-bottom: -14px;
}
.down1 {
      margin-bottom: -16px;
}
.down2 {
      margin-bottom: -20px;
}
.down3 {
      margin-bottom: -24px;
}
.down4 {
      margin-bottom: -28px;
}
.down5 {
      margin-bottom: -32px;
}
.down6 {
      margin-bottom: -36px;
}
.down7 {
      margin-bottom: -40px;
}
.down8 {
      margin-bottom: -44px;
}
.down9 {
      margin-bottom: -48px;
}
.down10 {
      margin-bottom: -52px;
}
.down120 {
      margin-bottom: -120px;
}
.up-3 {
      margin-top: -1px;
}
.up-2 {
      margin-top: -2px;
}
.up-1-3 {
      margin-top: -3px;
}
.up-1 {
      margin-top: -4px;
}
.up0-5 {
      margin-top: -5px;
}
.up0-6 {
      margin-top: -6px;
}
.up0-7 {
      margin-top: -7px;
}
.up0 {
      margin-top: -8px;
}
.up0-9 {
      margin-top: -9px;
}
.up0-10 {
      margin-top: -10px;
}
.up {
      margin-top: -12px;
}
.up1 {
      margin-top: -16px;
}
.up2 {
      margin-top: -20px;
}
.up3 {
      margin-top: -24px;
}
.up4 {
      margin-top: -28px;
}
.up5 {
      margin-top: -32px;
}
.up6 {
      margin-top: -36px;
}
.up7 {
      margin-top: -40px;
}
.up8 {
      margin-top: -44px;
}
.up9 {
      margin-top: -48px;
}
.up10 {
      margin-top: -52px;
}
.under {
      text-decoration : underline
}
ul li {
      display: list-item;
      list-style-type: disc; /*circle;square;*/
      margin-bottom: 20px;
}
li a {
      text-decoration: none;
}
ol li{
      margin-bottom: 10px;
}
img { 
      width: 100%; !important;
      height: auto; !important;
      max-width: 420px; !important;
      margin:0 auto; !important;
}
.midasi {
      padding: 0.25em 0.5em;
      color: #444444;
      background: transparent;
      border-left: solid 5px #7db4e6;
}
.midasi2 {
      position: relative;
      padding: 0 .5em .0 1.7em;
      border-bottom: 1px solid #6495ed;
}
.midasi2::after {
      position: absolute;
      top: .22em;
      left: .4em;
      z-index: 2;
      content: '';
      width: 13px;
      height: 13px;
      background-color: #6495ed;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
}
.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 4px;
    color: #ffffff;
    font-weight: bold;
    background-image: -webkit-linear-gradient(#FF3399 0%, #FEEEED 100%);
    background-image: linear-gradient(#FF3399 0%, #FEEEED 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #EC008C;
}
.square_btn:active{
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}
/*============================
ol.rank-menu
============================*/
ol.rank-menu{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
ol.rank-menu li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 10px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
.star-color{
      color: gold;
}
/*
.bg1{
      background: #7b68ee;
}
.bg2{
      background: #A093F2;
}
.bg3{
      background: #A093F2;
}
.bg4{
      background: #A093F2;
}
*/
.bg1{
      background: #7B68EE;
}
.bg2{
      background: #8D7DF0;
}
.bg3{
      background: #A093F2;
}
.bg4{
      background: #B3A8F5;
}
/*ol.rank-menu li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}*/
ol.rank-menu li:hover{
      background: #8393ca;
}
ol.rank-menu li a {
      color: #fff;
      text-decoration:none;
}
ol.rank-menu li a:visited {
      color: #000080;
}
/*============================
ol.mainmenu
============================*/
ol.mainmenu{
      counter-reset:list;
      list-style-type:none;
      font: 16px/1.6 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background: #77b4fd;
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu li:hover{
      background: #8393ca;
}
ol.mainmenu li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu li a:visited {
      color: #000080;
}
ol.mainmenu2{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu2 li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background:  #55aaff;
      border-radius: 6px;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu2 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu2 li:hover{
      background: #0080ff;
}
ol.mainmenu2 li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu2 li a:visited {
      color: #004080;
}
ol.mainmenu3{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu3 li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background:  #ff69b4;
      border-radius: 20px;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu3 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu3 li:hover{
      background: #ff0080;
}
ol.mainmenu3 li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu3 li a:visited {
      color: #d5006a;
}
ol.mainmenu4{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
/* ol.mainmenu4 span{
      color: #0000ff;
}*/
ol.mainmenu4 li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background: #CD9791;
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu4 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu4 li:hover{
      background: #8393ca;
}
ol.mainmenu4 li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu4 li a:visited {
      color: #000080;
}
ol.mainmenu5{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu5 li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background: #F5BD37;
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu5 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu5 li:hover{
      background: #8393ca;
}
ol.mainmenu5 li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu5 li a:visited {
      color: #000080;
}
ol.mainmenu6{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu6 li{
      position:relative;
      color: #444444;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background: #EDF7EE;/* #B1CDB5;*/
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu6 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu6 li:hover{
      background: #8393ca;
}
ol.mainmenu6 li a {
      color: #444444;
      text-decoration:none;
}
ol.mainmenu6 li a:visited {
      color: #000080;
}
ol.mainmenu7{
      counter-reset:list;
      list-style-type:none;
      font: 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu7 li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background: #FEB771;/* #6bb6bb;*/
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu7 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu7 li:hover{
      background: #8393ca;
}
ol.mainmenu7 li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu7 li a:visited {
      color: #000080;
}
ol.mainmenu8{
      counter-reset:list;
      list-style-type:none;
      font: 16px/1.6 'arial narrow', sans-serif;
      padding:0;
}
ol.mainmenu8 li{
      position:relative;
      color: #fff;
      padding: 5px 2px 5px 30px;
      margin: 6px 0 6px 0px;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.5;
      background: #69B3FF;/* #B5A084*/
      border-radius: 12px;/* 8px;角の丸み*/
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
      transition: 0.3s;
}
ol.mainmenu8 li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
ol.mainmenu8 li:hover{
      background: #8393ca;
}
ol.mainmenu8 li a {
      color: #fff;
      text-decoration:none;
}
ol.mainmenu8 li a:visited {
      color: #000080;
}
.slide-top {
	width:		100%;
        max-width:      420px; !important;
	margin:		0 auto;
	padding:	0;
	position:	relative;
	overflow:	hidden;
  }

.slide-top p {
	position:	absolute;
	width:		100%;
	height:		12%;
	font-size:	100%;
        font-weight:    normal;
	text-align:	center;
	top:		0px;
	margin:		0;
	color:		#fff;
	background:	rgba(184,134,11,0.3);
	animation: 	slide 4s ease-out 1s infinite alternate;
}
.slide-top img {
  width: 100%;
/*  height: 90vh; */
  }
@keyframes slide {
	0% { top:	0%; }
	100% { top:    84%; }
}
.slide-top2 {
	width:		100%;
        max-width:      420px; !important;
	margin:		0 auto;
	padding:	0;
	position:	relative;
	overflow:	hidden;
  }
}
.slide-top2 img {
  width: 100%;
/*  height: 90vh; */
  }
.absolute20 {
    position: absolute;
  }
.absolute-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 45%;
  transform: translateY(-50%);
  width: 100%;
  }
.absolute-r1 {
    position: absolute;
    transform: rotate(deg);
    bottom: 0.8rem;
    left: 0.8rem;
}
.absolute-r2 {
    position: absolute;
    transform: rotate(deg);
    bottom: 0.3rem;
    right: 0.3rem;
    color: #FF0000;
    font-size: ; 0.8rem
    font-weight: ;
    font-family: 'Gelasio', serif;
}
.absolute {
    position: absolute;
    transform: rotate(deg);
    top: 5px;
    right: 3px;
    color: #fff;
    font-size: 75%;
    max-width: 420px;
    line-height:1.1;
    text-align: center;
    font-weight:normal;
    background:	rgba(0,0,0,0.1);
}
.absolute2 {
    position: absolute;
    transform: rotate(deg);
    bottom: -15px;
    left: 3px;
}
.absolute3 {
    position: absolute;
    transform: rotate(deg);
    bottom: 61%;
    left: 13%;
    color: #000000;
    font-size: 1.5rem;
    font-weight: normal;
    font-family: 'Gelasio', serif;
}
.absolute3 span {
    color: #fff;/*#8b008b;*/
    font-size: 2.3rem;
    font-weight: normal;
    font-family: 'Niconne', cursive;
}
.absolute4 {
    position: absolute;
    transform: rotate(deg);
    bottom: 25%;
    left: 20%;
    color: gold;
    font-size: 1.2rem;
    font-weight: normal;
    font-family: 'Gelasio', serif;
}
.absolute4 span {
    color: #fff;
    font-size: 1.8rem;
    font-weight: normal;
    font-family: 'Niconne', cursive;
}
.absolute5 {
    position: absolute;
    transform: rotate(deg);
    bottom: 50%;
    left: 7%;
    color: #FF22AA;
    font-size: 1.4rem;
    font-weight: bold;
    font-family: 'Gelasio', serif;
}
.absolute5 span {
    color: #fff;
    font-size: 1.2rem;
    font-weight: normal;
    font-family: 'Niconne', cursive;
}
.absolute6 {
    position: absolute;
    transform: rotate(deg);
    bottom: 10%;
    color: #6D5824;
    font-size: 0.9rem;
    line-height:1.5;
    font-weight: normal;
    font-family: 'Playfair', serif;
    background: #FFFCED;
    margin: 0 0.5rem;
    padding: 0.2rem 0.3rem;
    border-radius: 10px;
}
.absolute7 {
    position: absolute;
    transform: rotate(deg);
    bottom: 12%;
    font-family: 'Playfair', serif;
    margin: 0 0 1rem 0;
    padding: 0rem 0.8rem;
}
.box10{
    padding: 2.5rem 2rem;
    margin:  2rem 0.2rem 0;
    font-size: 0.9rem;
    background: #E3F4FF;
    border: 1px solid #ccc; /* 線の太さ・種類・色 */
    border-radius: 8px;
    box-shadow:1px 1px 2px 0px #ccc;
    -moz-box-shadow:1px 1px 2px 0px #ccc;
    -webkit-box-shadow:1px 1px 2px 0px #ccc;
    -o-box-shadow:1px 1px 2px 0px #ccc;
}
.box11{
    padding: 2.5rem 2rem;
    margin:  0.2rem 0.2rem 0.2rem;
    font-size: 0.9rem;
    background: #F7FBFF;
    border: 1px solid #ccc; /* 線の太さ・種類・色 */
    border-radius: 8px;
    box-shadow:1px 1px 2px 0px #ccc;
    -moz-box-shadow:1px 1px 2px 0px #ccc;
    -webkit-box-shadow:1px 1px 2px 0px #ccc;
    -o-box-shadow:1px 1px 2px 0px #ccc;
}
.box3 {
    position: relative;
    margin: 4rem 0 3rem;
    padding: 0rem 0.3rem;
    border: solid 1px #B1CDB5;/* #6495ed */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    color: #555555;
}
.box3 .box-title {
    position: absolute;
    display: inline-block;
    top: -28px;
    left: 5px;
    padding: 2px 8px;
    height: 1.5rem;
    line-height: 1.5rem;
    vertical-align: middle;
    font-size: 1.3rem;
    background: #ff8000;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box34 {
    position: relative;
    margin: 3rem 0 1rem;
    padding: 0rem 0.3rem;
    border: solid 1px #B1CDB5;/* #6495ed */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    color: #555555;
}
.box34 .box-title {
    position: absolute;
    display: inline-block;
    top: -28px;
    left: 5px;
    padding: 2px 8px;
    height: 1.5rem;
    line-height: 1.5rem;
    vertical-align: middle;
    font-size: 1rem;
    background: #B1CDB5;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box4 {
    position: relative;
    margin: 2rem 0 1.5rem;
    padding: 0.5rem 0;
    border: solid 1px #F2F2F2;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
/* border-radius: 8px; */
    background-color: #F2F2F2;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #555555;
}
.box4 .box-title {
    position: absolute;
    display: inline-block;
    top: -23px;
    left: 7px;
    padding: 2px 12px;
    height: 1.4rem;
    line-height: 1.4rem;
    vertical-align: middle;
    font-size: 1.3rem;
    background: #ff8000;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box5 {
    position: relative;
    margin: 4rem 0 3rem;
    padding: 0rem 0.3rem;
    border: solid 1px rgba(0, 0, 0, 0.0);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.0);
    border-radius: 8px;
    color: #555555;
}
.box5 .box-title {
    position: absolute;
    display: inline-block;
    top: -24px;
    left: 3px;
    padding: 0 12px;
    height: 1.4rem;
    line-height: 1.4rem;
    vertical-align: middle;
    font-size: 1.3rem;
    background: #ff8000;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box6 {
    position: relative;
    margin: 1rem 0.2rem 1rem;
    padding: 0rem 0.2rem;
    border: solid 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #555555;
}
.box6 .box-title {
    position: absolute;
    display: inline-block;
    top: -24px;
    left: 3px;
    padding: 0 12px;
    height: 1.4rem;
    line-height: 1.4rem;
    vertical-align: middle;
    font-size: 1.3rem;
    background: #ff8000;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box1 {
    position: relative;
    margin: 3.5em 0 3em;
    padding: 0.5em 1em;
    background: #FFFFE0;
    border-bottom: solid 6px #FFFFE0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: 3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 21px;
    background: #ff8000;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

/*簡単登録*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}

/*簡単操作*/
@keyframes slide2 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}

/*トップ画像*/
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}


/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	height: auto;
        margin:0 auto;
        display:block;
        max-width: 420px;
	position: relative;
}

#mainimg2 {
	clear: left;
	width: 100%;
	height: auto;
        margin:1.5em auto;
        display:block;
        max-width: 420px;
	position: relative;
}

/*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
	-webkit-animation-duration: 10s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 10s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
}

/*簡単登録*/
#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}

/*簡単操作*/
#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}

/*トップ画像*/
#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}
.maru img {
    border-radius: 30px; /* ちょっとだけ角丸 */
}
.maru2 img {
    border-radius: 20px; /* ちょっとだけ角丸 */
}
.maru3 img {
    border-radius: 10px; /* ちょっとだけ角丸 */
}

.menu
    {
    position: fixed;
    bottom: 1px;
    right: 1px;
    opacity: 0.7;
    }
 
.menu a
    {
    display: block;
    text-decoration: none;
    }
 
.menu:hover
{
    opacity: 0.45;
}
.scroll {
  margin     :-6px 0 0 0;
  width      : 100%;
  text-align : center;
  /*border     : 0.7px solid #B8860B;*/
  background-color: #6C6CD1;/+#8282FA*/
  overflow   : hidden;
}
.scroll p{
  display     : inline-block;
  /*font-family: Arial;*/
  padding-left: 100%;
  font-size  : 9px;
  color      : #fff; /*#5D3B22;*/
  line-height: 0.7;
  white-space : nowrap;
  animation   : scrollAnime 10s linear infinite;
}
.scroll a{
  color      : #fff; /*#5D3B22;*/
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}
#ui {
  width:		100%;
  max-width:      420px; !important;
  height:100%;
  position: relative;
  background: #FFEEFF;
  height: 55vh;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
}
#ui .ball {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 20px;
  margin-top: -70px;
  transform-origin: 0 50%;
  opacity: 0.7;
}
#ui .ball p {
  font-size: 1rem;
  color: #ff80bf;
}
#ui .ball:nth-child(1) {
  width: 150px;
  animation: rotation 3000ms linear infinite;
}
#ui .ball:nth-child(2) {
  width: 130px;
  animation: rotation 2800ms linear infinite;
}
#ui .ball:nth-child(3) {
  width: 110px;
  animation: rotation 2600ms linear infinite;
}
#ui .ball:nth-child(4) {
  width: 90px;
  animation: rotation 2400ms linear infinite;
}
#ui .ball:nth-child(5) {
  width: 70px;
  animation: rotation 2200ms linear infinite;
}
#ui .ball:nth-child(6) {
  width: 50px;
  animation: rotation 2000ms linear infinite;
}
#ui .ball:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 20px;
  background: #ff80bf;
  border-radius: 100%;
  opacity: 0.7;
  box-shadow: 0 0 20px 30px #ff80bf;
}
#ui .ball:after {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  width: 20px;
  height: 20px;
  background: #ff80bf;
  border-radius: 100%;
  box-shadow: 0 0 10px 20px #ff80bf;
}

@keyframes rotation {
  0% {
    transform: rotateZ(0deg) scale(1.5);
    opacity: 0;
  }
  100% {
    transform: rotateZ(360deg) scale(0);
    opacity: 1;
  }
}
.sikaku {
    position: relative;
    display: inline-block;
    padding: 0.1rem 1rem;
    text-decoration: none;
    color: #FFF;
    background: #1E90FF;/*色*/
    border-radius: 12px;/* 8px;角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px #1E90FF;
}
.sikaku2 {
    position: relative;
    display: inline-block;
    padding: 0.1rem 1rem;
    text-decoration: none;
    color: #FFF;
    background: #ff69b4;/*色*/
    border-radius: 12px;/* 8px;角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px #ff69b4;
}
.sikaku3 {
    position: relative;
    display: inline-block;
    padding: 1rem 1rem;
    text-decoration: none;
    background: #EDF7EE;/*色*/
    border-radius: 12px;/* 8px;角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px #F2F2F2;
}
.sikaku4 {
    position: relative;
    display: inline-block;
    padding: 0.1rem 1rem;
    text-decoration: none;
    background: #FCF6F8;/*色*/
    border-radius: 12px;/* 8px;角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px #FFF5E5;
}
.sikaku5 {
    position: relative;
    font-size: 0.8rem;
    color: #fff;
    line-height:1.2;
    padding: 0.3rem 0.3rem;
    margin: 17px 0 15px;
    text-decoration: none;
    background: #8282FA;
    border-radius: 10px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    border: solid 0.8px #FFF5E5;
}
.sikaku5 a{
      color: #fff;
}
.sikaku5::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 100%;
  height: 2px;
  background-color: #9696FA; /* #fafad2;*/
  transition: 0.2s ease 0s;
}
.sikaku5::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -7px;
  width: 2px;
  height: 100%;
  background-color: #9696FA; /* #fafad2;*/
  transition: 0.2s ease 0.2s;
}
.sikaku5:hover::before {
  width: 0%;
}
.sikaku5:hover::after {
  height: 0%;
}
.sikaku5:hover {
  text-decoration: none;
  background-color: #a0c4d3;
}
.sikaku5-sub {
    position: relative;
    font-size: 0.8rem;
    color: #fff;
    line-height:1.3;
    padding: 0.3rem 0.3rem;
    margin: 12px 0;
    text-decoration: none;
    background: #ff69b4; /*　#ff69b4;　*/
    border-radius: 10px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    border: solid 0.8px #FFF5E5;
}
/*　.sikaku5-sub a{
      color: #fff;　*/
}
/*　★★★　テーブル追加　★★★　*/
/*ランキング*/
.ranking-list{
	margin-right: 0;
	margin-left: 0;
}

.ranking-list01{
	float: none;
	text-align: center;
}

.rank-desc{
	overflow: hidden;
}
.review-table{
	width: auto;
	margin-top: 0;
	border-top: 1px solid rgba(0,0,0,0.0);
	border-left: 1px solid rgba(0,0,0,0.0);
}
.review-table th{
	width: 40%;
	line-height: 1.0;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid #6495ed;
	background:	#6495ed;
	color: #fff;
}

.review-table td{
	width: 60%;
	line-height: 1.0;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid #6495ed;
	background:	rgba(0,0,0,0.0);
	color: #555555;
}

.review-table th{
	font-weight: normal;
}
.review-table2{
	width: auto;
	margin-top: 0;
	border-top: 1px solid rgba(0,0,0,0.0);
	border-left: 1px solid rgba(0,0,0,0.0);
}
.review-table2 th{
	width: 40%;
	line-height: 1.0;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid #dbcba2;
	background:	#dbcba2;
	color: #fff;
}

.review-table2 td{
	width: 60%;
	line-height: 1.0;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid #dbcba2;
	background:	rgba(0,0,0,0.0);
	color: #555555;
}

.review-table3{
	width: auto;
	margin-top: 0;
	border-top: 1px solid rgba(0,0,0,0.0);
	border-left: 1px solid rgba(0,0,0,0.0);
}
.review-table3 th{
	width: 40%;
	line-height: 1.2;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid #C0A2BD;
	background:	#C0A2BD;
	color: #fff;
}

.review-table3 td{
	width: 60%;
	line-height: 1.2;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.0);
	border-bottom: 1px solid #C0A2BD;
	background:	#fff;
	color: #555555;
}

.review-table4{
	width: 100%;
	margin-top: 0;
	border-top: 1px solid rgba(0,0,0,0.0);
	border-left: 1px solid rgba(0,0,0,0.0);
}
.review-table4 th{
	width: 50%;
        font-family: 'Playfair';
	text-align: left;
        vertical-align: top;
        font-size: 0.9rem;
	line-height: 1.8;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.5);
	border-bottom: 1px solid #000000;
	background:	rgba(0,0,0,0.45);
	color: #fff;
        font-weight:bold;
}
.review-table4 td{
	width: 50%;
        font-family: 'Playfair';
	text-align: left;
        vertical-align: top;
        font-size: 0.9rem;
	line-height: 1.8;
	padding: 0.5em;
	border-right: 1px solid rgba(0,0,0,0.5);
	border-bottom: 1px solid #000000;
	background:	rgba(0,0,0,0.3);
	color: #fff;
        font-weight:bold;
}
.review-table4 .tx-c{
	text-align: center;
}
.star00,
.star05,
.star10,
.star15,
.star20,
.star25,
.star30,
.star35,
.star40,
.star45,
.star50{
	padding-left: 100px;
	white-space: nowrap;
}

.star00{ background: url(../images/icon/icon-star00.png) left center no-repeat; }
.star05{ background: url(../images/icon/icon-star05.png) left center no-repeat; }
.star10{ background: url(../images/icon/icon-star10.png) left center no-repeat; }
.star15{ background: url(../images/icon/icon-star15.png) left center no-repeat; }
.star20{ background: url(../images/icon/icon-star20.png) left center no-repeat; }
.star25{ background: url(../images/icon/icon-star25.png) left center no-repeat; }
.star30{ background: url(../images/icon/icon-star30.png) left center no-repeat; }
.star35{ background: url(../images/icon/icon-star35.png) left center no-repeat; }
.star40{ background: url(../images/icon/icon-star40.png) left center no-repeat; }
.star45{ background: url(../images/icon/icon-star45.png) left center no-repeat; }
.star50{ background: url(../images/icon/icon-star50.png) left center no-repeat; }

	/*Retina（高解像度）ディスプレイ用*/
	@media screen and (-webkit-min-device-pixel-ratio:2),
	(min-resolution: 2dppx){

		.star00{ background: url(../images/icon/icon-star00@2x.png) left center no-repeat; }
		.star05{ background: url(../images/icon/icon-star05@2x.png) left center no-repeat; }
		.star10{ background: url(../images/icon/icon-star10@2x.png) left center no-repeat; }
		.star15{ background: url(../images/icon/icon-star15@2x.png) left center no-repeat; }
		.star20{ background: url(../images/icon/icon-star20@2x.png) left center no-repeat; }
		.star25{ background: url(../images/icon/icon-star25@2x.png) left center no-repeat; }
		.star30{ background: url(../images/icon/icon-star30@2x.png) left center no-repeat; }
		.star35{ background: url(../images/icon/icon-star35@2x.png) left center no-repeat; }
		.star40{ background: url(../images/icon/icon-star40@2x.png) left center no-repeat; }
		.star45{ background: url(../images/icon/icon-star45@2x.png) left center no-repeat; }
		.star50{ background: url(../images/icon/icon-star50@2x.png) left center no-repeat; }

		.star00,
		.star05,
		.star10,
		.star15,
		.star20,
		.star25,
		.star30,
		.star35,
		.star40,
		.star45,
		.star50{
			-webkit-background-size: 85px 15px;
			background-size: 85px 15px;
		}

	}

/*　★★★　画像など淵をボカシ　★★★　*/
.box-shadow {
       box-shadow: 0 0 12px silver;
}
.box-shadow-white {
       box-shadow: 0 0 6px white;
}
/*　★★★　tableボタン　★★★　*/
.btn{

	display: inline-block;
	padding: 0.8em 0.5em 0.8em 0.5em;
	border: 0;
	color: #4b3a24;
	text-decoration: none;
	border-radius: 8px;
}
.btn-detail{
	width: 95%;
	color: #4b3a24;
	background: #ff69b4;
	font-size:1.0em;
    font-weight: bold !important;
	margin: 0 auto !important;
}

.btn-detail:hover{
	background: #ffc98a !important;
}

.btn-detail span{

}

	/*Retina（高解像度）ディスプレイ用*/
	@media screen and (-webkit-min-device-pixel-ratio:2),
	(min-resolution: 2dppx){

		.btn-detail span{

		}

	}
/*　★★★　video　★★★　*/
.video-wrap{
  position: relative;
  width: 100%;
  margin: 10px 0 5px;
  padding-top: 56.25%;
}
.video{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}
.video > p{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video > p > img{
  display: block;
}
.hc{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: yellow;
}
.video-loader,
.video-loader:after{
  position: absolute;
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  z-index: 1;
}
.video-loader{
  margin: 0;
  font-size: 10px;
  top: 50%;
  left: 50%;
  margin: -2.5rem 0 0 -2.5rem;
  position: absolute;
  text-indent: -9999em;
  border-top: .3rem solid rgba(255, 255, 255, 0.5);
  border-right: .3rem solid rgba(255, 255, 255, 0.5);
  border-bottom: .3rem solid rgba(255, 255, 255, 0.5);
  border-left: .3rem solid #FFF;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*　★★★　video-replay　★★★　*/
  .video-replay-wrap{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    background-color: rgba(0,0,0,.7);
  }
  .video-btn-group{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
  }
  .video-btn-group .btn-app{
    width:300px;
    margin: 20px auto 20px;
    color:#FFF;
  }
  .video-btn-group .btn-app:hover,
  .video-btn-group .btn-app:focus,
  .video-btn-group .btn-app:active{
    color: #FFF;
  }
  .video-btn-group .video-replay{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 200px;
    height: 40px;
    color: #FFF;
    background-color: transparent;
    border: 1px solid #FFF;
    border-radius: 20px;
} 
/*　★★★　fixed-banner　★★★　*/
.fixed-banner-wrap{
  display:flex;
  width: 100%;
  max-width: 420px;
  padding: 1px 5px 0 0;
  position: fixed;
  z-index: 1000;
  border-top:1px solid rgba(0,0,0,0.00);/*　#ddd;　*/
  background-color: rgba(0,0,0,0.00);
}
.ul-flex {
    display: flex;
    width: 100%;
    justify-content: space-between;/*space-between*/
}
.li-type0 {
    flex-basis: 54px;
}
.li-type1 {
    width: 25%; 
    padding: 0 2px 0px;
}
.li-type2 {
    flex-grow: 1;
}
.li-type3 {
    flex-grow: 1;
}
.li-type4 {
    flex-grow: 1;
}
.fixed-banner-wrap a{
  text-decoration: none !important;
}
.fixed-banner-icon{
  width: 54px !important;
  height: 54px !important;
}
.fixed-banner-icon img{
  width:100%;
  width: 54px !important;
  height: 54px !important;
/*　 border: 1px solid #ddd;　*/
  border-radius: 25%;
}
.btn-app {
  display: flex;
  width:100%;
  padding: 1px 3px 0px;
  margin-bottom: 15px;
  background-color:rgba(0,0,0,0.02);/*　#2b95ff;　*/
  text-decoration: none !important;
  border-radius: 5px;
}
.btn-border {
  display:inline-block;
  width:100%;
  background-color:#2b95ff;/*　#FF942B;　*/
  border:0.8px solid #4169e1;
  border-radius: 8px;
  padding: 5px 0.5px 3px;
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
  color: #fff;
  font-family: 'Playfair';
  font-size: 0.8rem;
}
/*　★★★　lplayout　★★★　*/
.lplayout-main{
  max-width: 420px;
  margin: 0 auto 12px;
}
/*　★★★　type-shine　★★★　*/
.type-shine {
  position: relative;
  overflow: hidden;
}
.type-shine:before {
 -webkit-animation: shine 2.5s ease 1.5s;
  content:"";
  position: absolute;
  top: 0;
  left: -250px;
  width: 200%;
  height: 100%;
  transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);
  animation-iteration-count: infinite;
}
@-webkit-keyframes shine {
  0% {transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);background: rgba(255,255,255,0.5);}
  100% {transform: rotate3d(0,0,1,-25deg) translate3d(0,150%,0);background: rgba(255,255,255,0.5);}
}
/*　★★★　headder　★★★　*/
.app-point {
  vertical-align: top;
  display: inline-block;
  font-size: 16px;
  color: #D00;
  height: 25px;
  line-height: 25px;
  font-feature-settings: "palt";
}
.app-name {
  width: 100%;
  margin: 0 0 2px;
  font-size: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
/*   overflow: hidden; */
  height: 97px;
}
.app-name2 {
  width: 100%;
  margin: 0 0 2px;
  font-size: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
/*   overflow: hidden; */
  height: 45px;
}
.star-wrap-ul {
  vertical-align: top;
  display: inline-block;
  height: 25px;
  line-height: 25px;
}
.star-wrap {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  margin: 0 2px 0 0;
  position: relative;
}
.star-wrap>i {
  position: absolute;
  font-size: 16px;
  overflow: hidden;
}
.yellow {
  color: #ffaa00;
}
.gray {
  color: #ccc;
}
.star-wrap.half>i.yellow {
  width: 0.5em;
}
.star-wrap>i:before {
  display: inline-block;
  width: 100%;
}
.star-wrap.detail {
  width: 20px;
  height: 20px;
  position: relative;
  margin: 0;
  display: inline-block;
}
.star-wrap.detail>i {
  display: block;
  font-size: 16px;
  margin: 4px 0 0 2px;
  text-align: left;
  width: 100%;
}
.star-wrap.detail>i:before {
  display: block;
  width: 100%;
  margin: 0;
}
.star-wrap.detail.half>i.yellow {
  width: 0.5em;
}
.glyphicon-star:before{content:"\e006"}
.glyphicon-star-empty:before{content:"\e007"}
.content-header {
  display: table;
  font-size: 0px;
  margin: 10px 0;
  width: 100%;
  height: 65px;
  font-size: 1.1rem;
}
.content-header>.left {
  display: table-cell;
  vertical-align: middle;
  font-size: 1rem;
  width: 68px;
}
.content-header>.center2 {
  display: table-cell;
  vertical-align: middle;
  padding-left:6px;
}
.content-header>.right {
  width: 68px;
  display: table-cell;
  vertical-align: middle;
}
.content-header>.left>img {
  width: 65px;
  border: 1px solid #ddd;
  border-radius: 25%;
}
.app-price {
  display: inline-block;
  border-radius: 4px;
  height: 28px;
  line-height: 28px;
  font-size: .8rem;
  float:right;
  text-align: center;
  padding: 0 5px;
}
/*
.app-price.point {
  border: 1px solid #069bcb;
  color: #069bcb;
}
*/
.app-price.point {
  display:inline-block;
  border:1px solid #069bcb;
  border-radius: 4px;
  padding: 1px 2px;
  margin:0 0 7px;
  color:#069bcb;
  font-size: 12px;
}
.list-unstyled{
  padding-left: 0;
  list-style: none;
}
.src-tag{
  display:inline-block;
  border:1px solid #fda92a;
  border-radius: 4px;
  padding: 3px 8px;
  margin:0 0 5px;
  color:#fda92a;
  font-size: 12px;
}
.src-tag-ul{
  margin: 0 0 5px;
}
.container {
    padding: 0 10px;
  }
.tab-content .tab-box {
  letter-spacing: normal;
}
#contents {
  margin: 10px 0;
}
.content-box+.content-box {
  margin-top: 30px;
}
#tab1:checked~.tab-box>#content-1 {
  visibility:visible;
  height:initial;
}
.content-header {
  display: table;
  font-size: 0px;
  margin: 10px 0;
  width: 100%;
  height: 65px;
  font-size: 1.1rem;
}
.srcpage.content-header>.left>img {
  width: 80px;
}
.srcpage.content-header>.left>img {
  width: 80px;
}.content-header>.left>img {
  width: 65px;
  border: 1px solid #ddd;
  border-radius: 25%;
}.content-header>.left {
  display: table-cell;
  vertical-align: middle;
  font-size: 1rem;
  width: 68px;
}
li.icon {
  width: 45px;
  padding: 0 10px 0 0;
}
li.icon img {
  width: 100%;
  border-radius: 50%;
}
li.name {
  line-height: 1.2rem;
}
.star {
  color: #ffaa00;
}
li.date {
  width: 140px;
  padding: 0;
  text-align: right;
  color: #999;
  font-size: .9em;
}
/*　★★★　横並び　★★★　*/
[class^="img-flex-"] {
        margin-bottom: 20px;
	display: -webkit-flex;
	display: flex;
-webkit-justify-content: space-between;
	justify-content: space-between;
}
.img-flex-2 > img,
.img-flex-2 a { width: 50%; }
.img-flex-3 > img,
.img-flex-3 a{ width: 32%; }
.img-flex-4 > img,
.img-flex-4 a { width: 24%; }
/*　★★★　スローアニメーション アニメイト duration　★★★　*/
.slow-animation {
 -webkit-animation-duration: 5s;
 animation-duration: 5s;
}
.slow-animation2 {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
}
.slow-animation3 {
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
}
.slow-animation4 {
 -webkit-animation-duration: 4s;
 animation-duration: 4s;
}
/*　★★★　ハンバーガーメニュー　★★★　*/
header {
  padding:10px;
  background: rgba(0,0,0,0);
}
#nav-drawer {
  position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}
/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 1.3px;/*線の太さ*/
  width: 30px;/*長さ*/
  background:  #6D5824;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -10px;
}
#nav-open span:after {
  bottom: -20px;
}
/*ハンバーガーアイコンをCSSだけで表現*/
.nav-open2 span {
    position: relative;
    display: inline-block;
    padding: 0rem 0.1rem;
    margin: 0 -2px;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2rem;
    color: #fff;
    font-family: 'Playfair';
    background: rgba(0,0,0,0.35); /*#F497B8;  #ff69b4;色*/
    border-radius: 3px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(0,0,0,0.0), inset 0 -2px 0 rgba(0,0,0,0.0);
    border: solid 1px rgba(0,0,0,0.0); /*#F46F9E;  #F57DA7;*/
}
.nav-open2 a{
  color: #fff;
  text-decoration: none;
  letter-spacing: -1px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 25px;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}
#nav-close span {
  display:inline-block;
  border:1px solid #069bcb;
  border-radius: 4px;
  padding: 0 5px;
  margin:5px 2px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.2rem;
}
/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 35px;
  left: 2px;
  z-index: 9999;/*最前面に*/
  width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 80%;
  background: rgba(0,0,0,0);/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* ★★★★★テーブル 投稿プロフィール★★★★★ */
.flex_test-item table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}
.flex_test-item table th,table td{
  border-radius: 3px;
  text-align: center;
  padding: 3px 0;
  font-size: 0.8rem;
}
.flex_test-item table th{
  background-color: #4A91EC;
  color: white;
  border:solid 1px #4A91EC;
}
.flex_test-item table td{
  background-color: #ff69b4;
  border:solid 1px #ff69b4;
  color: white;
}
/* ★★★★★横スクロール★★★★★ */
.horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 0px 8px;
  display: -ms-flexbox;
  display: flex; }

.horizontal_scroll > li {
  width: 100%;
  min-width: 220px;
  list-style-type:none; }

.horizontal_scroll > li:not(:last-child) {
  margin-right: 5px; }

.horizontal_scroll > li:last-child {
  padding-right: 5px; }

.horizontal_scroll img {
  vertical-align: bottom; }

/* ★★★★★横並びFLEX★★★★★ */
.flex_test-box {
    background-color: #fff;     /* 背景色指定 */
    padding: 0;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items: stretch;        /* 縦の位置指定 */
    justify-content: flex-start;
    border-radius: 8px;
}
 
.flex_test-item {
    padding: 3px;
    margin:  0px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 50%;                 /* 幅指定 */
    border:0.8px solid #aaa;

}
.flex_test-item img {
        border-radius: 5px;
}
.flex_test-item span {
        font-size: 0.8rem;
        color: #5D3B22;
}
.flex_test-item:nth-child(1) {
    background-color: #f8f8ff; /* 背景色指定 */
}
 
.flex_test-item:nth-child(2) {
    background-color: #f8f8ff; /* 背景色指定 */
}
 
.flex_test-item:nth-child(3) {
    background-color: #f8f8ff; /* 背景色指定 */
}
 
.flex_test-item:nth-child(4) {
    background-color:  #f8f8ff; /* 背景色指定 */
}
.flex_test-box2 {
    background-color: #fff;     /* 背景色指定 */
    padding: 0;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items: stretch;        /* 縦の位置指定 */
    justify-content: center;
    border-radius: 8px;
}
.flex_test-item2 {
    padding: 3px;
    margin:  0px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 50%;                 /* 幅指定 */
        border:1px solid #fff;
        border-radius: 8px;
}
.flex_test-item2 img {
        border-radius: 4px;
        width: 55px;
        height: 55px;
}
.flex_test-item2 span {
        font-size: 1rem;
        color: grey;
}
.flex_test-item2:nth-child(1) {
    background-color: #fff; /* 背景色指定 */
    flex-basis:  80px;         /* 幅指定 */
}
 
.flex_test-item2:nth-child(2) {
    background-color: #fff; /* 背景色指定 */
}
 
.flex_test-item2:nth-child(3) {
    background-color: #fff; /* 背景色指定 */
}
 
.flex_test-item2:nth-child(4) {
    background-color:  #fff; /* 背景色指定 */
}
/* ★★★★★横並びFLEX flex_menu-box★★★★★ */
.flex_menu-box {
    background-color: #fff;     /* 背景色指定 */
    padding: 0;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items: stretch;        /* 縦の位置指定 */
    justify-content: center;
    border-radius: 8px;
}
.flex_menu-item {
    padding: 3px;
    margin:  0px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 100%;                 /* 幅指定 */
        border:1px solid #aaa;
        border-radius: 8px;
}
.flex_menu-item img {
        border-radius: 8px;
}
.flex_menu-item span {
        font-size: 0.9rem;
        color: #000000;
}
.flex_menu-item:nth-child(1) {
    background-color: #fff; /* 背景色指定 */
}
 
.flex_menu-item:nth-child(2) {
    background-color: #555; /* 背景色指定 */
}
 
.flex_menu-item:nth-child(3) {
    background-color: #fff; /* 背景色指定 */
}
 
.flex_menu-item:nth-child(4) {
    background-color:  #fff; /* 背景色指定 */
}
/* ★★★★★吹き出し★★★★★ */
/* CHECK */
.balloon1{
  position: relative;
  left:35%;
  padding: 40px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  font-size: 1.6rem;
  font-family: 'Gelasio', serif;
  letter-spacing:-1px;
  background-color: #ff9800;
}
.balloon1 span {
  position: absolute;
  left: 6%;
  line-height:1.2;
  color: #ffffff;
  font-size: 1.6rem;
  font-family: 'Gelasio', serif;
  letter-spacing:-1px;
}
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 15px;
  bottom: 5px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}


/* POINT */
.balloon2{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}


/* LOOK */
.balloon3{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon3::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  top: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}


/* GOOD */
.balloon4{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon4::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  top: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}
/* ★★　斜めバックグラウンド　右上　★★*/
.contents{
position: relative;
overflow: hidden;
}
.contents:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #FFF5E5;/* 薄いイエロー*/
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.contents2{
position: relative;
overflow: hidden;
}
.contents2:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 2% -10% 0;
background: #9891CD;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.contents3{
position: relative;
overflow: hidden;
}
.contents3:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 80%;
margin: 2% 0 0 -15%;
background: #91cd99; /* #6276b5 */
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.contents_inner{
padding: 0px 0 75px;
position: relative;
}
/* ★★　斜めバックグラウンド　左上　★★*/
.contents3-right{
position: relative;
overflow: hidden;
}
.contents3-right:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 80%;
margin: 2% 0 0 -15%;
background: #91cd99;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.contents2-right{
position: relative;
overflow: hidden;
}
.contents2-right:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 80%;
margin: 2% 0 0 -15%;
background: #9891CD;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.contents-right_inner{
padding: 0px 0 75px;
position: relative;
}
/* ★★　横ループ　★★*/
.loop_wrap {
  display: flex;
  width: 100wh;
  height: 150px;
  max-width: 420px !important;
  overflow: hidden;
}
.loop_wrap img {
  width: auto;
  height: 100%;
  max-width: 2000px !important;
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}
.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}
/*★★★★★  New box  ★★★★★*/
.mybox{
 border: 1px solid #ef858c;	/* 線の太さ・種類・色 */
 border-radius: 5px;
 padding: 45px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
 position: relative;
 z-index: 0;
}
.mybox:before{
 background-color: #ef858c;	/* タイトル部分背景色 */
 border-radius: 5px 5px 0px 0px;
 color: #fff;	/* タイトル部分文字色 */
 content: 'TITLE';
 height: 25px;	/* タイトル部分高さ */
 padding: 5px 10px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
}
.mybox:after {
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #ef858c transparent transparent transparent;	/* 吹き出し三角部分の色 */
 content: "";
 position: absolute;
 top: 35px;
 left: 10px;
 width: 0px;
 height: 0px;
 z-index: 1;
}
.mybox2 {
 background-color: ;#fff; /* 背景色 */
 border: 1px solid #ccc; /* 線の太さ・種類・色 */
 box-shadow:1px 1px 2px 0px #ccc;
 -moz-box-shadow:1px 1px 2px 0px #ccc;
 -webkit-box-shadow:1px 1px 2px 0px #ccc;
 -o-box-shadow:1px 1px 2px 0px #ccc;
 margin: 18px 0px 13px; /* 外側の余白 上下・左右 */
 padding: 30px 10px 10px 10px; /* 内側の余白 上・右・下・左 */
 position: relative;
 z-index: 0;
}
.mybox2:after{
 background-color: #d9ccb3; /* マステ部分の色1 */
 background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); /* マステ部分の色2 */
 background-position: 0 0, 12px 12px;
 background-size: 24px 24px;
 border-left: 2px dotted rgba(255,255,255,0.9);
 border-right: 2px dotted rgba(255,255,255,0.9);
 box-shadow: 0 0 5px rgba(255,255,255,0.5);
 content: 'coment';
 display: block;
 margin: 0 0 10px 0;
 padding: 5px 20px;
 color: #fff;  /* マステ部分文字色 */
 text-align: center;
 position: absolute;
 top: -10px;
 left: 20px;
 transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
}
.mybox3 {
 background-color: ;#fff; /* 背景色 */
 border: 1px solid #ccc; /* 線の太さ・種類・色 */
 box-shadow:1px 1px 2px 0px #ccc;
 -moz-box-shadow:1px 1px 2px 0px #ccc;
 -webkit-box-shadow:1px 1px 2px 0px #ccc;
 -o-box-shadow:1px 1px 2px 0px #ccc;
 margin: 18px 0px; /* 外側の余白 上下・左右 */
 padding: 30px 25px 10px 25px; /* 内側の余白 上・右・下・左 */
 position: relative;
 z-index: 0;
}
.mybox3:after{
 background-color: #d9ccb3; /* マステ部分の色1 */
 background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); /* マステ部分の色2 */
 background-position: 0 0, 12px 12px;
 background-size: 24px 24px;
 border-left: 2px dotted rgba(255,255,255,0.9);
 border-right: 2px dotted rgba(255,255,255,0.9);
 box-shadow: 0 0 5px rgba(255,255,255,0.5);
 content: 'coment';
 display: block;
 margin: 0 0 10px 0;
 padding: 5px 20px;
 color: #fff;  /* マステ部分文字色 */
 text-align: center;
 position: absolute;
 top: -10px;
 left: 20px;
 transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
}
/*★★★★★  続きを読む  ★★★★★*/
#text-wrap {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    padding: 0px;
}
 
.hide-text {
    display: none;
}
button.readmore {
    position: relative;
    height: 80px;
    width: 90px;
    margin: 10px auto 40px;
    display: block;
    background-color: transparent;
    color: #666;
    padding-bottom: 40px;
    border: none;
    outline: 0;
    transition: .5s;
    -erbkit-transition: .5s;
}
button.readmore::after {
    content: " ";
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: solid 3px #666;
    border-right: solid 3px #666;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    right: 28px;
    top: 25px;
    transition: .5s;
    -erbkit-transition: .5s;
}
button.readmore:hover::after {
    top: 40px;
}
.on-click {
    color: transparent!important;
}
.on-click {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}
/*★★★★★  オープニングアニメーション  ★★★★★*/
#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #efefef;
 
}
#loader .loader-slide p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 38%;
  margin: auto;
  color: black;
  font-size: 1.5rem;
  width: 300px;
  height: 40px;
  font-weight: normal;
  font-family: 'Gelasio', serif;
}
#loader .loader-slide p span {
  color: #ffd700;
  font-size: 2.3rem;
  font-weight: normal;
  font-family: 'Niconne', cursive;
}
#loader .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes slideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
/*フェードインアニメ*/
/*左から右にフェードイン*/
.left-to-right {
  opacity: 0.1;
  transform: translateX(-25px);
  transition: all 1.8s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}
/*右から左にフェードイン*/
.right-to-left {
  opacity: 0.1;
  transform: translateX(25px);
  transition: all 1.8s;
}
.right-to-left.scrollin {
  opacity: 1;
  transform: translate(0);
}
/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(25px);
  transition: all 1.8s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}
/*============================
header style2
============================*/
#top-head2 {
  width: 100%;
  max-width: 420px;
  height: 25px;
  background: #fff;
  border-bottom:1px solid #ddd;
  opacity: 0.9;
  display: flex;
  position: fixed;
  z-index: 999;
}
#top-head2 .inner2 {
  width: 67%;
  max-width: 420px;
  margin: 0 0 0 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*logo style*/
.logo {
  font-size: 1.4rem;
  color: #000000;
  font-family: 'Niconne';
  text-decoration: none;
}
.logo a {
  text-decoration: none;
  color: #000000;
}
/*============================
手書きボックス box
============================*/
.memox{
position:relative;
background:#fffde7;
width:85%;
margin:2rem auto 6rem;
padding:1.5rem 1rem;
transform: rotate(-2deg);
box-shadow:1px 1px 4px rgba(0,0,0,0.2);
color:#795548;
font-size:0.8rem;
}
.memox::before{
content:'ここがポイント';
position:relative;
display:inline-block;
border-bottom:3px solid #795548;
border-radius: 0 0 40% 5% / 0 0 15% 20%;
padding:0 1em 0.1em 0.2em;
font-size:110%;
font-weight:bold;
transform: rotate(-5deg);
}
.memox::after{
content:'';
position:absolute;
left:50%;
top:-15px;
margin-left:-75px;
width:150px;
height:30px;
background:rgba(245,245,245,0.7);
box-shadow:1px 1px 4px rgba(0,0,0,0.2);
transform: rotate(-4deg);
}
.memox ol{
margin:1em 0.5em 0 2em;
padding:0 0 0 0;
}
.memox ol li{
margin-bottom:0.5em;
}
/*============================
gg-heart gg-heart gg-heart　ハート
============================*/
 .gg-heart,
.gg-heart::after {
 border: 1.5px solid #FF0000;/*#00E19F;#FF0000;#6D5824;*/
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 width: 10px;
 height: 8px;
 border-bottom: 0
}
.gg-heart {
 box-sizing: border-box;
 position: relative;
 transform:
 translate(
 calc(-10px / 2 * var(--ggs,1)),
 calc(-6px / 2 * var(--ggs,1))
 )
 rotate(-45deg)
 scale(var(--ggs,1));
 display:inline-block;
}
.gg-heart::after,
.gg-heart::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-heart::after {
 right: -10px;
 transform: rotate(90deg);
 top: 7px
}
.gg-heart::before {
 width: 11px;
 height: 11px;
 border-left: 1.5px solid #FF0000;
 border-bottom: 1.5px solid #FF0000;
 left: -1.5px;
 top: 5.5px
} 
/*============================
gg-heart-non　ハート色なし
============================*/
 .gg-heart-non,
.gg-heart-non::after {
 border: 1.5px solid;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 width: 10px;
 height: 8px;
 border-bottom: 0
}
.gg-heart-non {
 box-sizing: border-box;
 position: relative;
 transform:
 translate(
 calc(-10px / 2 * var(--ggs,1)),
 calc(-6px / 2 * var(--ggs,1))
 )
 rotate(-45deg)
 scale(var(--ggs,1));
 display:inline-block;
}
.gg-heart-non::after,
.gg-heart-non::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-heart-non::after {
 right: -10px;
 transform: rotate(90deg);
 top: 7px
}
.gg-heart-non::before {
 width: 11px;
 height: 11px;
 border-left: 1.5px solid;
 border-bottom: 1.5px solid;
 left: -1.5px;
 top: 5.5px
} 
/*============================
gg-push-chevron-down-r □四角↓プッシュ 色あり
============================*/
 .gg-push-chevron-down-r {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 top: 5px;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 22px;
 border: 1.5px solid #6D5824;
 border-radius: 4px
}
.gg-push-chevron-down-r::after,
.gg-push-chevron-down-r::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 border-bottom: 2px solid #00E19F;
}
.gg-push-chevron-down-r::before {
 bottom: 5px;
 width: 8px;
 height: 2px;
 left: 6px
}
.gg-push-chevron-down-r::after {
 width: 6px;
 height: 6px;
 border-right: 2px solid #00E19F;
 transform: rotate(45deg);
 left: 7px;
 top: 3px
} 
/*============================
gg-push-chevron-down-r2 □四角↓プッシュ 色なし
============================*/
 .gg-push-chevron-down-r2 {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 top: 5px;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 22px;
 border: 1.5px solid;
 border-radius: 4px
}
.gg-push-chevron-down-r2::after,
.gg-push-chevron-down-r2::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 border-bottom: 2px solid;
}
.gg-push-chevron-down-r2::before {
 bottom: 5px;
 width: 8px;
 height: 2px;
 left: 6px
}
.gg-push-chevron-down-r2::after {
 width: 6px;
 height: 6px;
 border-right: 2px solid;
 transform: rotate(45deg);
 left: 7px;
 top: 3px
} 
/*============================
gg-push-chevron-right-o　〇→矢印　右縦棒Iあり
============================*/
.gg-push-chevron-right-o {
    box-sizing: border-box;
    position: relative;
    display:inline-block;
    top: 5px;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 100px
}
.gg-push-chevron-right-o::after,
.gg-push-chevron-right-o::before {
    content: "";
    display:inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 2px;
    height: 8px;
    border-right: 2px solid;
    top: 5px;
    right: 5px
}
.gg-push-chevron-right-o::after {
    width: 6px;
    height: 6px;
    border-bottom: 2px solid;
    transform: rotate(-45deg);
    right: 9px;
    top: 6px
}
/*============================
gg-chevron-down-o 　〇↓矢印 中矢印イエロー
============================*/
.gg-chevron-down-o {
    box-sizing: border-box;
    position: relative;
    display:inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 100px
}
.gg-chevron-down-o::after {
    content: "";
    display:inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #FFE248;
    border-right: 2px solid #FFE248;
    transform: rotate(45deg);
    left: 7px;
    top: 6px
}
/*============================
gg-chevron-down-o 　〇↓矢印 中矢印グリーン
============================*/
.gg-chevron-down-green {
    box-sizing: border-box;
    position: relative;
    display:inline-block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 100px
}
.gg-chevron-down-green::after {
    content: "";
    display:inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #00A474;
    border-right: 2px solid #00A474;
    transform: rotate(45deg);
    left: 7px;
    top: 6px
}
/*============================
gg-crown gg-crown　王冠 クラウン
============================*/
.gg-crown {
    box-sizing: border-box;
    position: relative;
    display:inline-block;
    transform: scale(var(--ggs,1));
    width: 19px;
    height: 12px;
    border: 1.5px solid;
    border-top-color: transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding-top: 4px
}
.gg-crown::after,
.gg-crown::before {
    content: "";
    display:inline-block;
    position: absolute;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-bottom: 1.5px solid;
    border-left: 1.5px solid;
    transform: rotate(-45deg);
    top: -4px
}
.gg-crown::before {
    border-top-left-radius: 2px;
    left: -1px
}
.gg-crown::after {
    border-bottom-right-radius: 2px;
    right: -1px
}
/*============================
gg-trending　gg-trending
============================*/
.gg-trending {
    box-sizing: border-box;
    position: relative;
    display:inline-block;
    transform: rotate(-45deg) scale(var(--ggs,1));
    width: 10px;
    height: 8px;
    border-top: 2px solid;
    border-right: 2px solid
}

.gg-trending::after,
.gg-trending::before {
    content: "";
    display:inline-block;
    box-sizing: border-box;
    position: absolute
}

.gg-trending::before {
    background: currentColor;
    left: 8px;
    width: 10px;
    height: 2px;
    bottom: 0
}

.gg-trending::after {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid;
    bottom: -3px;
    right: -14px
}
/*============================
gg-chanel gg-chanel gg-chanel
============================*/
.gg-chanel {
    box-sizing: border-box;
    position: relative;
    display:inline-block;
    transform: scale(var(--ggs,1));
    width: 21px;
    height: 18px
}
.gg-chanel::after,
.gg-chanel::before {
    content: "";
    display:inline-block;
    position: absolute;
    box-sizing: border-box;
    border: 3px solid;
    width: 18px;
    height: 18px;
    border-radius: 22px
}
.gg-chanel::before {
    border-left-color: transparent;
    left: -3px
}
.gg-chanel::after {
    border-right-color: transparent;
    right: -3px
}
/*============================
gg-bell gg-bell gg-bell
============================*/
 .gg-bell,
.gg-bell::before {
 border-top-left-radius: 100px;
 border-top-right-radius: 100px
}
.gg-bell {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 border: 2px solid;
 border-bottom: 0;
 width: 14px;
 height: 14px
}
.gg-bell::after,
.gg-bell::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-bell::before {
 background: currentColor;
 width: 4px;
 height: 4px;
 top: -4px;
 left: 3px
}
.gg-bell::after {
 border-radius: 3px;
 width: 16px;
 height: 10px;
 border: 6px solid transparent;
 border-top: 1px solid transparent;
 box-shadow:
 inset 0 0 0 4px,
 0 -2px 0 0;
 top: 14px;
 left: -3px;
 border-bottom-left-radius: 100px;
 border-bottom-right-radius: 100px
} 
/*============================
gg-bell2
============================*/
 .gg-bell2,
.gg-bell2::before {
 border-top-left-radius: 100px;
 border-top-right-radius: 100px
}
.gg-bell2 {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 border: 2px solid gold;
 border-bottom: 0;
 width: 14px;
 height: 14px
}
.gg-bell2::after,
.gg-bell2::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-bell2::before {
 background: currentColor;
 width: 4px;
 height: 4px;
 top: -4px;
 left: 3px
}
.gg-bell2::after {
 border-radius: 3px;
 width: 16px;
 height: 10px;
 border: 6px solid transparent;
 border-top: 1px solid transparent;
 box-shadow:
 inset 0 0 0 4px,
 0 -2px 0 0;
 top: 14px;
 left: -3px;
 border-bottom-left-radius: 100px;
 border-bottom-right-radius: 100px
} 
/*============================
gg-components gg-components
============================*/
 .gg-components {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform:
 rotate(45deg)
 scale(var(--ggs,1));
 width: 14px;
 height: 14px;
 background:
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 0 0/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 4px 0/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 8px 0/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 12px 0/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 0 8px/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 4px 8px/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 8px 8px/2px 6px,
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 12px 8px/2px 6px
}
.gg-components::after,.gg-components::before {
 content: "";
 display:inline-block;
 position: absolute;
 width: 6px;
 height: 2px;
 border-top: 6px double;
 border-bottom: 6px double
}
.gg-components::after {
 right: 0
} 
/*============================
gg-edit-unmask gg-edit-unmask
============================*/
 .gg-edit-unmask,
.gg-edit-unmask::after {
 display:inline-block;
 box-sizing: border-box;
 border-radius: 22px
}
.gg-edit-unmask {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 20px;
 border: 2px solid transparent
}
.gg-edit-unmask::after {
 content: "";
 position: absolute;
 width: 4px;
 height: 4px;
 background: currentColor;
 top: 6px;
 left: 6px;
 box-shadow:
 0 7px 0 1px,
 0 -7px 0 1px,
 -7px 0 0 1px,
 7px 0 0 1px
} 
/*============================
gg-music-note gg-music-note
============================*/
 .gg-music-note {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 2px;
 height: 14px;
 background: currentColor
}
.gg-music-note::after,
.gg-music-note::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 border: 2px solid
}
.gg-music-note::before {
 bottom: -4px;
 width: 8px;
 height: 8px;
 left: -6px;
 border-radius: 10px
}
.gg-music-note::after {
 width: 10px;
 height: 6px;
 top: -4px;
 left: 0;
 border-radius: 2px;
 transform: skewY(-15deg)
} 
/*============================
gg-smile-mouth-open gg-smile-mouth-open
============================*/
 .gg-smile-mouth-open {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 20px;
 border: 1px solid;
 border-radius: 100px
}
.gg-smile-mouth-open::after,
.gg-smile-mouth-open::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 left: 5px
}
.gg-smile-mouth-open::before {
 background: #800080;
 box-shadow: 6px 0 0;
 width: 2px;
 height: 2px;
 border-radius: 50%;
 top: 5px
}
.gg-smile-mouth-open::after {
 width: 8px;
 height: 4px;
 border-radius: 150px;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border: 2px solid #ff1493;
 top: 9px
}
/*============================
gg-smile gg-smile gg-smile
============================*/
 .gg-smile {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 20px;
 border: 1px solid;
 border-radius: 100px
}
.gg-smile::after,
.gg-smile::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 left: 5px
}
.gg-smile::before {
 background: currentColor;
 box-shadow: 6px 0 0;
 width: 2px;
 height: 2px;
 border-radius: 50%;
 top: 5px
}
.gg-smile::after {
 width: 8px;
 height: 4px;
 border-radius: 150px;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border: 2px solid;
 border-top-color: transparent;
 top: 9px
} 
/*============================
gg-hello gg-hello gg-hello
============================*/
 .gg-hello {
 display:inline-block;
 position: relative;
 box-sizing: border-box;
 transform: scale(var(--ggs,1));
 overflow: hidden;
 width: 20px;
 height: 20px;
 border-radius: 6px;
 border-bottom-left-radius: 0
}
.gg-hello::after,
.gg-hello::before {
 content: "";
 display:inline-block;
 position: absolute;
 box-sizing: border-box
}
.gg-hello::before {
 width: 30px;
 height: 30px;
 border: 8px solid;
 left: -5px;
 top: -5px;
 border-radius: 30px
}
.gg-hello::after {
 width: 10px;
 height: 5px;
 background: #F4AEF1;
 border-bottom-left-radius: 30px;
 border-bottom-right-radius: 30px;
 bottom: 5px;
 left: 5px
} 
/*============================
gg-awards gg-awards gg-awards
============================*/
 .gg-awards {
 display: block;
 position: relative;
 transform: scale(var(--ggs,1));
 box-sizing: border-box;
 width: 16px;
 height: 20px;
 border: 4px solid transparent;
 border-top: 12px solid transparent;
 border-bottom: 0;
 box-shadow:
 inset 4px 0 0 -2px,
 inset -4px 0 0 -2px
}
.gg-awards::after,
.gg-awards::before {
 content: "";
 box-sizing: border-box;
 position: absolute;
 display:inline-block;
 border: 2px solid
}
.gg-awards::before {
 width: 14px;
 height: 14px;
 border-radius: 22px;
 top: -12px;
 left: -3px
}
.gg-awards::after {
 width: 6px;
 height: 6px;
 border-right-color: transparent;
 border-bottom-color: transparent;
 border-bottom-left-radius: 1px;
 border-top-right-radius: 1px;
 transform: rotate(45deg);
 bottom: -3px;
 left: 1px
} 
/*============================
gg-drop-opacity gg-drop-opacity
============================*/
 .gg-drop-opacity {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: rotate(45deg) scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border-radius: 0 100% 100% 100%;
 box-shadow: inset 0 0 0 2px #C2E0FF;
 overflow: hidden
}
.gg-drop-opacity::before {
 content: "";
 display:inline-block;
 position: absolute;
 box-sizing: border-box;
 width: 24px;
 height: 24px;
 background: #2B95FF;
 transform: rotate(-45deg);
 right: -10px;
 bottom: -16px;
} 
/*============================
gg-pen gg-pen gg-pen gg-pen
============================*/
 .gg-pen {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: rotate(-45deg) scale(var(--ggs,1));
 width: 14px;
 height: 4px;
 border-right: 2px solid transparent;
 box-shadow:
 0 0 0 2px,
 inset -2px 0 0;
 border-top-right-radius: 1px;
 border-bottom-right-radius: 1px;
 margin-right: -2px
}
.gg-pen::after,
.gg-pen::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-pen::before {
 background: #FF0000;
 border-left: 0;
 right: -6px;
 width: 3px;
 height: 4px;
 border-radius: 1px;
 top: 0
}
.gg-pen::after {
 width: 8px;
 height: 7px;
 border-top: 4px solid transparent;
 border-bottom: 4px solid transparent;
 border-right: 7px solid #00A474;
 left: -11px;
 top: -2px
} 
/*============================
gg-framer gg-framer gg-framer
============================*/
 .gg-framer {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 12px;
 height: 20px;
 overflow: hidden
}
.gg-framer::after,
.gg-framer::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 background: currentColor
}
.gg-framer::before {
 width: 20px;
 height: 6px;
 transform: skewX(45deg);
 top: 6px;
 left: -11px;
 box-shadow: 20px -6px 0
}
.gg-framer::after {
 width: 6px;
 height: 8px;
 transform: skewY(45deg);
 bottom: 4px;
 border-top-left-radius: 4px;
 opacity: .5
} 
/*============================
gg-card-hearts gg-card-hearts
============================*/
 .gg-card-hearts {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 22px;
 border: 2px solid;
 border-radius: 3px
}
.gg-card-hearts::after,
.gg-card-hearts::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 width: 4px;
 height: 6px;
 background: currentColor;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 transform: rotate(45deg);
 left: 6px;
 top: 6px
}
.gg-card-hearts::after {
 transform: rotate(-45deg);
 left: 4px
} 
/*============================
gg-trophy gg-trophy gg-trophy
============================*/
 .gg-trophy {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 10px;
 height: 12px;
 border: 2px solid;
 border-bottom-left-radius: 100px;
 border-bottom-right-radius: 100px
}
.gg-trophy::after,.gg-trophy::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-trophy::before {
 box-shadow: inset 0 0 0 2px,0 2px 0 0;
 bottom: -4px;
 width: 6px;
 height: 4px;
 border-left: 2px solid transparent;
 border-right: 2px solid transparent;
 left: 0
}
.gg-trophy::after {
 width: 16px;
 height: 6px;
 border-left: 2px solid ;
 border-right: 2px solid ;
 left: -5px;
 top: 0
} 
/*============================
gg-loadbarを.gg-loadbar-altにした。
============================*/
 @keyframes loadbar {
 0%,to { left: 0; right: 80% }
 25%,75% { left: 0; right: 0 }
 50% { left: 80%; right: 0 }
}
.gg-loadbar-alt,
.gg-loadbar-alt::before {
 display:inline-block;
 box-sizing: border-box;
 height: 4px
}
.gg-loadbar-alt {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 18px
}
.gg-loadbar-alt::before {
 content: "";
 position: absolute;
 border-radius: 4px;
 background: currentColor;
 animation: loadbar 2s cubic-bezier(0,0,.58,1) infinite
} 
/*============================
gg-keyhole gg-keyhole gg-keyhole
============================*/
 .gg-keyhole,
.gg-keyhole::after,
.gg-keyhole::before {
 display:inline-block;
 box-sizing: border-box;
 border-radius: 20px
}
.gg-keyhole {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 20px;
 border: 2px solid
}
.gg-keyhole::after,
.gg-keyhole::before {
 content: "";
 position: absolute
}
.gg-keyhole::before {
 width: 6px;
 height: 6px;
 border: 2px solid #00E19F;
 left: 5px;
 top: 3px
}
.gg-keyhole::after {
 background:  #00E19F;
 width: 2px;
 height: 5px;
 left: 7px;
 bottom: 3px
} 
/*============================
gg-gift gg-gift gg-gift
============================*/
 .gg-gift {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 14px;
 margin-top: 8px;
 border: 2px solid transparent;
 box-shadow:
 inset 2px 0 0,
 inset -2px 0 0,
 0 -2px 0,
 inset 0 2px 0,
 inset 0 -2px 0;
 background:
 linear-gradient(to left,
 currentColor 10px,transparent 0),
 linear-gradient(to left,
 currentColor 10px,transparent 0),
 linear-gradient(to left,
 currentColor 10px,transparent 0);
 background-repeat: no-repeat;
 background-size:
 2px 10px,2px 10px,2px 10px;
 background-position:
 8px 0,18px -8px,-2px -8px
}
.gg-gift::after,
.gg-gift::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 3px;
 width: 6px;
 height: 8px;
 border: 2px solid #ff00ff;
 top: -10px
}
.gg-gift::after {
 left: 3px;
 transform: rotate(-45deg)
}
.gg-gift::before {
 right: 3px;
 transform: rotate(45deg)
} 
/*============================
gg-chevron-double-right
============================*/
 .gg-chevron-double-right {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 22px
}
.gg-chevron-double-right::after,
.gg-chevron-double-right::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute;
 width: 8px;
 height: 8px;
 border-right: 2px solid;
 border-top: 2px solid;
 transform: rotate(45deg);
 top: 7px;
 right: 6px
}
.gg-chevron-double-right::after {
 right: 11px
} 
/*============================
gg-home-alt gg-home-alt
============================*/
 .gg-home-alt {
 box-sizing: border-box;
 position: relative;
 display:inline-block;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 14px;
 border: 2px solid;
 border-top: 0;
 border-radius: 2px;
 border-bottom-left-radius: 3px;
 border-bottom-right-radius: 3px;
 margin-bottom: -2px
}
.gg-home-alt::after,
.gg-home-alt::before {
 content: "";
 display:inline-block;
 box-sizing: border-box;
 position: absolute
}
.gg-home-alt::before {
 border-top: 2px solid;
 border-left: 2px solid;
 border-top-left-radius: 4px;
 transform: rotate(45deg);
 top: -5px;
 border-radius: 3px;
 width: 14px;
 height: 14px;
 left: 0
}
.gg-home-alt::after {
 width: 6px;
 height: 10px;
 background: #a8a8ff;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 left: 4px;
 bottom: -2px
} 
/*============================
gg-scale gg-scale gg-scale
============================*/
 .scale05 {
 transform: scale(var(--ggs,0.5));
}
 .scale06 {
 transform: scale(var(--ggs,0.6));
}
 .scale07 {
 transform: scale(var(--ggs,0.7));
}
 .scale08 {
 transform: scale(var(--ggs,0.8));
}
 .scale09 {
 transform: scale(var(--ggs,0.9));
}
 .scale11 {
 transform: scale(var(--ggs,1.1));
}
 .scale12 {
 transform: scale(var(--ggs,1.2));
}
 .scale13 {
 transform: scale(var(--ggs,1.3));
}
 .scale14 {
 transform: scale(var(--ggs,1.4));
}
 .scale15 {
 transform: scale(var(--ggs,1.5));
}
 .scale16 {
 transform: scale(var(--ggs,1.6));
}
 .scale17 {
 transform: scale(var(--ggs,1.7));
}
 .scale18 {
 transform: scale(var(--ggs,1.8));
}
 .scale19 {
 transform: scale(var(--ggs,1.9));
}
 .scale2 {
 transform: scale(var(--ggs,2));
}
/*============================
animation-delay ...秒待ってからアニメーションする
============================*/
  /* 1秒待ってからアニメーションする */
.delay-animation1 {
  -webkit-animation-duration: 1s;
  animation-delay:1s;
}
  /* 2秒待ってからアニメーションする */
.delay-animation2 {
  -webkit-animation-duration: 2s;
  animation-delay:2s;
}
  /* 2.5秒待ってからアニメーションする */
.delay-animation25 {
  -webkit-animation-duration: 2.5s;
  animation-delay:2.5s;
}
  /* 3秒待ってからアニメーションする */
.delay-animation3 {
  -webkit-animation-duration: 3s;
  animation-delay:3s;
}
  /* 3.5秒待ってからアニメーションする */
.delay-animation35 {
  -webkit-animation-duration: 3.5s;
  animation-delay:3.5s;
}
  /* 3.8秒待ってからアニメーションする */
.delay-animation38 {
  -webkit-animation-duration: 3.8s;
  animation-delay:3.8s;
}
  /* 4秒待ってからアニメーションする */
.delay-animation33 {
  -webkit-animation-duration: 4s;
  animation-delay:4s;
}
/*============================
iteration ＃回繰り返す
============================*/
  /* 2回繰り返す */
.iteration2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}
  /* 3回繰り返す */
.iteration3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
}
  /* 5回繰り返す */
.iteration5 {
  -webkit-animation-iteration-count: 5;
  animation-iteration-count: 5;
}
/*============================
桜の花びら
============================*/
/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
  position: relative;
/*   height: 100vh; */ /* xxxxxxxコンテナの高さxxxxxxx */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
}

/* 桜の花びらのスタイル */
.petal {
  position: absolute;
  background-color: #ffc0cb; /* 花びらの色 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(3000deg);
  }
}
/*============================
border 囲み
============================*/
.border-list {
  padding-left: 0;
  list-style: none;
  background:	rgba(0,0,0,0.0);
}
.border {
  display:inline-block;
  background:	rgba(0,0,0,0.2);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
.border-ul {
  margin: 0 0 5px;
}
/*============================
border 囲み border2 inline-block orange
============================*/
.border2 {
  display:inline-block;
  background:	rgba(255,140,0,0.7);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border3 inline-block green
============================*/
.border3 {
  display:inline-block;
  background:	rgba(50,205,50,0.7);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border4 inline-block orange radius-35
============================*/
.border4 {
  display:inline-block;
  background:	rgba(255,140,0,0.9);
  border:0.5px solid #fff;
  border-radius: 35px;
  padding: 1px 10px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border5 inline-block green radius-35
============================*/
.border5 {
  display:inline-block;
  background:	rgba(50,205,50,0.9);
  border:0.5px solid #fff;
  border-radius: 35px;
  padding: 1px 10px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border6 inline-block Orchid-pink radius-35
============================*/
.border6 {
  display:inline-block;
  background:rgba(255,0,255,0.5);
  border:0.5px solid #fff;
  border-radius: 35px;
  padding: 1px 10px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border7 inline-block blue radius-35
============================*/
.border7 {
  display:inline-block;
  background:rgba(65,105,225,0.75);
  border:0.5px solid #fff;
  border-radius: 35px;
  padding: 1px 10px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border-r inline-block rgba radius-35
============================*/
.border-r2 {
  display:inline-block;
  background:	rgba(0,0,0,0.2);
  /*border:0.5px solid #fff;*/
  border-radius: 35px;
  padding: 1px 8px;
  margin:0;
  color:#fff;
  font-size: 14px;
}
.border-r2 a {
  color: #fff;
  text-decoration:none;
}
/*============================
border 囲み border normal grey
============================*/
.border-n {
  background:	rgba(0,0,0,0.2);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border2 normal orange
============================*/
.border2-n {
  background:	rgba(255,140,0,0.7);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
border 囲み border3 normal green
============================*/
.border3-n {
  background:	rgba(50,205,50,0.9);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
}
.border3-n a {
  color: #fff;
  text-decoration:none;
}
/*============================
border 囲み border4 normal
============================*/
.border4-n {
  background:	rgba(50,205,50,0.7);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin:0 0 3px;
  color:#fff;
  font-size: 0.9rem;
  font-weight : normal !important;
}
.border4-n a {
  color: #fff;
  text-decoration:none;
}
/*============================
list border 囲み
============================*/
.list01 {
background-color:rgba(147,152,255,0.6);
  border:0.8px solid #fff;
  border-radius: 4px;
  padding: 15px 0 15px 25px;
}
.list01 li {
  padding: 0 5px;
  margin: 5px 0;
  color:#fff;
  font-size: 0.9rem;
}
/*============================
heading 手書き風英字のCSS見出し
============================*/
.heading {
        position: relative;
	font-size: 1.3rem;
	font-weight: bold;
}
.heading::before {
	content: attr(data-en);
	position: absolute;
	transform: rotate(-5deg);
	top: -25px;
	left: 52px;
	color: #E57FA0;/*#DB4C7B;*/
	font-size: 3rem;
	font-weight: 400;
	font-family: 'Parisienne', cursive;
	font-style: italic;
}
.heading span {
	position: relative;
	z-index: 2;
}
/*============================
images-deco1 おしゃれな写真アルバムのような表現
============================*/
.images-deco1 {
  position: relative;
}
.images-deco1::before,
.images-deco1::after {
  content: "";
  position: absolute;
  transform: rotate(-35deg);
  width: 70px;
  height: 25px;
  background: #FFF1FF;
  z-index: 1;
}
.images-deco1::before {
  top: -10px;
  left: -25px;
  border-bottom: 1px solid #aaa;
}
.images-deco1::after {
  bottom: -10px;
  right: -25px;
  border-top: 1px solid #aaa;
}
.images-deco2 {
  position: relative;
}
.images-deco2::before,
.images-deco2::after {
  content: "";
  position: absolute;
  transform: rotate(-35deg);
  width: 70px;
  height: 25px;
  background: #e6e6fa;
  z-index: 1;
}
.images-deco2::before {
  top: -10px;
  left: -25px;
  border-bottom: 1px solid #aaa;
}
.images-deco2::after {
  bottom: -10px;
  right: -25px;
  border-top: 1px solid #aaa;
}
.images-deco3 {
  position: relative;
}
.images-deco3::before,
.images-deco3::after {
  content: "";
  position: absolute;
  transform: rotate(-35deg);
  width: 70px;
  height: 25px;
  background: #f8f8ff;
  z-index: 1;
}
.images-deco3::before {
  top: -10px;
  left: -25px;
  border-bottom: 1px solid #aaa;
}
.images-deco3::after {
  bottom: -10px;
  right: -25px;
  border-top: 1px solid #aaa;
}
/*============================
斜め区切りバックグラウンドライン
============================*/
.separation1{
  padding: 0 0 43px;
}
.separation0,
.separation2,
.separation3{
  padding: 0 0 95px;
}
.separation0 {
  background:#f8f8ff;
}
.separation1 {
  position: relative;
  z-index: 0;
}
.separation1::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
   /*四角形を傾けます*/
  transform: skewY(-6deg);
  transform-origin: bottom left;
   z-index: -1;
  width:100%;
  height:100%;
  height: 100%;
  background: linear-gradient(45deg, #6556C5, #F7FEF7, #AF4D8D);
  background-size: 600% 600%;
  animation: AnimationName 12s ease infinite;
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.separation2 {
  position: relative;
  z-index: 0;
}
.separation2::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
   /*四角形を傾けます*/
  transform: skewY(-6deg);
  transform-origin: bottom left;
   z-index: -1;
  width:100%;
  height:100%;
  background:#e6e6fa;
}
.separation3 {
  position: relative;
  z-index: 0;
}
.separation3::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
   /*四角形を傾けます*/
  transform: skewY(-6deg);
  transform-origin: bottom left;
   z-index: -1;
  width:100%;
  height:100%;
  background:#FFF1FF;
}
/*============================
画像あり会話風吹き出し　左右
============================*/
/* 吹き出し本体 left blue*/
.kaiwa-left {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  font-size:0.8rem;
  color: #ffffff;
  background-color: #0888ff;
  margin-left: 110px;          /* 左に余白を設ける */
  font-family: 'Playfair', serif;
}
/* 画像 - 絶対配置で左上に配置 */
.kaiwa-left .kaiwa-img {
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.kaiwa-left::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/* 吹き出し本体 left green*/
.kaiwa-left-green {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  font-size:0.9rem;
  color: #fff;
  background-color: #00B9BC; /*#ADE1D4  */
  margin-left: 110px;          /* 左に余白を設ける */
  font-family: 'Playfair', serif;
}
/* kaiwa-img 画像 - 絶対配置で左上に配置 */
.kaiwa-left-green .kaiwa-img {
  position: absolute;
  left: -110px;
  top: 0;
}
/* banner-img 画像 - 絶対配置で左上に配置 */
.kaiwa-left-green .banner-img {
  position: absolute;
  left: -95px;
  top: 220px;
}
/* 三角アイコン */
.kaiwa-left-green::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #00B9BC;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/* 吹き出し本体 right blue*/
.kaiwa-right {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  font-size:0.8rem;
  color: #ffffff;
  background-color: #0888ff;
  margin-right: 110px;          /* 右に余白を設ける */
  font-family: 'Playfair', serif;
}
/* 画像 - 絶対配置で右上に配置 */
.kaiwa-right .kaiwa-img{
  position: absolute;
  right: -110px;
  top: 0;
}
/* kaiwa-banner - 絶対配置で右上に配置 */
.kaiwa-right .kaiwa-banner{
  position: absolute;
  right: -105px;
  top: 120px;
}
/* 三角アイコン */
.kaiwa-right::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/*============================
twotop-box
============================*/
.twotop-box {
  background:#f8f8ff;
  margin:2rem 0.1rem 0rem;
  padding:2.5rem 0.1rem;
  border-radius: 25px;
}
/*============================
twotop left画像
============================*/
/* 本体 left-blue*/
.twotop-left-blue {
  position: relative;
  padding: 10px;
  border-radius: 10px;
  font-size:0.9rem;
  color: #fff;
  background-color: #D2D2FA; /*#ADE1D4  */
  margin-left: 110px;          /* 左に余白を設ける */
  font-family: 'Playfair', serif;
}
/* example-img 画像 - 絶対配置で左上に配置 */
.twotop-left-blue .example-img {
  position: absolute;
  left: -110px;
  top: 0;
}
/* banner-img 画像 - 絶対配置で左上に配置 */
.twotop-left-blue .banner-img {
  position: absolute;
  left: -105px;
  top: 0px;
}
/*============================
twotop right画像
============================*/
/* 本体 right-blue*/
.twotop-right-blue {
  position: relative;
  padding: 10px;
  border-radius: 10px;
  font-size:0.9rem;
  color: #fff;
  background-color: #D2D2FA; /*#ADE1D4  */
  margin-right: 110px;          /* 右に余白を設ける */
  font-family: 'Playfair', serif;
}
/* example-img 画像 - 絶対配置で左上に配置 */
.twotop-right-blue .example-img {
  position: absolute;
  right: -110px;
  top: 0;
}
/* banner-img 画像 - 絶対配置で左上に配置 */
.twotop-right-blue .banner-img {
  position: absolute;
  right: -105px;
  top: 0px;
}
/*============================
3top 見出し
============================*/
.threetop  {
	position: relative;
	padding-top: 90px;
	padding-bottom: 50px;
	text-align: center;
}
.threetop span {
	position: relative;
	z-index: 2;
}
.threetop::before {
	content: attr(data-en);
        white-space: nowrap;
	position: absolute;
	transform: rotate(-12deg);
	top:  5px;
	left: 45px;
	color: #ff00ff;
	font-size: 5rem;
	font-weight: bold;
      font-family: 'Italianno', cursive;
	font-style: italic;
}
.threetop::after {
	content: '';
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translate(-50%) rotate(30deg);
	width: 2px;
	height: 40px;
	background-color: #ff00ff;
}
/*============================
要素・画像　左右反転
============================*/
.reflect-x {
  transform: scale(-1, 1);
}
/*============================
1文字ずつ登場するテキストアニメーション
============================*/
.title-main {
  display: flex;
/*  height: 100vh; */
  justify-content: center;
  align-items: center;
  margin:0 0.5rem;
  position: relative;
  border-bottom: 5px solid #b0c4de;/*  #E9E9E9;*/
}
.title {
  display: flex;
  overflow: hidden;
  font-size: 1.2rem;
  color: #001AC1; /*  #001AC1; */
  font-family: 'Playfair', serif;
}
.title-main::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0%;
  transform: translateX(0%);
  width: 70px;
  height: 5px;
  background-color: #387ccc;/* #387ccc; */
}
.title span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.title.-visible span {
  transform: translate(0, 0);
}
.title span:nth-child(2) {
  transition-delay: 0.06s;
}
.title span:nth-child(3) {
  transition-delay: 0.12s;
}
.title span:nth-child(4) {
  transition-delay: 0.18s;
}
.title span:nth-child(5) {
  transition-delay: 0.24s;
}
.title span:nth-child(6) {
  transition-delay: 0.30s;
}
.title span:nth-child(7) {
  transition-delay: 0.36s;
}
.title span:nth-child(8) {
  transition-delay: 0.42s;
}
.title span:nth-child(9) {
  transition-delay: 0.48s;
}
.title span:nth-child(10) {
  transition-delay: 0.54s;
}
.title span:nth-child(11) {
  transition-delay: 0.6s;
}
.title span:nth-child(12) {
  transition-delay: 0.66s;
}
.title span:nth-child(13) {
  transition-delay: 0.72s;
}
.title span:nth-child(14) {
  transition-delay: 0.78s;
}
.title span:nth-child(15) {
  transition-delay: 0.84s;
}
.title span:nth-child(16) {
  transition-delay: 0.90s;
}
.title span:nth-child(17) {
  transition-delay: 0.96s;
}
/*============================
サブタイトル　for 1文字ずつ登場するテキストアニメーション
============================*/
.title-sub span {
	display: flex;
	align-items: center;
	color: #00A474;
	font-size: 1rem;
	text-transform: uppercase;
}
.title-sub span::before {
	content: '';
	display: inline-block;
	margin: 0 0.5rem 0 1.5rem;
	width: 22px;
	height: 1px;
	background-color: #00A474;
}
/*============================
2色のかぎかっこ blue/darkblue
============================*/
.two-kakko {
  display: flex;
  justify-content: center;
  align-items: center;
}
.two-kakko::before,
.two-kakko::after {
  content: "";
  width: 10px;
  height: 10px;
}
.two-kakko::before {
  margin: -30px 20px 0 0;
  border-top: 10px solid #0277b4;
  border-left: 10px solid #00a7ff;
}
.two-kakko::after {
  margin: 0 0 -30px 20px;
  border-right: 10px solid #00a7ff;
  border-bottom: 10px solid #0277b4;
}
/*============================
2色のかぎかっこ lightpink/magenta
============================*/
.two-kakko-p {
  display: flex;
  justify-content: center;
  align-items: center;
}
.two-kakko-p::before,
.two-kakko-p::after {
  content: "";
  width: 10px;
  height: 10px;
}
.two-kakko-p::before {
  margin: -30px 20px 0 0;
  border-top: 10px solid #ff1493;
  border-left: 10px solid #ffb6c1;
}
.two-kakko-p::after {
  margin: 0 0 -30px 20px;
  border-right: 10px solid #ffb6c1;
  border-bottom: 10px solid #ff1493;
}
/*============================
top-flex 公安　twitter
============================*/
.t-container {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.08);
}
.t-item {
  align-self: center;
  padding: 5px 8.5px 0px;
}
.t-item2 {
  align-self: center;
  padding: 5px 12.4px 0px;
}
.t-item3 {
  align-self: flex-start;
  padding: 6px 10px 0 0;
  font-family: 'Gelasio', serif;
}
/*============================
flex graf
============================*/
.g-container {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.g-item {
  margin: 2rem auto 0rem;
 width: 70%;
}
/*============================
spt-flex saport
============================*/
.spt-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  background: #fff;
}
.spt-item {
  padding: 15px;
  width: 32%;
}
.spt-item p{
  padding: 0;
}
.spt-item2 {
  padding: 70px 5px 60px;
  width: 48%;
}
/*============================
kakuritu-flex
============================*/
.kakuritu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.kakuritu-container:not(:last-child) {
  margin-bottom: 0px;
}
.kakuritu-container:nth-child(even) {
  flex-direction: row-reverse;
}
.kakuritu-container img {
  display: block;
  width: 48%;
  height: auto;
}
.kakuritu-container .figure {
  display: block;
  width: 48%;
  height: auto;
  padding: 5px 16px;
}
.box {
  width: 48%;
}
.box2 {
  width: 37%;
  padding: 12px 16px 12px 0;
}
/*============================
firstview-flex
============================*/
.firstview-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.figure {
  display: block;
  width: 48%;
  height: auto;
  padding: 2px;
}
.box {
  width: 48%;
  padding: 2px
}
/*============================
トップ画像ファーストコメント-flex
============================*/
.flex-first {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 14px 0;
}
.figure-first {
  display: block;
  width: 29%;
  height: auto;
  padding: 0px;
/* margin-left:-5px;*/
/* margin-top:1px;*/
}
.box-first {
  width: 69%;
  padding: 0;
}
/*============================
プロフィール-トップ-flex
============================*/
.flex-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.figure-top {
  display: block;
  width: 27%;
  height: auto;
  padding: 0px;
/* margin-left:-5px;*/
/* margin-top:1px;*/
}
.box-top {
  width: 73%;
  padding: 0px
}
/*============================
円グラフ 出会えた相手との関係性
============================*/
	.pie-chart {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 6.6%,
				transparent 6.6%,
				transparent 50%,
				#fff 0
			),
			conic-gradient(
				#4e79a7 0,
				#4e79a7 45%,
				#f28e2c 0,
				#f28e2c 76%,
				#e15759 0,
				#e15759 87%,
				#76b7b2 0,
				#76b7b2 100%
		);
		position: relative;
                background-position: bottom -10px right 50px;
		width: 180px;
		height: 125px;
		margin: 0;
		outline: 1px solid #ccc;
	}
	.pie-chart div {
		font-size: 0.8rem;
		font-weight: bold;
		color: #000000;
                text-align:center;
	}
	.pie-chart cite {
		position: absolute;
		bottom: 0;
		font-size: 0.7rem;
		padding: 1px;
		color: #000000;
	}
	.pie-chart figcaption {
		position: absolute;
		bottom: 0px;
		right: 2px;
		font-size: 0.8rem;
		color: #000000;
		text-align: right;
	}
	.pie-chart span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}
/*============================
円グラフ ポイント購入費/月
============================*/
	.pie-chart2 {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 6.6%,
				transparent 6.6%,
				transparent 50%,
				#fff 0
			),
			conic-gradient(
				#4e79a7 0,
				#4e79a7 57%,
				#f28e2c 0,
				#f28e2c 86%,
				#e15759 0,
				#e15759 100%
		);
		position: relative;
                background-position: bottom -10px right 50px;
		width: 180px;
		height: 125px;
		margin: 0;
		outline: 1px solid #ccc;
	}
	.pie-chart2 div {
		font-size: 0.8rem;
		font-weight: bold;
		color: #000000;
                text-align:center;
	}
	.pie-chart2 cite {
		position: absolute;
		bottom: 0;
		font-size: 0.7rem;
		padding: 1px;
		color: #000000;
	}
	.pie-chart2 figcaption {
		position: absolute;
		bottom: 0px;
		right: 2px;
		font-size: 0.8rem;
		color: #000000;
		text-align: right;
	}
	.pie-chart2 span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}
/*============================
円グラフ 出会えた女性タイプ
============================*/
	.pie-chart3 {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 6.6%,
				transparent 6.6%,
				transparent 50%,
				#fff 0
			),
			conic-gradient(
				#4e79a7 0,
				#4e79a7 38%,
				#f28e2c 0,
				#f28e2c 70%,
				#e15759 0,
				#e15759 94%,
				#76b7b2 0,
				#76b7b2 100%
		);
		position: relative;
                background-position: bottom -10px right 50px;
		width: 180px;
		height: 125px;
		margin: 0;
		outline: 1px solid #ccc;
	}
	.pie-chart3 div {
		font-size: 0.8rem;
		font-weight: bold;
		color: #000000;
                text-align:center;
	}
	.pie-chart3 cite {
		position: absolute;
		bottom: 0;
		font-size: 0.7rem;
		padding: 1px;
		color: #000000;
	}
	.pie-chart3 figcaption {
		position: absolute;
		bottom: 0px;
		right: 2px;
		font-size: 0.8rem;
		color: #000000;
		text-align: right;
	}
	.pie-chart3 span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}
/*============================
円グラフ 1人の女性と出会うまでのポイントを購入した料金
============================*/
	.pie-chart4 {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 6.6%,
				transparent 6.6%,
				transparent 50%,
				#fff 0
			),
			conic-gradient(
				#4e79a7 0,
				#4e79a7 41%,
				#f28e2c 0,
				#f28e2c 66%,
				#e15759 0,
				#e15759 84%,
				#76b7b2 0,
				#76b7b2 100%
		);
		position: relative;
                background-position: bottom -10px right 50px;
		width: 180px;
		height: 125px;
		margin: 0;
		outline: 1px solid #ccc;
	}
	.pie-chart4 div {
		font-size: 0.8rem;
		font-weight: bold;
		color: #000000;
                text-align:center;
	}
	.pie-chart4 cite {
		position: absolute;
		bottom: 0;
		font-size: 0.7rem;
		padding: 1px;
		color: #000000;
	}
	.pie-chart4 figcaption {
		position: absolute;
		bottom: 0px;
		right: 2px;
		font-size: 0.8rem;
		color: #000000;
		text-align: right;
	}
	.pie-chart4 span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}

/*============================
円グラフ トップ・ラブホまでの回数
============================*/
	.pie-chart5 {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 9%,
				transparent 6.6%,
				transparent 50%,
				#fff 0
			),
			conic-gradient(
				#F163D2 0,
				#F163D2 44%,
				#F8B1E8 0,
				#F8B1E8 83%,
				#FCE5F7 0,
				#FCE5F7 100%
		);
		position: relative;
                background-position: bottom -10px right 50px;
		width: 180px;
		height: 125px;
		margin: 0;
		outline: 0.8px solid #9B6239;
	}
	.pie-chart5 div {
		font-size: 0.8rem;
		font-weight: bold;
		color: #000000;
                text-align:center;
	}
	.pie-chart5 cite {
		position: absolute;
		bottom: 0;
		font-size: 0.7rem;
		padding: 1px;
		color: #000000;
	}
	.pie-chart5 figcaption {
		position: absolute;
		bottom: 0px;
		right: 2px;
		font-size: 0.8rem;
		color: #000000;
		text-align: right;
	}
	.pie-chart5 span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}

/*============================
横棒グラフグラデーション
============================*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
.grahp-main {
  margin: 5rem 0 0; /*margin-top:3rem;*/
  padding: 10px 10px 1px 10px;
  background: rgba(0,0,0,0.4);/*rgba(0,0,0,0.5);#f0ffff;*/
  border-radius: 8px;
  font-family: "Open Sans", sans-serif;
}
.bar {
  position: relative;
  width: 100%;
  height: 33px;
  background: rgba(0,0,0,0.09);/*rgba(255, 255, 255, 0.1);rgba(0,0,0,0.07);*/
  margin-bottom: 10px;
  border-radius: 5px;
}
.bar .bar-info {
  border-radius: 5px;
  padding: 0 2px 0 7px;
  background: #fd7473;
  color: white;
  line-height:2.2;
  /*width: 100%;*/
  position: relative;
  height: 33px;
  transition: width 3.3s ease-in-out;
}
.bar .bar-info .percent {
  float: right;
}
.bar .bar-info.css {
  background: linear-gradient(0deg,#FEE7C9, 10px,#FCAD44);
  width: 78%;
}
.bar .bar-info.html {
  background: linear-gradient(0deg,#FED3DE, 10px,#FC688E);
  width: 89%;
}
.bar .bar-info.ps {
  background: linear-gradient(0deg,#EBD3F1, 10px,#BB68D0);
  width: 93%;
}
.bar .bar-info.js {
  background: linear-gradient(0deg,#A2E3FC, 10px,#28BEFA);
  width: 50%;
}
.bar .bar-info.soku {
  background: linear-gradient(0deg,#EECBD3, 10px,#C64A66);
  width: 53%;
}
.bar .bar-info.week {
  background: linear-gradient(0deg,#B6E8DC, 10px,#01B086);
  width: 71%;
}
.bar .bar-info.css2 {
  background: linear-gradient(0deg,#FEE7C9, 10px,#FCAD44);
  width: 79%;
}
.bar .bar-info.html2 {
  background: linear-gradient(0deg,#FED3DE, 10px,#FC688E);
  width: 85%;
}
.bar .bar-info.ps2 {
  background: linear-gradient(0deg,#EBD3F1, 10px,#BB68D0);
  width: 78%;
}
.bar .bar-info.js2 {
  background: linear-gradient(0deg,#A2E3FC, 10px,#28BEFA);
  width: 50%;
}
.bar .bar-info.soku2 {
  background: linear-gradient(0deg,#EECBD3, 10px,#C64A66);
  width: 62%;
}
.bar .bar-info.week2 {
  background: linear-gradient(0deg,#B6E8DC, 10px,#01B086);
  width: 80%;
}
.bar .bar-info.css3 {
  background: linear-gradient(0deg,#FEE7C9, 10px,#FCAD44);
  width: 80%;
}
.bar .bar-info.html3 {
  background: linear-gradient(0deg,#FED3DE, 10px,#FC688E);
  width: 78%;
}
.bar .bar-info.ps3 {
  background: linear-gradient(0deg,#EBD3F1, 10px,#BB68D0);
  width: 76%;
}
.bar .bar-info.js3 {
  background: linear-gradient(0deg,#A2E3FC, 10px,#28BEFA);
  width: 70%;
}
.bar .bar-info.soku3 {
  background: linear-gradient(0deg,#EECBD3, 10px,#C64A66);
  width: 60%;
}
.bar .bar-info.week3 {
  background: linear-gradient(0deg,#B6E8DC, 10px,#01B086);
  width: 80%;
}
/*============================
横棒グラフグラデーション2 人妻
============================*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
.grahp-main2 {
  margin: 0 0 0 0; /*margin-top:3rem;*/
  padding: 10px 10px 1px 10px;
  background: #DEB794; /*#767F8C;*/
  border-radius: 8px;
  font-family: "Open Sans", sans-serif;
}
.bar2 {
  position: relative;
  width: 100%;
  height: 33px;
  background: rgba(0,0,0,0.25);
  margin-bottom: 10px;
  border-radius: 5px;
}
.bar2 .bar-info2 {
  border-radius: 5px;
  padding: 0 2px 0 7px;
  background: #fd7473;
  color: white;
  line-height:2.2;
  /*width: 100%;*/
  position: relative;
  height: 33px;
  transition: width 3.3s ease-in-out;
}
.bar2 .bar-info2 .percent2 {
  float: right;
}
.bar2 .bar-info2.ganbou {
  background: linear-gradient(0deg,#F5C5B7, 10px,#DE3503 );
  width: 68%;
}
.bar2 .bar-info2.uwakizumi {
  background: linear-gradient(0deg,#F9DAF9, 10px,#DA00DA);
  width: 45%;
}
/*============================
斜線を背景にしたCSS見出しデザイン
============================*/
.heading21 {
	position: relative;
	font-size: 1.05rem;
}

.heading21 span {
	position: relative;
	z-index: 2;
}

.heading21::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 10px;
	background-image: repeating-linear-gradient(-45deg, #b4a983 0px, #b4a983 2px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 10px 10px;
	z-index: 1;
}

.heading21::after {
	content: attr(data-en);
	position: relative;
	margin-left: 12px;
	font-size: 1rem;
	z-index: 2;
}
/*============================
写真フィルターを実装する backdropfilter
============================*/
.backdropfilter {
  position: relative;
  width: 100%;
}
.backdropfilter img {
  width: 100%;
  height: auto;
}
.backdropfilter p {
  position: absolute;
  bottom: -30px;/*top: -18px;*/
  left: 0;
  width: 100%;
  height: 35%;
  padding: 10px 15px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}
@media not all and (min-width: 300px){
  .backdropfilter p {
    font-size: 0.9rem;
  }
}

.backdropfilter2 {
  position: relative;
  width: 100%;
}
.backdropfilter2 img {
  width: 100%;
  height: auto;
}
.backdropfilter2 p {
  position: absolute;
  top: -15px;/*bottom: -10px;*/
  left: 0;
  width: 100%;
  height: 6.5%;/*11.5%;*/
  padding: 12px 5px 0;
  font-size: 7.5px;
  font-weight: bold;
  text-align: left;
  line-height:1;
}

.bf01-gray p {
  background-image: linear-gradient(to right bottom,rgba(65,105,225,0.9),rgba(65,105,225,0.9));/*rgba(193,0,193,0.9) 10%,rgba(255,0,255,0.65) 35%,rgba(255,218,255,0.3)); rgba(65,105,225,0.09);rgba(0,0,0,0.04);*/
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bf01-papa p {
  background-image: linear-gradient(to right bottom,rgba(65,105,225,0.95) 10%,rgba(65,105,225,0.5));/*rgba(193,0,193,0.9) 10%,rgba(255,0,255,0.65) 35%,rgba(255,218,255,0.3)); rgba(65,105,225,0.09);rgba(0,0,0,0.04);*/
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bf01 p {
  background-color: rgba(255 255 255 / .2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bf02 p {
  color: #111;
  backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%);
}
.bf03 p {
  color: #111;
  backdrop-filter: sepia(100%);
  -webkit-backdrop-filter: sepia(100%);
}
.bf04 p {
  color: #111;
  backdrop-filter: sepia(70%) contrast(230%) blur(5px);
  -webkit-backdrop-filter: sepia(70%) contrast(230%) blur(5px);
}
.bf05 p {
  backdrop-filter: brightness(120%);
  -webkit-backdrop-filter: brightness(120%);
}
.bf06 p {
  backdrop-filter: contrast(230%);
  -webkit-backdrop-filter: contrast(230%);
}
.bf07 p {
  backdrop-filter: invert(70%);
  -webkit-backdrop-filter: invert(70%);
}
.bf08 p {
  backdrop-filter: hue-rotate(180deg);
  -webkit-backdrop-filter: hue-rotate(180deg);
}
.bf09 p {
  backdrop-filter: saturate(270%);
  -webkit-backdrop-filter: saturate(270%);
}
/*============================
動く円グラフ
============================*/
.chart-area{/*円グラフがスマホでつぶれないようにする*/
  position: relative;
  width:100%;
  height:50vh;
}
.box-chart{
  max-width:600px;
  width:100%;
  margin:0 0 3rem;
  padding: 20px 0;
  background:rgba(0,0,0,0.05);
  text-align: center;
}
/*=18==========================
app-btn 　APPボタン
============================*/
.app-btn a{
	display: inline-block;
	position: relative;
        text-align: center;
	width: 300px;
	padding: 10px 0;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
	background-color: #36A8F1;
	border: 1px solid transparent;
	border-radius: 35px;
}
.app-btn a{
	color: #fff;
}
.app-btn a::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid #fff; /*#F136A8;#aaf235#53C92C*/
	border-radius: 35px;
}
.app-btn a:hover {
	color: #f2f2f2;
	background-color: #F18A49;
}
/*============================
バックグラウンドイメージ　画像背景　bg-anime
============================*/
.bg-anime {
    background-image: url(../images9/bg-anime.jpg), url(../images9/bg-anime14.jpg);     /* 背景画像指定 */
    background-repeat: no-repeat, no-repeat;                /* 背景の繰り返し設定 */
    background-size:  100%, 100%; 
    background-position: top left, bottom left;
}
/*============================
画像にグラデーションを被せる　gdn-img
============================*/
.gdn-img {
	position: relative;
}
.gdn-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(45deg, #ffffff, transparent 70%);
}
/*============================
注意喚起トップボックス box-orange
============================*/
.box-orange {
    margin-top: 0;
    padding: 1rem 1rem;
    background: #fff2e4;
    color: #000000;
}
.box-orange-title { 
    padding: 0.5rem 0.5rem 0.4rem;
    text-align: center;
    background: #ff9b38;
    border-bottom: 3px solid #ffffff;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.box-orange-title p {
    margin-bottom: 0;
}
/*============================
list-tight li
============================*/
.list-tight li {
    margin-bottom: 0;
}
/*============================
text-indent
============================*/
.indent-1 {
	padding-left:1.5rem;
	text-indent:-1.1rem;
}
/*============================
blockquote cp-quote
============================*/
.cp-quote {
   /* position: relative; */
	width: 100%;
	margin: 0;
}
/* 引用 */
.cp-quote blockquote {
	margin: 0;
	padding: 0;
}
/* アイコン */
/* 
.cp-quote blockquote:before,
.cp-quote blockquote:after {
	position: absolute;
	color: #999999;
}
.cp-quote blockquote:before {
	top: 1.5em;
	left: -0.5em;
	content: '\f10d';
}
.cp-quote blockquote:after {
	right: 1em;
	bottom: 3em;
	content: '\f10e';
}
 */
/* 引用元名 */
.cp-quote blockquote cite {
    display: block;
    padding: 0 1rem;
    text-align: right;
    color: #888888;
    font-size: 0.9rem;
}
.cp-quote blockquote cite a {
    color: #888888;
}
/* 縦並びflexメニュー */
Menu-body {
  background: #111;
  color: #fff;
  display: flex;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
.Menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.Menu-item {
  display: flex;
  flex: 100%;
  margin: 0;
  font-size: 1rem;
}
.Menu-item-link {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter 0.25s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.Menu-item-link:active {
  filter: brightness(1.2);
}

.Menu-item:nth-child(7n+1) .Menu-item-link {
  background-color: #4B6C96;
  color: #d3dff1;
}
.Menu-item:nth-child(7n+2) .Menu-item-link {
  background-color: #DFDBC9;
  color: #656048;
}
.Menu-item:nth-child(7n+3) .Menu-item-link {
  background-color: #9FC7CC;
  color: #496063;
}
.Menu-item:nth-child(7n+4) .Menu-item-link {
  background-color: #9B8DAA;
  color: #f2e5ff;
}
.Menu-item:nth-child(7n+5) .Menu-item-link { 
  background-color: #BC8F8F;
  color: #ffd9dc;
}
.Menu-item:nth-child(7n+6) .Menu-item-link {
  background-color: #D1535D;
  color: #F5EFEF;
}
.Menu-item:nth-child(7n+7) .Menu-item-link {
  background-color: #8FBC8B;
  color: #FBFEFB;
}

.Menu-item-link::after {
  border: solid currentColor;
  border-width: 0.125rem 0.125rem 0 0;
  content: "";
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}
/* 縦並びflexメニュー2 */
Menu-body2 {
  background: #111;
  color: #fff;
  display: flex;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
.Menu2 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.Menu-item2 {
  display: flex;
  flex: 100%;
  margin: 0;
  font-size: 1rem;
}
.Menu-item-link2 {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter 0.25s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.Menu-item-link2:active {
  filter: brightness(1.2);
}
.Menu-item2 .Menu-item-link2 {
  background-color: #DFDBC9;
  color: #656048;
  border-bottom:solid 1px #fff;
}
.Menu-item-link2::after {
  border: solid currentColor;
  border-width: 0.125rem 0.125rem 0 0;
  content: "";
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}
/* 縦並びflexメニュー3 */
Menu-body3 {
  background: #111;
  color: #fff;
  display: flex;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
.Menu3 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.Menu-item3 {
  display: flex;
  flex: 100%;
  margin: 0;
  font-size: 1rem;
}
.Menu-item-link3 {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter 0.25s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.Menu-item-link3:active {
  filter: brightness(1.2);
}

.Menu-item3:nth-child(2n+1) .Menu-item-link3 {
  background-color: #F7F7F7; /*#E598B1;*/
  color: #9B6239; /*#fff;*/
}
.Menu-item3:nth-child(2n+2) .Menu-item-link3 {
  background-color: #E598B1; /*#B9272D;*/
  color: #901E23;
}
.Menu-item-link3::after {
  border: solid currentColor;
  border-width: 0.125rem 0.125rem 0 0;
  content: "";
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}
/* 縦並びflexメニュー4 */
Menu-body4 {
  background: #111;
  color: #fff;
  display: flex;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
.Menu4 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.Menu-item4 {
  display: flex;
  flex: 100%;
  margin: 0;
  font-size: 1rem;
}
.Menu-item-link4 {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter 0.25s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.Menu-item-link4:active {
  filter: brightness(1.2);
}

.Menu-item4:nth-child(2n+1) .Menu-item-link4 {
  background-color: #F7F7F7; /*#DE9A5E;*/
  color: #9B6239; /*#fff;*/
}
.Menu-item4:nth-child(2n+2) .Menu-item-link4 {
  background-color: #DEB794;
  color: #8C4100;
}
.Menu-item-link4::after {
  border: solid currentColor;
  border-width: 0.125rem 0.125rem 0 0;
  content: "";
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}
/* 縦並びflexメニュー5 */
Menu-body5 {
  background: #111;
  color: #fff;
  display: flex;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
.Menu5 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.Menu-item5 {
  display: flex;
  flex: 100%;
  margin: 0;
  font-size: 1rem;
}
.Menu-item-link5 {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter 0.25s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.Menu-item-link5:active {
  filter: brightness(1.2);
}

.Menu-item5:nth-child(2n+1) .Menu-item-link5 {
  background-color: #F7F7F7;
  color: #9B6239;
}
.Menu-item5:nth-child(2n+2) .Menu-item-link5 {
  background-color: #D2D2FA;
  color: #9B6239;
}
.Menu-item-link5::after {
  border: solid currentColor;
  border-width: 0.125rem 0.125rem 0 0;
  content: "";
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}
/* 縦並びflexメニュー6 */
Menu-body6 {
  background: #111;
  color: #fff;
  display: flex;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
.Menu6 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.Menu-item6 {
  display: flex;
  flex: 100%;
  margin: 0;
  font-size: 15px;
}
.Menu-item-link6 {
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter 0.25s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.Menu-item-link6:active {
  filter: brightness(1.2);
}
.Menu-item6:nth-child(6n+1) .Menu-item-link6 {
  background-color: #F7F7F7;
  color: #9B6239;


}
.Menu-item6:nth-child(6n+2) .Menu-item-link6 {
  background-color: #DFDBC9;
  color: #656048;
}
.Menu-item6:nth-child(6n+3) .Menu-item-link6 {
  background-color: #9FC7CC;
  color: #2E3A3B;
}
.Menu-item6:nth-child(6n+4) .Menu-item-link6 { 
  background-color: #BC8F8F;
  color: #fff;

}
.Menu-item6:nth-child(6n+5) .Menu-item-link6 {
  background-color: #D1535D;
  color: #fff;
}
.Menu-item6:nth-child(6n+6) .Menu-item-link6 {
  background-color: #8FBC8B;
  color: #fff;
}

.Menu-item-link6::after {
  border: solid currentColor;
  border-width: 0.125rem 0.125rem 0 0;
  content: "";
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}
/* --------------------------------
 画像切り替え img-box
-------------------------------- */
.img-box {
    position: relative;
    width: 100%;
    height: 245px !important;
    overflow: hidden;
}
.img1, .img2 {
    width: 100%;
    height: 245px !important;
    position: absolute;
    top: 0;
    background: center center no-repeat;
    animation: anime 5s 0s infinite;
    z-index: 0;
    opacity: 0;
}
.img1 {
    animation-delay: 0s;
}
.img2 {
    animation-delay: 2.5s;
}
.img1 p {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 40%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 16px;
  color: #5D3B22;
  font-weight: bold;
  letter-spacing:8px;
  text-shadow:0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff;
}
.img2 p {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 40%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 16px;
  color: #5D3B22;
  font-weight: bold;
  letter-spacing:8px;
  text-shadow:0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff;
}

@keyframes anime {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        transform: scale(1.2);
        z-index: 10;
}
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}
/* --------------------------------
  画像スライド　Hero
-------------------------------- */

/* ------ slide image ------- */
.hero-slide__img {
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  height: 245px;
  object-fit: cover;
  opacity: 0;
  width: 100%;
}

.hero-slide__item:nth-of-type(1) .hero-slide__img {
  animation-delay: 0s;
}

.hero-slide__item:nth-of-type(2) .hero-slide__img {
  animation-delay: 3s;
}

.hero-slide__item:nth-of-type(3) .hero-slide__img {
  animation-delay: 6s;
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  33% {
    opacity: 1;
  }

  49% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateX(-20%);
  }
}

/* ------ hero erea ------- */
.hero {
  height: 245px;
  overflow: hidden;
  position: relative;
}

.hero__inner {
  margin: 0 auto;
  width: 1100px;
}

/* ------ hero title ------- */
.hero__title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 45%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 16px;
  color: #5D3B22;
  font-weight: bold;
  letter-spacing:1px;
  text-shadow:0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff,0.5px 0.5px #fff;
}

.hero-slide__item {
  position: absolute;
  bottom: 0;
  height: 245px;
  right: -20%;
  width: 120%;
}
/*============================
よくある質問 FAQ  dl dt dd
============================*/
.qa-001 dt,
.qa-001 dd {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 1rem 1rem 1rem 3.1rem;
    font-size: 1rem;
    color: #333333;
}
.qa-001 dt {
    margin-bottom: -0.8rem;
    font-weight: 600;
    color: #9B6239;
}
.qa-001 dd {
    margin-bottom: 1rem;
}
.qa-001 dt::before,
.qa-001 dd::before {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 40px;
    text-align: center;
}
.qa-001 dt::before {
    background-color: #75bbff;
    content: 'Q';
}
.qa-001 dd::before {
    background-color: #ff8d8d;
    content: 'A';
}
/*============================
data-text マッチングアプリよりセフレとセックスできる出会い系とは
============================*/
.data-text::after {
  content: attr(data-text);
  display: block;
  margin-top: .7em;
  color: #3cb371;
  font-size: 14px;
}