@charset "UTF-8";

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


/* --------------------------------------------------
  Template by espace（https://espace.monbalcon.net/）
  Copyright: 2020 espace.

  利用規約を遵守の上、ご利用ください。
  二次配布、販売は禁止しています。
  --------------------------------------------------*/

:root {
    --ecs-gap-pc: 20px;
    --ecs-gap-sp: 10px;

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

    /**** リスト設定 ****/
    /* 線幅 */
    --ecs-list-border-width: 1px;
    /* 線色 */
    --ecs-list-border-color: #88aafc;
    /* 角丸 */
    --ecs-list-border-radius: 5px;
    /* 背景色 */
    --ecs-list-bg-color: #fff;

    /** 列設定 **/
    /* ボタンリスト・PC */
    --ecs-list-btn-count-pc: 6;
    /* ボタンリスト・スマホ */
    --ecs-list-btn-count-sp: 2;
    /* 画像リスト・PC */
    --ecs-list-img-count-pc: 6;
    /* 画像リスト・スマホ */
    --ecs-list-img-count-sp: 3;

    /** 準備中設定 **/
    /* 背景色 */
    --ecs-span-bg-color: #333;
    /* テキスト色 */
    --ecs-span-tx-color: #fff;


    /**** コンテンツ設定 ****/
    /** データ要素（項目名）設定 **/
    /* 線幅 */
    --ecs-data-border-width: 1px;
    /* 角丸 */
    --ecs-data-border-radius: 5px;
    /* 線色 */
    --ecs-data-border-color: #20324c;
    /* 背景色 */
    --ecs-data-bg-color: #20324c;
    /* テキスト色 */
    --ecs-data-text-color: #fff;

    /** 時系列要素設定 **/
    /* 線幅 */
    --ecs-history-border-width: 8px;
    /* 線色 */
    --ecs-history-border-color: #ccc;
    /* 丸の色 */
    --ecs-history-circle-color: #333;

    /** 画像要素設定 **/
    /* 小画像の幅 */
    --ecs-img-sm-width: 100px;
    /* 線幅 */
    --ecs-img-border-width: 0;
    /* 線色 */
    --ecs-img-border-color: #fff;
    /* 角丸 */
    --ecs-img-border-radius: 0;
}

.ecs-list {
    display: grid;
    grid-template-columns: repeat(var(--ecs-list-btn-count-pc), 1fr);
    gap: var(--ecs-gap-pc);
}

.ecs-list>* {
    text-align: center;
    padding: 5px;
    border: var(--ecs-list-border-width) solid var(--ecs-list-border-color);
    border-radius: var(--ecs-list-border-radius);
    background-color: var(--ecs-list-bg-color);
    line-height: 1;
    overflow: hidden;
}

.ecs-list>span {
    position: relative;
}

.ecs-list>span img {
    filter: grayscale(1);
}

.ecs-list>span::before {
    content: "comming soon";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--ecs-span-bg-color);
    color: var(--ecs-span-tx-color);
    font-size: 12px;
    opacity: 0.5;
    z-index: 1;
}

.ecs-list>a:hover {
    opacity: 0.5;
}

