/*グラデーション下線*/
h2.underline {
    position: relative;
    display: block;
    padding: 0.2em 0;
}

h2.underline::before {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4px;
    background: #8ec5fc;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    content: "";
}

/*カラフル下線*/
h2.underline-colorful {
    position: relative;
    display: block;
    padding: 0.2em 0;
}

h2.underline-colorful::before {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, rgb(190, 255, 209) 0%,rgb(181, 253, 202) 33%,rgb(255, 145, 137) 33%,rgb(252, 188, 165) 66%,rgb(174, 220, 255) 66%,rgb(155, 211, 255) 100%);
    background-color: #a3e9ff;
    content: "";
}

/*丸アイコン*/
h2.circle {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.2em;
}

h2.circle::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #35bdcc;
    content: "";
}

/*丸アイコン2個*/
h2.circle-two {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.2em;
}

h2.circle-two::before {
    position: absolute;
    top: 0.6em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #70e2ef;
    box-shadow: 0.4em -0.4em 0 -1px #ffcdcd;
    content: "";
}

/*四角アイコン*/
h2.square {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.2em;
}

h2.square::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    background: #9dcdff;
    content: "";
}

/*四角アイコン2個横並び*/
h2.square-two-side {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 2em;
}

h2.square-two-side::before {
    position: absolute;
    top: 0.46em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    background: #9dcdff;
    box-shadow: 1em 0 0 #ffcdcd;
    content: "";
}

/*四角アイコン2個縦並び*/
h2.square-two-length {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1em;
}

h2.square-two-length::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    display: block;
    width: 0.6em;
    height: 0.6em;
    background: #9dcdff;
    box-shadow: 0 0.7em 0 #ffcdcd;
    content: "";
}

/*四角アイコン4個*/
h2.square-four {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.4em;
}

h2.square-four::before {
    position: absolute;
    top: 0.3em;
    left: 0;
    display: block;
    width: 0.5em;
    height: 0.5em;
    background: #ffa3a3;
    box-shadow: 0 0.6em 0 #93e099, 0.6em 0 0 #8adaf9, 0.6em 0.6em 0 #efc378;
    content: "";
}

/*ひし形アイコン*/
h2.diamond {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.2em;
}

h2.diamond::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    background: #5ea6c3;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*ひし形2個アイコン*/
h2.diamond-two {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.5em;
}

h2.diamond-two::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    background: #5ea6c3;
    box-shadow: 0.4em 0.4em 0 -0.1em #ff9c4f;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}