@charset "UTF-8";



@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

@font-face {
  font-family: "fli";
  font-display: swap;
  src: url("fonts/Fligen-Regular.woff2") format("woff2"),
  url("fonts/Fligen-Regular.woff") format("woff");
}

root
_________________________________________*/
:root {
  --custom-text-color: #433c44;
  --custom-main-color: #88aafc;
  --custom-main-01: rgba(202, 184, 217, 0.1);
  --custom-main-02: rgba(202, 184, 217, 0.2);
  --custom-main-03: rgba(202, 184, 217, 0.3);
  --custom-main-05: rgba(202, 184, 217, 0.5);
  --custom-main-07: rgba(202, 184, 217, 0.7);
  --custom-second-color: #82fcc8;
  --custom-second-01: rgba(224, 181, 211, 0.1);
  --custom-second-02: rgba(224, 181, 211, 0.2);
  --custom-second-03: rgba(224, 181, 211, 0.3);
  --custom-second-05: rgba(224, 181, 211, 0.5);
  --custom-second-07: rgba(224, 181, 211, 0.7);
  --custom-accent-color: #E77491;
  --custom-accent-01: rgba(231, 116, 145, 0.1);
  --custom-accent2-color: #3374D4;
  --custom-accent2-01: rgba(51, 116, 212, 0.1);
  --custom-main-grad: linear-gradient(90deg, rgba(31, 45, 117, 1) 0%, rgba(69, 251, 192, 1) 100%);
  --custom-30-grad: linear-gradient(90deg, rgba(31, 45, 117, 0.3) 0%, rgba(69, 251, 192, 0.3) 100%);
  --custom-80-grad: linear-gradient(90deg, rgba(31, 45, 117, 0.8) 0%, rgba(69, 251, 192, 0.8) 100%);
  --custom-white: rgba(255, 255, 255, 1);
  --custom-white-09: rgba(255, 255, 255, 0.9);
  --custom-white-08: rgba(255, 255, 255, 0.8);
  --custom-white-07: rgba(255, 255, 255, 0.7);
  --custom-white-06: rgba(255, 255, 255, 0.6);
  --custom-white-05: rgba(255, 255, 255, 0.5);
  --custom-white-04: rgba(255, 255, 255, 0.4);
  --custom-white-01: rgba(255, 255, 255, 0.1);
  --custom-gray: #C0C6C9;
  --custom-img-border: #E2E2E2;
  --custom-border: #f0f0f0;
  --custom-font-jp:Zen Kaku Gothic Antique, sans-serif;
  --custom-font-po:Poiret One, Zen Kaku Gothic Antique, sans-serif;
  --font-basic: "fli", var(--sans-serif);
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon2 {
left: 10px;
  font-family: "fli";
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;

}
.ribbon2 {
  --c: #88aafc;
  --r: 20%; /* control the cutout part */
  
  padding: 1.3em; /* you may need to adjust this based on your content */
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  position: relative;
  z-index: 0;
  max-width: 130px;
width: 100%;

}
.ribbon2:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 60% 20% -40%;
  background: color-mix(in srgb, var(--c), #000 35%);
  clip-path: polygon(5% 0,95% 0,100% 100%,50% calc(100% - var(--r)),0 100%);

}
.ribbon2:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10%;
  rotate: 45deg;
  outline: .1em solid #0003;
  background: #88aafc;
  outline-offset: -.4em;
  border-radius: .3em;

}


/* タブ */
.tabb-wrap {
  display: flex;
  flex-wrap: wrap;
}
.tabb-label {
  color: White;
  background: #495591;
  margin-right: 5px;
  padding: 3px 12px;
  order:-1;
}
.tabb-content {
  width: 100%;
  display: none;
}
.tabb-switch:checked+.tabb-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb3-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb4-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb5-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb6-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb7-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb8-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb9-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb10-label {
  color: #495591;
  background: #fff;
}
.tabb-switch:checked+.tabb-label+.tabb-content {
  display: block;
}
.tabb-switch {
  display: none;
}



