<style>@charset "UTF-8";

/* Template & Designed by Orihashi Ren */
/* http://kerry.php.xdomain.jp/ */

/* webフォント */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Open+Sans:400,400i,700,700i&display=swap');

/* 全体設定 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: 400;
    font-family: 'Open Sans', 'Noto Sans JP', sans-serif !important;
}

/* 基本設定 */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    line-height: 1.9;
    font: inherit;
    vertical-align: baseline;} 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;}
}
html,body {
    padding:0; 
    margin:0; 
    height: 100%;
    box-sizing: border-box; 
}
html {
    font-size: 14pt;
}
@media screen and (max-width: 1680px) {
    html {
        font-size: 12pt;
    }
}
@media screen and (max-width: 1280px) {
    html {
        font-size: 11pt;
    }
}
@media screen and (max-width: 360px) {
    html {
        font-size: 10pt;
    }
}
body {
    text-align: justify;
    word-wrap: break-word; /* 禁則処理 */
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%; /* Safari横向き対策 */
    background-color: #225CA6;
    color: #fff;
}
*, *:before, *:after {
    box-sizing: inherit;
}
* {
    margin: 0px;
    padding: 0px;
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
}
*::-webkit-scrollbar{  /* Chrome, Safari 対応 */
    display:none;
}
@-ms-viewport {
    width: device-width;
}
@media screen and (max-width: 480px) {
    html, body {
        min-width: 320px;
    }
}
body, input, select, textarea {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.075em;
}

/* リンク */
a {
    border-bottom: none;
    text-decoration: none;
    outline: none;
}
a:hover {
    border-bottom-color: transparent;
}

/* 文字装飾 */
strong, b {
    font-weight: 700; /*太字*/
}
em, i {
    font-style: italic; /*斜体*/
}
em {
    border-bottom: 1px dashed #000;
}

/* text */
p {
    text-align: justify;
    margin: 0 0;
    padding: 0rem 0;
    font-size: 13px;
    line-height: 1.9rem; /*行間*/
}
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.05em; /*文字間隔*/
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    border-bottom: 0;
    color: inherit;
    text-decoration: none;
}
h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 2rem 1rem;
}
h2 {
    font-size: 2rem;
    line-height: 1.3;
    margin: 2rem 1rem;
}
h3 {
    font-size: 1.5rem;
    margin: 2rem 1rem;
}
h4 {
    font-size: 1.2rem;
    margin: 2rem 1rem;
}
h5 {
    font-size: 1.1rem;
    margin: 2rem 1rem;
}
h6 {
    font-size: 0.9rem;
    margin: 2rem 1rem;
}

/* 上付き */
sub {
    font-size: 0.6rem;
    position: relative;
    top: 0.5rem;
}
/* 下付き */
sup {
    font-size: 0.6rem;
    position: relative;
    top: -0.5rem;
}

mark {
    display: inline-block;
    padding: .2rem .5rem;
}

/* 引用 */
blockquote {
    border-left: solid 2px #fff; /*左側に線*/
    font-style: italic;
    margin: 0 0.5rem 2rem;
    padding: 0.5rem 1rem;
}
blockquote > p{
    padding: 0 0;
}
blockquote cite { /*引用元*/
    display: block;
    text-align: right;
    font-size: 0.9em;
    margin-top: 0.5rem;
}

/* コード */
.code_div {
    margin: 0 0rem;
}
code {
    border: none;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0.25rem;
    padding: 0.25rem 0.65rem;
}
pre {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    text-align: left;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0 2rem 0;
}
pre code {
    display: block;
    line-height: 1.75;
    padding: 1rem 1.5rem;
    overflow-x: auto;
}

/* 区分線 */
hr {
    border: 0;
    border-bottom: solid 2px;
    margin: 3rem 0rem;
}

/* 文字揃え
<span class="align-center">例</span> 等と使用してください */
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-center p{
    text-align: center;
}
.align-right {
    text-align: right;
}