.ecs-list-btn>* {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.ecs-list-btn-img>*,
.ecs-list-thumbnail>* {
    display: flex;
    gap: 5px;
}

.ecs-list-btn-img>* div,
.ecs-list-thumbnail>* div {
    display: flex;
}

.ecs-list-btn-img>* div img,
.ecs-list-thumbnail>* div img {
    width: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.ecs-list-btn-img>* {
    justify-content: start;
    align-items: center;
    text-align: left;
}

.ecs-list-btn-img>* div {
    position: relative;
    width: 30%;
    padding-top: 30%;
}

.ecs-list-btn-img>* div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecs-list-thumbnail {
    grid-template-columns: repeat(var(--ecs-list-img-count-pc), 1fr);
}

.ecs-list-thumbnail>* {
    flex-direction: column;
}

.ecs-list-thumbnail>* div {
    position: relative;
    padding-top: 100%;
}

.ecs-list-thumbnail>* div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ecs-content {
    text-align: left;
}

.ecs-content>*+* {
    margin-top: 150px;
}

.ecs-content p,
.ecs-content dl {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.ecs-content div {
    margin-top: 0;
    margin-bottom: 0;
}

.ecs-content-column {
    display: grid;
    gap: var(--ecs-gap-pc);
}

.ecs-content-column-1 {
    grid-template-columns: 1fr;
}

.ecs-content-column-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ecs-content-column-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ecs-content-outer-img,
.ecs-content-outer-img-reverse,
.ecs-content-outer-img-sm,
.ecs-content-outer-img-sm-reverse {
    display: grid;
    gap: var(--ecs-gap-pc);
    align-items: start;
}

.ecs-content-outer-img .ecs-content-img-square,
.ecs-content-outer-img .ecs-content-img-square-sm,
.ecs-content-outer-img .ecs-content-img-circle,
.ecs-content-outer-img .ecs-content-img-circle-sm,
.ecs-content-outer-img-reverse .ecs-content-img-square,
.ecs-content-outer-img-reverse .ecs-content-img-square-sm,
.ecs-content-outer-img-reverse .ecs-content-img-circle,
.ecs-content-outer-img-reverse .ecs-content-img-circle-sm,
.ecs-content-outer-img-sm .ecs-content-img-square,
.ecs-content-outer-img-sm .ecs-content-img-square-sm,
.ecs-content-outer-img-sm .ecs-content-img-circle,
.ecs-content-outer-img-sm .ecs-content-img-circle-sm,
.ecs-content-outer-img-sm-reverse .ecs-content-img-square,
.ecs-content-outer-img-sm-reverse .ecs-content-img-square-sm,
.ecs-content-outer-img-sm-reverse .ecs-content-img-circle,
.ecs-content-outer-img-sm-reverse .ecs-content-img-circle-sm {
    width: 100%;
    padding-top: 100%;
}

.ecs-content-outer-img .ecs-content-img-vertical,
.ecs-content-outer-img-reverse .ecs-content-img-vertical,
.ecs-content-outer-img-sm .ecs-content-img-vertical,
.ecs-content-outer-img-sm-reverse .ecs-content-img-vertical {
    width: 100%;
}

.ecs-content-outer-img {
    grid-template-columns: 30% 1fr;
}

.ecs-content-outer-img-reverse {
    grid-template-columns: 1fr 30%;
}

.ecs-content-outer-img-sm {
    grid-template-columns: var(--ecs-img-sm-width) 1fr;
}

.ecs-content-outer-img-sm-reverse {
    grid-template-columns: 1fr var(--ecs-img-sm-width);
}

.ecs-content-img-square,
.ecs-content-img-square-sm,
.ecs-content-img-circle,
.ecs-content-img-circle-sm,
.ecs-content-img-vertical {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: var(--ecs-img-border-width) solid var(--ecs-img-border-color);
    overflow: hidden;
}

.ecs-content-img-square img,
.ecs-content-img-square-sm img,
.ecs-content-img-circle img,
.ecs-content-img-circle-sm img,
.ecs-content-img-vertical img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 0;
}

.ecs-content-img-square,
.ecs-content-img-square-sm,
.ecs-content-img-vertical {
    border-radius: var(--ecs-img-border-radius);
}

.ecs-content-img-circle,
.ecs-content-img-circle-sm {
    border-radius: 50%;
}

.ecs-content-img-square,
.ecs-content-img-circle,
.ecs-content-img-vertical {
    width: 30%;
}

ecs-content-img {
    width: 70%;
    object-fit: contain;
}

.ecs-content-img-square,
.ecs-content-img-circle {
    padding-top: 30%;
}

.ecs-content-img-square img,
.ecs-content-img-circle img {
    object-fit: cover;
}

.ecs-content-img-square-sm,
.ecs-content-img-circle-sm {
    width: var(--ecs-img-sm-width);
    padding-top: var(--ecs-img-sm-width);
}

.ecs-content-img-square-sm img,
.ecs-content-img-circle-sm img {
    object-fit: cover;
}

.ecs-content-img-vertical {
    padding-top: 70vh;
}

.ecs-content-img-vertical img {
    object-fit: contain;
}

.ecs-content dl.ecs-data,
.ecs-content dl.ecs-data-num {
    display: grid;
    align-content: start;
    gap: calc(var(--ecs-gap-pc) / 2) var(--ecs-gap-pc);
}

.ecs-content dl.ecs-data dt,
.ecs-content dl.ecs-data dd,
.ecs-content dl.ecs-data-num dt,
.ecs-content dl.ecs-data-num dd {
    margin: 0;
    padding: 2px 0;
}

.ecs-content dl.ecs-data dt,
.ecs-content dl.ecs-data-num dt {
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--ecs-data-border-width) solid var(--ecs-data-border-color);
    border-radius: var(--ecs-data-border-radius);
    background-color: var(--ecs-data-bg-color);
    color: var(--ecs-data-text-color);
}

.ecs-content dl.ecs-data {
    grid-template-columns: 200px 1fr;
}

.ecs-content dl.ecs-data dd {
    text-align: left;
}

.ecs-content dl.ecs-data.ecs-data-column-1 {
    grid-template-columns: 200px 1fr;
}

.ecs-content dl.ecs-data.ecs-data-column-2 {
    grid-template-columns: repeat(2, 200px 1fr);
}

.ecs-content dl.ecs-data.ecs-data-column-3 {
    grid-template-columns: repeat(3, 200px 1fr);
}

.ecs-content dl.ecs-data-num {
    grid-template-columns: 1fr 100px;
}

.ecs-content dl.ecs-data-num dd {
    text-align: right;
}

.ecs-content dl.ecs-data-num.ecs-data-column-1 {
    grid-template-columns: 1fr 100px;
}

.ecs-content dl.ecs-data-num.ecs-data-column-2 {
    grid-template-columns: repeat(2, 1fr 100px);
}

.ecs-content dl.ecs-data-num.ecs-data-column-3 {
    grid-template-columns: repeat(3, 1fr 100px);
}

.ecs-content dl.ecs-history {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 0 1.5rem;
}

.ecs-content dl.ecs-history dt,
.ecs-content dl.ecs-history dd {
    margin: 0;
    padding: 10px 0;
}

.ecs-content dl.ecs-history dt {
    text-align: right;
    border: 0;
}

.ecs-content dl.ecs-history dd {
    position: relative;
    padding-left: calc(1.5rem - var(--ecs-history-border-width));
    border: 0;
    border-left: var(--ecs-history-border-width) solid var(--ecs-history-border-color);
}

.ecs-content dl.ecs-history dd::before {
    content: "";
    position: absolute;
    top: calc(50% - var(--ecs-history-border-width));
    left: calc((var(--ecs-history-border-width) + 2px) * -1);
    display: block;
    width: calc(var(--ecs-history-border-width) + 4px);
    height: calc(var(--ecs-history-border-width) + 4px);
    border-radius: 50%;
    background: var(--ecs-history-circle-color);
}

@media only screen and (max-width: 1024px) {
    .ecs-list {
        grid-template-columns: repeat(var(--ecs-list-btn-count-sp), 1fr);
        gap: var(--ecs-gap-sp);
    }

    .ecs-list-thumbnail {
        grid-template-columns: repeat(var(--ecs-list-img-count-sp), 1fr);
    }

    .ecs-content>*+* {
        margin-top: 75px;
    }

    .ecs-content-column {
        gap: var(--ecs-gap-sp);
    }

    .ecs-content-column-sp-1 {
        grid-template-columns: none;
        gap: 0;
    }

    .ecs-content-column-sp-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ecs-content-column-sp-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ecs-content-outer-img,
    .ecs-content-outer-img-reverse {
        gap: var(--ecs-gap-sp);
    }

    .ecs-content-outer-img.ecs-content-outer-sp-none,
    .ecs-content-outer-img-reverse.ecs-content-outer-sp-none {
        grid-template-columns: 1fr;
    }

    .ecs-content-outer-img {
        grid-template-columns: 35% 1fr;
    }

    .ecs-content-outer-img-reverse {
        grid-template-columns: 1fr 35%;
    }

    .ecs-content-img-square,
    .ecs-content-img-circle,
    .ecs-content-img-vertical {
        width: 35%;
    }

    .ecs-content-img-square,
    .ecs-content-img-circle {
        padding-top: 35%;
    }

    .ecs-content-img-vertical {
        padding-top: 70vw;
    }

    .ecs-content dl.ecs-data,
    .ecs-content dl.ecs-data-num {
        gap: calc(var(--ecs-gap-sp) / 2) var(--ecs-gap-sp);
    }

    .ecs-content dl.ecs-data {
        grid-template-columns: 1fr 1.5fr;
    }

    .ecs-content dl.ecs-data.ecs-data-column-1,
    .ecs-content dl.ecs-data.ecs-data-column-sp-1 {
        grid-template-columns: 1fr 1.5fr;
    }

    .ecs-content dl.ecs-data.ecs-data-column-2,
    .ecs-content dl.ecs-data.ecs-data-column-sp-2 {
        grid-template-columns: repeat(2, 1fr 1.5fr);
    }

    .ecs-content dl.ecs-data.ecs-data-column-3,
    .ecs-content dl.ecs-data.ecs-data-column-sp-3 {
        grid-template-columns: repeat(3, 1fr 1fr);
    }

    .ecs-content dl.ecs-data-num {
        grid-template-columns: 2fr 1fr;
    }

    .ecs-content dl.ecs-data-num.ecs-data-column-1,
    .ecs-content dl.ecs-data-num.ecs-data-column-sp-1 {
        grid-template-columns: 2fr 1fr;
    }

    .ecs-content dl.ecs-data-num.ecs-data-column-2,
    .ecs-content dl.ecs-data-num.ecs-data-column-sp-2 {
        grid-template-columns: repeat(2, 1.5fr 1fr);
    }

    .ecs-content dl.ecs-data-num.ecs-data-column-3,
    .ecs-content dl.ecs-data-num.ecs-data-column-sp-3 {
        grid-template-columns: repeat(3, 1fr 1fr);
    }

    
}

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
  top: 5px;
  left: 25px;
    white-space: nowrap;
    color: #C0C6C9; /* グレーカラー 自由に設定化 */
    font-size: 30px; 
}

