body{
    font-family: 'Source Sans Pro', sans-serif; 
    background-color: #fff;
    color: #222;
    letter-spacing: 0.1;
    overflow-x: hidden;
}


/* ==========
ローディングアニメーション
========== */


#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #E5B7C3;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.spinner {
margin: 100px auto;
width: 40px; 
height: 40px;
position: relative;
text-align: center;

-webkit-animation: sk-rotate 2.0s infinite linear;
animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #fff;
border-radius: 100%;

-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
} 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
}
}

.loaded {
    opacity: 0;
    visibility: hidden;
  }

/* ==========
common
========== */


h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Serif', serif;
    font-weight: 700;
}

h1{
    font-size: 4.2rem;
}


h2{
    font-size: 2.4rem;
}

h3, h4, h5, h6 {
    font-size: 1.6rem;
}

p,li,dt,dd,th,td{
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 1.6rem;
    font-weight: 400;
    color: #222;
}
figcaption{
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 1.6rem;
    font-weight: 400;
}

a{
    font-family: 'Roboto Serif', serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #222;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    transition: 0.3s;
}


/* ===========
span
========== */
.c-000s-30{
    color:#000;
    font-size: 3rem;
    font-weight: bold;
}
.c-reds-32{
    color:rgb(255, 0, 0);
    font-size: 3.2rem;
    font-weight: bold;
}


.c-000s-20{
    color:#000;
    font-size: 2rem;
    font-weight: bold;
}
.c-reds-20
{
    color:rgb(255, 0, 0);
    font-size: 2rem;
    font-weight: bold;
}


/* ==========
list-style
========== */
/* 装飾無しリスト */
.listStyle-none{
    margin-left: 40px;
    list-style: none;
}

/* liにチェックマーク */
.listStyle-check{
    list-style: none;
    padding-left: 30px;
    margin-left: 40px;

}

.listStyle-check>li {
position: relative;
}

.listStyle-check>li::after {
content: '';
display: block;
position: absolute;
top: .5em;
left: -1.5em;
width: 10px;
height: 5px;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(-45deg);
}
/* デフォルトリスト */
.liststyle-defo{
    margin-left: 50px;
}

/* ダイアリスト */
.listStyle-diams{
    list-style: none;
    padding-left: 30px;
    margin-left: 40px;

}

.listStyle-diams>li {
position: relative;
}

.listStyle-diams>li::after {
    content: '\02666';
    display: block;
    position: absolute;
    top: 0;
    left: -1.5em;
}

/* 点付き定義リスト */

.liststyle-definitionPoint{
    margin-left: 40px;
    padding-left: 30px;

}

.liststyle-definitionPoint dt {
    position: relative;
    font-weight: bold;
}
    

.liststyle-definitionPoint dt::after{
    content: '\02022';
    display: block;
    position: absolute;
    top: 0;
    left: -1.5em;

}
.liststyle-definitionPoint dd{
    margin-bottom: 16px;
} 

/* 注釈リスト */
.liststyle-flower{
    list-style: none;
    padding-left: 30px;
    margin-left: 40px;

}

.liststyle-flower>li {
    position: relative;
}

.liststyle-flower>li::after {
    content: '\02747';
    display: block;
    position: absolute;
    top: 0;
    left: -1.5em;
}

/* 装飾無し横並び */
.listStyle-none-row{
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.listStyle-none-row>a:hover{
    text-decoration: underline;
    transition: 0.3s;
}



@media screen and (max-width: 1024px) {
    /* 装飾無しリスト */
.listStyle-none{
    margin-left: 20px;
}

/* liにチェックマーク */
.listStyle-check{
    padding-left: 30px;
    margin-left: 20px;

}

/* デフォルトリスト */
.liststyle-defo{
    margin-left: 30px;
}

/* ダイアリスト */
.listStyle-diams{
    padding-left: 30px;
    margin-left: 20px;
}


/* 点付き定義リスト */

.liststyle-definitionPoint{
    margin-left: 20px;
    padding-left: 10px;

}

    

.liststyle-definitionPoint dt::after{
    content: '\02022';
    display: block;
    position: absolute;
    top: 0;
    left: -1.5em;

}
.liststyle-definitionPoint dd{
    margin-bottom: 16px;
} 

/* 注釈リスト */
.liststyle-flower{
    padding-left: 10px;
    margin-left: 20px;

}


.liststyle-flower>li::after {
    content: '\02747';
    display: block;
    position: absolute;
    top: 0;
    left: -1.5em;
}

/* 装飾無し横並び */
.listStyle-none-row{
    gap: 16px;
}

}