/* color */
input, select, textarea {
    color: #000;
}
a {
    color: #FBDEE2;
}
a:hover {
    border-bottom: dotted 2px transparent;
    color: #F8C6D1 !important;
}
strong {
    color: #E20613;
}
mark {
    background-color: #F8C6D1;
    color: #E20613;
}
blockquote {
    border-left-color: #eeeeee;
}
blockquote cite{
    color: rgba(238, 238, 238, 0.6)
}
code {
    background: rgba(220, 220, 220, 0.25);
    border-color: #eeeeee;
}
hr {
    border-bottom-color: #eeeeee;
}

/* Box */
.box {
    height: auto;
    margin: 5rem 0rem;
    padding: 1.5rem;
    border: 1px solid #F8C6D1;
    outline:solid 3px #fff;
    background: #fff;
}
.box > p {
    padding: 0 0;
}

/* lists */
ol, ul {
    text-align: left;
    list-style: none;
    margin: 1rem 1rem;
}
.list_no {
    list-style: none;
    margin: 0 0rem;
    padding-left: 2rem;
}
.list_un {
    list-style: disc;
    margin: 0 0rem;
    padding-left: 2rem;
}
.list_or {
    list-style: decimal;
    margin: 0 0rem;
    padding-left: 2rem;
}
.list_no > li,
.list_un > li,
.list_or > li {
    padding-left: 0.5rem;
    text-align: left;
}
.float li {
    float: left
}
.float:after {
    display: block;
    content: '';
    clear: both
}

/* dl */
.dltype1 {
    text-align: left;
    margin: 0.5rem 1rem;
}
.dltype1 > dt a,
.dltype1 > dt {
    color: #fff !important;
    font-size: 14px;
    border-bottom: none;
}
.dltype1 > dd {
    margin-left: 1.3rem;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* table */
.table_div {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin: 0 0rem;
}
table {
    margin: 0rem 0rem;
    width: 100%;
}
table thead {
    border-bottom: solid 2px;
    border-bottom-color: #eeeeee;
}
table tbody tr {
    border: solid 1px;
    border-left: 0;
    border-right: 0;
    border-color: #eeeeee;
}
table tbody tr:nth-child(odd) {
    background-color: rgba(220, 220, 220, 0.25);
}
table td {
    padding: 0.75rem 0.75rem;
}
table th {
    font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.5;
    padding: 0 0.75rem 0.75rem 0.75rem;
    text-align: left;
}
table tfoot {
    border-top: solid 2px;
    border-top-color: #eeeeee;
}
@media screen and (max-width: 980px) {
    table th {
        font-size: 0.9rem;
    }
}


/* link button */
.btn-def,
.link {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: .2rem auto;
    padding: .1rem .3rem;
    border: 1px solid #192f60 !important;
    transition: all .5s
}
.btn-def,
.link:hover {
    background-color: #2F2C7D;
    color: #fff;
}
.btn-def:hover {
    background-color: transparent;
    color: #fff !important;
    border: 1px solid #fff !important;
}
.btn-def {
    padding: .5rem 1.5rem;
}

/* form */
form {
    width: 100%;
    position: relative;
    display: inline-block;
    text-align: center;
    max-width: 340px;
}
.row {
    display: flex;
    width: 100%;
    margin: 0.5rem 0;
    justify-content: space-between;
}
.row div:nth-of-type(1) {
    flex-basis: 37%;
}
.row div:nth-of-type(2) {
    flex-basis: 57%;
}
textarea,
input[type] {
    -webkit-appearance: none;
    padding: 0.2em 0.5em;
    background-color: #2F2C7D;
    border: 1px solid #fff;
    border-radius: 0px;
}
input[type=text],
input[type=email],
textarea {
    width: 100%;
}
textarea::placeholder,
input[type]::placeholder {
    color: rgba(255,255,255,.8)
}
input[type]:focus,
textarea:focus {
    outline: none;
    border-color: #f4eeff;
}
.actions {
    display: flex;
    justify-content: center;
}
.actions li {
    margin: 0 .5rem;
    flex-basis: 30%;
}
input[type=submit] {
    display: inline-block;
    background-color: #2F2C7D;
    border: 1px solid #2F2C7D;
    color: #fff;
    transition: all .5s;
}
input[type=submit]:hover {
    background-color: transparent;
    border: 1px solid #fff !important;
    color: #fff !important;
}
input[type=reset] {
    display: inline-block;
    color: #fff;
    background-color: #555;
    border: 1px solid #555;
    opacity: 1;
}
input[type=reset]:hover {
    color: #fff !important;
    background-color: #555;
    border: 1px solid #555;
}

/*-------------------- 個別設定 --------------------*/

.container,
.container-first {
    max-width: 650px;
    margin: 0 auto;
    padding: 3rem 2rem;
}
.container {
    text-align: center;
}
.container-first {
    padding: 10rem 2rem 3rem;
}

.container mark a,
.container div div mark a {
    color: #E20613 !important;
}
.section-bubble2 .container mark,
.section-bubble2 .container div div mark {
    background: #225CA6 !important;
    color: #fff !important;
}
.section-bubble2 a {
    color: #2F2C7D !important;
}

/* work */
#works ul li a {
    margin-left: 1rem;
    color: rgba(255, 255, 255, 0.7) !important;
}
#works h4 {
    margin: 2rem 1rem 1rem;
}