.star5_rating:before, .star5_rating:after{
    content: '✦✦✦✦✦';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #8ddfe0; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

.st {

  display: flex;
  flex-wrap: wrap;
width: 53%;
}


.star7_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
  top: -13px;

   left: 7px;

    white-space: nowrap;
    color: #C0C6C9; /* グレーカラー 自由に設定化 */
    font-size: 30px; 
}

.star7_rating:before, .star7_rating:after{
    content: '✦✦✦✦✦✦✦';
}

.star7_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #8ddfe0; /* イエローカラー 自由に設定化 */
}

.star7_rating[data-rate="7"]:after{ width: 100%; } /* 星7 */
.star7_rating[data-rate="6.5"]:after{ width: 92%; } /* 星6.5 */
.star7_rating[data-rate="6"]:after{ width: 85%; } /* 星6 */
.star7_rating[data-rate="5.5"]:after{ width: 78%; } /* 星5.5 */
.star7_rating[data-rate="5"]:after{ width: 71%; } /* 星5 */
.star7_rating[data-rate="4.5"]:after{ width: 64%; } /* 星4.5 */
.star7_rating[data-rate="4"]:after{ width: 57%; } /* 星4 */
.star7_rating[data-rate="3.5"]:after{ width: 50%; } /* 星3.5 */
.star7_rating[data-rate="3"]:after{ width: 42%; } /* 星3 */
.star7_rating[data-rate="2.5"]:after{ width: 35%; } /* 星2.5 */
.star7_rating[data-rate="2"]:after{ width: 28%; } /* 星2 */
.star7_rating[data-rate="1.5"]:after{ width: 21%; } /* 星1.5 */
.star7_rating[data-rate="1"]:after{ width: 14%; } /* 星1 */
.star7_rating[data-rate="0.5"]:after{ width: 7%; } /* 星0.5 */
.star7_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

