@charset "utf-8";
/* main ///////////////////////*/
main {
padding: 0;
}


/* index　目次 ///////////////////////*/
.detail .index li {
padding: 0.5rem 0 0.5rem 1rem;
border-bottom: 1px #C2C2C2 solid;
}

.detail .index li:last-child {
border: 0;
}

.detail .index li a {
display: inline-block;
padding: 0.5rem 0;
width: 100%;
}

.detail .index li p {
padding: 0 0 1rem 0;
}

.detail .index li p a {
padding: 0.1rem 0;
}

.detail .index li a:hover {
color: #007CFD;
text-decoration: underline;
}

.detail .index li:hover::before {
background: #007CFD;
}


/* inine-block ///////////////////////*/
@media (max-width: 470px) {

.inline-block .col2 .dl,
.inline-block .col2-2 .dl {
display: block !important;
}

.inline-block .col2 .dd,
.inline-block .col2-2 .dd {
display: block !important;
width: auto !important;
padding: 0 0 0 0 !important;
}

}


/* title タイトル ///////////////////////*/
.detail .title {
padding: 1rem 0;
margin: 0 auto 3rem auto;
border-top: 2px #CB9A9D solid;
border-bottom: 2px #CB9A9D solid;
}

.detail .title h2 {
text-align: center;
}

.detail .read {
text-align: center;
padding: 0 0 1rem 0;
}

.detail .read p,
.detail .read span {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
color: #b86363;
font-size: 1.45rem;
line-height: 2rem;
}

.detail .read:after {
content: "";
display: block;
width: 4rem;
border-top: 4px #CB9A9D solid;
margin: 3rem auto;
}

.detail h1,
.detail h2,
.detail h3,
.detail h4,
.detail h1 p,
.detail h2 p,
.detail h3 p,
.detail h4 p {
white-space: normal;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
line-height: 2rem;
text-align: left;
}

.detail h3 {
border-left: 4px #CB9A9D solid;
padding: 0.5rem 0.5rem 0.5rem 1rem;
background: #F6F6F6;
margin: 4rem 0 1.5rem 0;
}

.detail h3 p {
font-size: 1.3rem;
}

.detail section h3:first-child {
margin: 1rem 0 1.5rem 0;
}

.detail h4 {
position: relative;
margin: 2rem 0 1rem 0;
padding: 0 0 0 1.5rem;
}

.detail h4:before {
content: "";
position: absolute;
top: 0.5rem;
left: 0;
width: 1rem;
height: 1rem;
border: 2px #CB9A9D solid;
background: #E7CFD8;
border-radius: 0.2rem;
-moz-border-radius: 0.2rem;
-webkit-border-radius: 0.2rem;
}

.detail h4:after {
content: "";
position: absolute;
width: 1.5rem;
height: 1.5rem;
top: 0;
left: 0;
background: url(/image/icon/check.svg) no-repeat -0.4rem -5px;
background-size: 2rem;
}

.detail h4 span {
font-size: 1.15rem;
}

.detail h5 {
position: relative;
display: inline-block;
padding: 0 0 0.5rem 0;
margin: 1rem 0;
border-bottom: 2px #BB7F7F solid;
}

.detail h5 p,
.detail h5 span {
color: #b86363;
}


/* image 画像 /////////////////////// */
.detail .image {
border: 2px #E6E6E6 solid;
padding: 0.5rem;
margin: 1rem 0;
background: #FFF;
}

.detail .image img {
width: 100%;
height: auto;
}


.detail .icon {
max-width: 180px;
margin: 1rem auto;
}

.detail .screen {
max-width: 280px;
margin: 1rem auto;
border: 4px #E6E6E6 solid;
border-radius: 1rem;
-moz-border-radius: 1rem;
-webkit-border-radius: 1rem;
}

.detail .screen img {
border-radius: 0.75rem;
-moz-border-radius: 0.75rem;
-webkit-border-radius: 0.75rem;
}


/* ul リスト /////////////////////// */
.detail ul {
padding: 0 0 0 1.3rem;
}

.detail ul li {
padding: 0 0 0.5rem 1rem;
line-height: 1.5rem;
}

.detail ul li:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0.3rem;
height: 0.3rem;
margin: 0 0.5rem 0 -1rem;
background: #0D1624;
}


/* table テーブル /////////////////////// */
.detail .table table {
width: 100%;
border: 2px #C2C2C2 solid;
}

.detail .table td,
.detail .table th {
padding: 0.5rem;
border: 1px #C2C2C2 solid;
font-size: 0.9rem;
line-height: 1.3rem;
}

.detail .table th {
text-align: center;
font-weight: bold;
background: #F3E8EA;
}

.detail .table td:nth-child(1) {
background: #F9F1E7;
}


/* box /////////////////////// */
.detail .box {
margin: 1rem 0 0 0;
padding: 1rem;
border: 2px #EBDBD6 solid;
background: #FAF4F2;
line-height: 1.5rem;
}

.detail .box ul {
padding: 0 0 0 0.3rem;
}