/* note */
#note {
    max-width: 55rem;
}
#note > div > div {
    margin: 0 0 2rem;
    padding: 2rem;
    border: thin solid #2F2C7D;
    box-shadow: 5px 5px 0 #2F2C7D;
    background: rgba(255,255,255,.9);
    color: #2F2C7D;
}
#note > div > div > h3 {
    margin: 0 1rem 1rem;
}
.more {
    border-bottom: 1px solid #F8C6D1;
    color: #F8C6D1;
    transition: all .5s
}
.more:hover {
    color: #225CA6 !important;
    border-bottom: none;
}
time {
    margin: 10px 0 0;
    font-size: 12px;
}
/* pagenation */
#note .pagenation {
    display: inline-block;
    text-align: center !important;
    margin: 0rem auto 4rem;
}
.pagenatin ul {
    display: inline-block !important;
}
.pagenation li {
    display: inline-block;
    margin: 0 0.5em;
}
.pagenation li a, 
.lni-angle-double-left,
.lni-angle-double-right {
    font-size: 13px;
    color: #fff !important;
}

/* code */
#code a,
.link-b {
    position: relative;
    display: inline-block;
    transition: .5s;
}
#code a,
#code a:hover,
.link-b,
.link-b:hover {
    border-bottom: none;
}
#code a::after,
.link-b::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 0;
    height: 1px;
    background-color: #F8C6D1;
    transition: .5s;
}
#code a:hover::after,
.link-b:hover::after {
    width: 100%;
}

/*-------------------- novel --------------------*/

.container-first > h2 {
    font-weight: normal;
    font-size: 30px;
    letter-spacing: 0.05rem;
    margin: 50px 0 20px;
    border-bottom: double 4px #E20613;
}
.novel {
    text-align: center !important;
}
.novel > h3 {
    display: inline-block !important;
}
.novel > p {
    /*小説部分の段落に間隔を作りたくない場合はmargin-topに0を指定してください*/
    margin-top: 2rem;
    font-size: 13px;
    line-height: 2rem; /*小説部分の行間*/
    letter-spacing: 0.025rem; /*小説部分の文字間隔*/
}
.novel > p:first-child {
    margin-top: 0;
}
/* pagenation */
#afterword .pagenation {
    text-align: center;
    display: inline-block !important;
    margin: 2rem;
}
/* ruby */
ruby rt {
    top: -3px;
    font-family: 'Noto Sans JP', sans-serif !important;
}

/*-------------------- elements --------------------*/

.sub-title {
    position: relative;
    padding: .5em .75em;
    background-color: rgba(240, 240, 240,0.7);
    border-radius: 6px;
}
.sub-title::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 15px solid rgba(240, 240, 240,0.7);
}
.section-bubble1 .box {
    border: 1px solid #B7DEF7 !important;
}
.section-bubble3 .box {
    color: #78ABDA !important;
    border: 1px solid #78ABDA !important;

} 
.section-bubble4 .box {
    color: #225CA6 !important;
    border: 1px solid #225CA6 !important;

}
.section-bubble5 .box {
    color: #2F2C7D !important;
    border: 1px solid #2F2C7D !important;

}