@media screen and (max-width: 768px) {
	/* 480px以下に適用されるCSS（スマホ用） */
.st {
  display: flex;
  flex-wrap: wrap;
width: 50vh;
}


.star7_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    font-size: 15px; 

}

.st_g {
  margin-right: -10px;

}


.cp_h3title:after {

	left: 5%;
    font-size: 11px;

  font-weight: 100;
}

.cp_h3title:before {

  width: 16px;
  height: 12px;

background-image: url("../img/h7_s.png");

}

.cp_h3title {

    font-size: 11px;

 margin-bottom: 20px;
max-width: 200px;
}


}

.st_g {
  margin-right: 55px;
}

.cp_h1title {
  position: relative;
  padding: 0 0 0 35px;
    font-size: 1.1em; 

}
.cp_h1title:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  top: 40%;
  transform: rotate(45deg);

}

.cp_h1title:after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  top: 40%;
  transform: rotate(45deg);
}

.cp_h1title:before {/*左のひし形*/
  border: 3px solid #20324c;
  left: 3px;
}
.cp_h1title:after {/*右のひし形*/
  top: 21px;
  left: 14px;
  border: 3px solid #20324c;
}


.cp_h2title {
  position: relative;
  padding: 0 0 0 35px;
    font-size: 1.2em; 

}
.cp_h2title:before {
  position: absolute;
  content: '';
  width: 12px;
  height: 12px;
  top: 19%;
  transform: rotate(45deg);

}