/* mess /////////////////////// */
.detail .mess {
position: relative;
margin: 2rem 0 0 0;
padding: 1rem;
border: 4px #ABA9AA dotted;
background: #F6F6F6;
line-height: 1.5rem;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.detail .mess .text {
width: 70%;
color: #b86363;
}

.detail .mess:after {
content: "";
position: absolute;
right: 1rem;
bottom: 0;
width: 25%;
aspect-ratio: 1.15;
background: url("/image/cut_point.svg") no-repeat 0 0;
background-size: cover;
}


/* link /////////////////////// */
.detail .link {
display: block;
margin: 1rem 0 0 0;
}

.detail .link a {
display: block;
border: 2px #E7CFD8 solid;
background: #F9F4F6;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.detail .link p {
font-weight: bold;
color: #b86363;
line-height: 1.6rem;
margin: 1rem 0 1rem 1rem;
}

.detail .link span {
font-weight: bold;
color: #b86363;
}

.detail .link p:before {
top: 0.5rem;
border-right: 2px #b86363 solid;
border-bottom: 2px #b86363 solid;
}

.detail .link:hover a {
border: 2px #007CFD solid;
}

.detail .link:hover p,
.detail .link:hover span {
color: #007CFD;
}


/* text strong ///////////////////////*/
.detail .text strong{
text-decoration:underline !important;
}


/* voice ///////////////////////*/
.voice h4 {
margin-top: 0;
}


/* qa ///////////////////////*/
.qa {
padding: 0;
}

.qa dl {
padding: 0 0 0 0;
}

.qa dt p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
line-height: 1.6rem;
padding: 0 0 15px 40px;
}

.qa dt em {
display: inline-block;
width: 30px;
height: 30px;
font-size: 0.95rem;
line-height: 30px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: #FFF;
background: #CB9A9D;
margin: 0 10px 0 -40px;
}

.qa dt:hover em {
background: #007CFD;
}

.qa dd {
display: none;
padding: 0 0 30px 0;
}

.qa dd .text {
padding: 15px;
background: #FFF;
border: 4px #EBDBD6 solid;
}


/* exp ///////////////////////*/
.exp {
position: relative;
padding: 1rem 1rem 2rem 1rem;
background: #F9F1E7;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.exp ol li{
padding:0;
}
.exp ol li::before {
content: "";
}

.exp .text {
padding: 0 0 1rem 0;
max-width: 470px;
margin: 0 auto;
}

.exp .scroll {
max-width: 470px;
margin: 0 auto;
height: 5rem;
}

.exp .scroll p {
position: relative;
text-align: center;
width: 55%;
font-size: 1.3rem;
padding: 1rem 0 0 0;
}

.exp .scroll p:before {
position: absolute;
content: "";
width: 0.75rem;
height: 0.75rem;
border-bottom: 2px #262224 solid;
border-right: 2px #262224 solid;
top: 2rem;
left: 50%;
margin-left: -5px;
}

.exp .scroll p:before {
-webkit-animation: fadeDown 1.3s forwards infinite;
animation: fadeDown 1.3s forwards infinite;
}
@-webkit-keyframes fadeDown {
from {
-webkit-transform: translateY(0.5rem) rotate(45deg);
transform: translateY(0.5rem) rotate(45deg);
}
to {
-webkit-transform: translateY(1.5rem) rotate(45deg);
transform: translateY(1.5rem) rotate(45deg);
}
}
@keyframes fadeDown {
from {
-webkit-transform: translateY(0.5rem) rotate(45deg);
transform: translateY(0.5rem) rotate(45deg);
}
to {
-webkit-transform: translateY(1.5rem) rotate(45deg);
transform: translateY(1.5rem) rotate(45deg);
}
}

.exp .area::-webkit-scrollbar {
display: none;
}

.exp .area {
position: relative;
overflow-x: hidden;
max-width: 470px;
margin: 0 auto;
}

.exp .area .frame {
position: sticky;
top: 0;
left: 0;
width: 55%;
min-width: 120px;
height: 100%;
z-index: 1;
}

.exp .area ol {
position: absolute;
top: 0;
width: 49%;
min-width: 120px;
margin-left: 3%;
padding: 0;
border: 1px #0000FF solid;
}

.exp .area li {
padding: 0;
}

.exp .area table {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}

.exp .area th {
width: 49%;
}

.exp .area th img {
opacity: 0;
}

.exp .area td {
padding: 0 0 0 1rem;
}

.exp .area em {
text-align: left;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.1rem;
padding: 0 0 0.5rem 0;
}

.exp .area .text {
position: relative;
font-size: 0.85rem;
line-height: 1.3rem;
padding: 0 0 0 1rem;
}

.exp .area .text:before {
content: "";
width: 55px;
height: 4px;
background: #191618;
border: 4px #FFF solid;
display: block;
position: absolute;
top: 5px;
left: -50px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.exp .area .text:after {
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #191618;
border: 4px #FFF solid;
display: block;
position: absolute;
top: 0;
left: -70px;
}