/* 横幅768px以上 */
@media screen and (min-width: 768px) {
    .container > .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .container > .flex > div {
        width: 45%;
        margin: 1rem;
    }
    #note > .flex > div {
        width: 40%;
    }
}

/* menu */
@media screen and (min-width: 768px) {
    nav {
        position: fixed;
        top: 30px;
        right: 30px;
        text-align: right;
        z-index: 900;
    }
    nav ul li {
        display: inline-block;
        margin: 0 0.5rem;
    }
    nav ul li a {
        position: relative;
        display: inline-block;
        transition: .5s;
        font-size: 2rem;
    }
    nav ul li a,
    nav ul li a:hover {
        border-bottom: none;
        color: #2F2C7D !important;
    }
    nav ul li a::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 0;
        height: 2px;
        background-color: #2F2C7D;
        transition: .5s;
    }
    nav ul li a:hover::after {
        width: 100%;
    }
}

nav aside {
    margin: 0 1em;
    font-size: 12px;
}

/* 横幅767px以下ハンバーガーメニュー */
@media screen and (max-width:767px) {

    /* Toggle Button */
    #nav-toggle {
        position: fixed;
        top: 7%;
        right: 7%;
        height: 30px;
        cursor: pointer;
    }
    #nav-toggle > div {
        position: relative;
        width: 30px;
    }
    #nav-toggle span {
        width: 100%;
        height: 3px;
        left: 0;
        display: block;
        position: absolute;
        transition: transform 0.6s ease-in-out, top 0.5s ease;
        border-radius: 10px;
        background: #2F2C7D;
    }
    #nav-toggle span:nth-child(1) {
        top: 0;
    }
    #nav-toggle span:nth-child(2) {
        top: 10px;
    }
    #nav-toggle span:nth-child(3) {
        top: 20px;
    }
    .open #nav-toggle span {
        background: #fff;
    }
    .open #nav-toggle span:nth-child(1) {
        top: 9px;
        transform: rotate(45deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 9px;
        transform: rotate(-45deg);
    }
    #nav-toggle {
        z-index: 1000;
    }

    #gloval-nav aside {
        display: none;
    }
    #gloval-nav {
        background: rgba(0,0,0,0.5);
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        text-align: center;
        display: flex;
        visibility: hidden;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 29px;
        opacity: 0;
        transition: opacity 0.6s ease, visibility 0.6s ease;
    }
    #gloval-nav a {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 10px 0;
        transition: color 0.6s ease;
    }
    #gloval-nav a:hover {
        color: #666;
    }
    #gloval-nav ul {
        list-style: none;
    }
    #gloval-nav ul li {
        opacity: 0;
        transform: translateX(200px);
        transition: transform 0.6s ease, opacity 0.2s ease;
    }
    #gloval-nav ul li:nth-child(2) {
        transition-delay: 0.15s;
    }
    #gloval-nav ul li:nth-child(3) {
        transition-delay: 0.3s;
    }
    #gloval-nav ul li:nth-child(4) {
        transition-delay: 0.45s;
    }
    #gloval-nav ul li:nth-child(5) {
        transition-delay: 0.6s;
    }
    #gloval-nav ul li:nth-child(6) {
        transition-delay: 0.75s;
    }
    #gloval-nav ul li:nth-child(7) {
        transition-delay: 0.9s;
    }
    .open {
        overflow: hidden;
    }
    .open #gloval-nav {
        visibility: visible;
        opacity: 1;
    }
    .open #gloval-nav nav ul {
        margin: 5.5rem auto 3rem;
    }
    .open #gloval-nav nav ul li {
        display: list-item;
        opacity: 1;
        transform: translateX(0);
        transition: transform 1s ease, opacity 0.9s ease;
    }
    .open #gloval-nav nav ul li a {
        display: list-item;
        text-align: center;
        text-decoration: none;
        padding: 10px 0;
        margin: 0.5rem auto;
        transition: color 0.6s ease;
        font-size: 17px;
        color: #fff !important;
    }
    nav {
        text-align: center;
        top: 0;
        right: 0;
        width: 100%;
    }
    .open #gloval-nav aside {
        display: list-item;
        opacity: 1;
    }
}