.cp_h2title:after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  top: 47%;
margin-top: -20px;
  transform: rotate(45deg);
}

.cp_h2title:before {/*左のひし形*/
  border: 3px solid #485590;
  left: 3px;
}
.cp_h2title:after {/*右のひし形*/
  top: 27px;
  left: 14px;
  border: 3px solid #485590;
}


.cp_h3title {
  position: relative;
  padding: 0 0 0 35px;
    font-size: 1.2em; 
	  font-family: var(--custom-font-po);
width: 280px;
font-weight:bold;

}
.cp_h3title:before {
  position: absolute;
  content: '';
  width: 29px;
  height: 20px;
  left: 3px;

  top: 6%;
background-image: url("../img/h7.png");

}

.cp_h3title:after {
	content: attr(data-text);
	position: absolute;
	left: 28%;
	bottom: 10px;
  top: -3px;

	height: 1px;
	font-family: "Noto Serif JP", serif;
	color: #cae1eb;
	transition: background-color 0.5s;
    font-size: 1.2em; 
  z-index: -2;
  font-weight: 100;
}



.icon1 {
    display: flex;
  flex-wrap:  wrap; 
}

.icon2 {
    display: flex;
  flex-wrap:  wrap; 
}


.cpimg2 {
  width:100px; 
  height:100px;
  margin-top:2em;
  margin-bottom:2em;
  position:relative;
margin-right: 5px;
}

.cpimg2 img {
  width:93px;     /*アイコンの横幅*/
  height:93px;    /*アイコンの縦幅*/
  margin:0;
  border:2px solid #fff;
  border-radius:0%;    /*アイコンの角丸*/
}

/*アイコン*/
.cpimg2 icon {
  width:96px;     /*アイコンの横幅*/
  height:96px;    /*アイコンの縦幅*/
}

.cpb {
   max-width: 680px;
   flex-wrap:  wrap; 
}

.cpimg {
  width:100px; 
  margin-top:2em;
  margin-bottom:2em;
  position:relative;
margin-right: 5px;
  text-align:center;
}

.cpimg img {
  width:93px;     /*アイコンの横幅*/
  height:93px;    /*アイコンの縦幅*/
  margin:0;
  border:2px solid #fff;
  border-radius:0%;    /*アイコンの角丸*/
}

figcaption .name {
  width:93px;
margin: 0 auto;
  text-align:center;
}

/*アイコン*/
.cpimg icon {
  width:90px;     /*アイコンの横幅*/
  height:90px;    /*アイコンの縦幅*/
  text-align:center;
}

.niji {
    background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  font-size:2.8em;
    font-weight: bold;
    display: inline-block;
}


.tooltip { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 5px;
  font-size: 1.0em;

}
 
.balloon_bottom { /* ツールチップのスタイル */
  width: 280px; /* 横幅 */
  position: absolute;
  top: 80%; /* Y軸の位置 */
  left: 20%;
  transform: translateX(-35%);
  margin-top: 10px; /* テキストとの距離 */
  padding: 8px;
  border-radius: 10px; /* 角の丸み */
  background-color: #FFF; /* ツールチップの背景色 */
  font-size: 1.0em;

  text-align: center;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
 box-shadow: 3px 4px 5px rgba(58, 60, 68, 0.3);
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}
 
.balloon_bottom::before { /* 吹き出しの「しっぽ」のスタイル */
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 12px solid #FFF; /* 最後の値は「ツールチップの背景色」と合わせる */
  position: absolute;
  bottom: 99%;
  left: 50%;
  transform: translateX(-50%);
}
 
.tooltip:hover .balloon_bottom { /* マウスオーバー時のスタイル */
  top: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}

.serihu {
  font-family: "Lustria", "Noto Serif JP", serif;
}

.kankei {
    display: flex;
  flex-wrap:  wrap; 
margin: 0 auto;
max-width: 90%;
}

@media screen and (max-width: 600px) {

.balloon_bottom { /* ツールチップのスタイル */
  width: 160px; /* 横幅 */
  font-size: 0.85em;
   margin-left: -10px;
  transform: translateX(-20%);
}

.kankei {
   margin-left: 25px;
    display: flex;
  flex-wrap:  wrap; 
}

}