/* タブ2 */
.tabbb-wrap {
  display: flex;
  flex-wrap: wrap;
}
.tabbb-label {
  color: White;
  background: #495591;
  margin-right: 5px;
  padding: 3px 12px;
  order:-1;
}
.tabbb-content {
  width: 100%;
  display: none;
}
.tabbb-switch:checked+.tabbb-label {
  color: #495591;
  background: #fff;
}
.tabbb-switch:checked+.tabbb3-label {
  color: #495591;
  background: #fff;
}
.tabbb-switch:checked+.tabbb4-label {
  color: #495591;
  background: #fff;
}
.tabbb-switch:checked+.tabbb5-label {
  color: #495591;
  background: #fff;
}
.tabbb-switch:checked+.tabbb6-label {
  color: #495591;
  background: #fff;
}
.tabbb-switch:checked+.tabbb-label+.tabbb-content {
  display: block;
}
.tabbb-switch {
  display: none;
}

div.left {
    text-align: left; 
}


/* 吹き出し 全体*/
.chima {
  margin-top:2em;
  margin-bottom:2em;
  position:relative;
    display: flex;
  flex-wrap:  wrap; 
}

.chima:before , .chima:after {
  clear:both;
  content:"";
  display:block;
}

/*アイコン*/
.chima  figure {
  width:120px;     /*アイコンの横幅*/
  height:120px;    /*アイコンの縦幅*/
  margin-left:0px; 
}

.chima figure img {
  width:100%;
  height:100%;
  margin:0;
  border-radius:0%;    /*アイコンの角丸*/
}

.chima-left_icon {
  float:left;
  /*アイコンの右の余白(左の吹き出し)*/
}

/*吹き出しのセリフ部分*/
.chima-left {
  position:relative;
  padding:10px;
  border-style:solid;    /*枠線の線種*/
  border-radius:10px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 250px); /*100%-(アイコンサイズ+アイコンmargin)px*/
  height:100%;
  margin-top:30px; 
  display: inline-block; 
}

.chima-left {
  float:left;
  border-width:2px;         /*枠線の太さ*/
  border-color:#fff;   /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-left:-15px; 

}


.chima p {
  margin:0;
}

.chima p :last-child {
  margin:0;
}

/*左の吹き出し しっぽ*/
.chima-left:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  left: -22px;/*左端からの距離*/
  top: -8px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 18px 0 6px 18px/18px 0 1px 18px;/*角丸*/
  box-shadow: -8px -14px 0 -8px white inset;/*影*/
}

/*------------------------------
  画像付き吹き出し(会話)sp
------------------------------*/
@media only screen and (max-width: 600px) {
/* 吹き出し 全体*/
.chima {
  margin-top:0.5em;
  margin-bottom:1.5em;
  position:relative;
}

.chima:before , .chima:after {
  clear:both;
  content:"";
  display:block;
}

/*アイコン*/
.chima figure {
  width:95px;     /*アイコンの横幅*/
  height:95px;    /*アイコンの縦幅*/
}

.chima-left_icon {
  float:left;
}

.chima figure img {
  width:100%;
  height:100%;
  margin:0;
  border-radius:0%;    /*アイコンの角丸*/
}


/*吹き出しのセリフ部分*/
.chima-left , .chima-right  {
  position:relative;
  padding:10px;
  border-style:solid;    /*枠線の線種*/
  border-radius:10px;    /*セリフを入れる部分の角丸*/
  max-width: calc(100% - 160px);
  font-size:12px;
  display: inline-block; 
}

.chima p {
  margin:0;
}

.chima p :last-child {
  margin:0;
}

/*---左の吹き出し---*/
.chima-left {
  float:left;
  border-width:2px;         /*枠線の太さ*/
  border-color:#fff;   /*枠線の色*/
  background:#fff;    /*背景色*/
  margin-left:-15px; /*吹き出し左の余白*/
}

/*左の吹き出し しっぽ*/
.chima-left:after {
  position: absolute;/*親要素に対して絶定配置*/
  content: "";/*追加する中身はなし*/
  display: block;/*ブロックレベル要素に*/
  left: -18px;/*左端からの距離*/
  top: -10px;/*上端からの距離*/
  width: 24px;/*横幅*/
  height: 36px;/*高さ*/
  border-radius: 0 0px 10px 16px; /*角丸*/
  box-shadow: -8px -14px 0 -8px white inset;/*影*/
}

}