/*-------------------- other --------------------*/

/* pagetop button */
#page-top {
    position: fixed;
    bottom: 4%;
    right: 2%;
}
#page-top a {
    display: block;
    padding: 0.1rem 0.4rem;
    border-radius: 50%;
    font-size: 0.9rem;
    color: #2F2C7D;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 100;
}
#page-top a:visited,
#page-top a:hover {
    color: #2F2C7D !important; 
}
@media screen and (max-width: 980px) {
    #page-top {
        right: 0.5%;
        bottom: 2%;
    }
}

/* loader */
.page-loader {
    display: inline-block;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: #fff;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 9998;
}
.spring-spinner, .spring-spinner * {
    box-sizing: border-box;
}
.spring-spinner {
    display: inline-block;
    position: absolute;
    height: 60px;
    width: 60px;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
.spring-spinner .spring-spinner-part {
    overflow: hidden;
    height: calc(60px / 2);
    width: 60px;
}
.spring-spinner  .spring-spinner-part.bottom {
    transform: rotate(180deg) scale(-1, 1);
}
.spring-spinner .spring-spinner-rotator {
    width: 60px;
    height: 60px;
    border: calc(60px / 7) solid transparent;
    border-right-color: #2F2C7D;
    border-top-color: #2F2C7D;
    border-radius: 50%;
    box-sizing: border-box;
    animation: spring-spinner-animation 3s ease-in-out infinite;
    transform: rotate(-200deg);
}
@keyframes spring-spinner-animation {
    0% {
        border-width: calc(60px / 7);
    }
    25% {
        border-width: calc(60px / 23.33);
    }
    50% {
        transform: rotate(115deg);
        border-width: calc(60px / 7);
    }
    75% {
        border-width: calc(60px / 23.33);
    }
    100% {
        border-width: calc(60px / 7);
    }
}

/* 背景 */
.section-bubble,
.section-bubble1,
.section-bubble1-1,
.section-bubble2-1,
.section-bubble2,
.section-bubble3,
.section-bubble4,
.section-bubble_type-a,
.section-bubble_type-b {
    margin-bottom: 20vw;
    position: relative;
}
.section-bubble:after,
.section-bubble1:after,
.section-bubble1-1:after,
.section-bubble2-1:after,
.section-bubble2:after,
.section-bubble3:after,
.section-bubble4:after,
.section-bubble_type-a:after,
.section-bubble_type-b:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20vw;
    background: url('http://localhost:3000/~rinu/rinu/wp-content/themes/siebzehn/static/images/bubbles.svg') #225CA6;
    background-size: 100%;
    transform: translate(0,100%);
}
.section-bubble1 {
    background-color: #B7DEF7;
    color: #2F2C7D;
}
.section-bubble1:after {
    background-color: #FBDEE2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23B7DEF7' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble2 {
    background-color: #FBDEE2;
    color: #E20613;
}
.section-bubble2:after {
    background-color: #78ABDA;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%23FBDEE2'/></svg>");
}
.section-bubble3 {
    color: #fff;
    background-color: #78ABDA;
}
.section-bubble3:after {
    background-color: #225CA6;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%2378ABDA' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble4 {
    background-color: #225CA6;
    color: #fff;
}
.section-bubble4:after {
    background-color: #2F2C7D;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%23225CA6'/></svg>");
}
.section-bubble5 {
    background: #2F2C7D;
    color: white;
    text-align: center;
}

.section-bubble_type-a {
    color: #2F2C7D;
    background-color: #B7DEF7;
}
.section-bubble_type-a:after {
    background-color: #78ABDA;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23B7DEF7' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble_type-b {
    color: #fff;
    background-color: #78ABDA;
}
.section-bubble_type-b:after {
    background-color: #2F2C7D;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%2378ABDA'/></svg>");
}

/*-------------------- color --------------------*/
/* blue */
.blue {
    color: #78ABDA !important;
    display: inline;
}
/* pink */
.pink {
    color: #F8C6D1 !important;
    display: inline;
}
/*-------------------- font size --------------------*/
.s_12 {
    font-size: 12px;
}</style>
                