@import (once) "../../css/default.less";
@import (once) "../../css/font.less";

/* main ///////////////////////*/
main{
padding:0;
}


/* index　目次 ///////////////////////*/
.detail{
.index{

li{
padding:.5rem 0 .5rem 1rem;
border-bottom:1px @g5 solid;
}
li:last-child{
border:0;
}
li a{
.dib;
padding:.5rem 0;
width:100%;
}
li p{
padding:0 0 1rem 0;
}
li p a{
padding:.1rem 0;
}
li a:hover{
color:@focus;
.tdu;
}
li:hover::before{
background:@focus;
}

}
}


/* inine-block ///////////////////////*/
@media(max-width:@w1){
.inline-block{
.col2,
.col2-2{

dl{
.db !important;
}
dd{
.db !important;
width:auto !important;
padding:0 0 0 0 !important;
}

}
}
}


/* detail ///////////////////////*/
.detail{

.title{
padding:1rem 0;
margin:0 auto 3rem auto;
border-top:2px @pink solid;
border-bottom:2px @pink solid;

h2{
.tac;
}
}

.read{
.tac;
padding:0 0 1rem 0;

p, span{
.ffgm;
color:@wine1;
font-size:1.45rem;
line-height:2rem;
}
}

.read:after{
content:"";
.db;
width:4rem;
border-top:4px @pink solid;
margin:3rem auto;
}


h1,
h2,
h3,
h4,
h1 p,
h2 p,
h3 p,
h4 p{
.wa;
.ffgm;
line-height:2rem;
.tal;
}


h3{
border-left:4px @pink solid;
padding:.5rem .5rem .5rem 1rem;
background:@g7;
margin:4rem 0 1.5rem 0;
p{
font-size:1.3rem;
font-size:1.3rem;
}
}

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

h4{
.pr;
margin:2rem 0 1rem 0;
padding:0 0 0 1.5rem;
}
h4:before{
content:"";
.pa;
top:.5rem;
left:0;
width:1rem;
height:1rem;
border:2px @pink solid;
background:@pink5;
.r(.2rem);
}
h4:after{
content:"";
.pa;
width:1.5rem;
height:1.5rem;
top:0;
left:0;
background:url(/image/icon/check.svg) no-repeat -.4rem -5px;
background-size:2rem;
}
h4 span{
font-size:1.15rem;
}

h5{
.pr;
.dib;
padding: 0 0 .5rem 0;
margin:1rem 0;
border-bottom:2px @wine solid;
p,
span{
color:@wine1;
}
}


.image{
border:2px @g6 solid;
padding:.5rem;
margin:1rem 0;
background:#FFF;
}

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

.screen{
max-width:280px;
margin:1rem auto;
border:4px @g6 solid;
.r(1rem);
img{
.r(.75rem);
}
}

ul{
padding:0 0 0 1.3rem;
}
li{
padding:0 0 .5rem 1rem;
line-height:1.5rem;
}
li:before{
content:"";
.dib;
.vam;
width:.3rem;
height:.3rem;
margin:0 .5rem 0 -1rem;
background:@text;
}

.table{
table{
width:100%;
border:2px @g5 solid;
}
td, th{
padding:.5rem;
border:1px @g5 solid;
font-size:.9rem;
line-height:1.3rem;
}
th{
.tac;
.bold;
background:@pink6;
}
td:nth-child(1){
background:@c1;
}
}

.box{
margin:1rem 0 0 0;
padding:1rem;
border:2px @wine5 solid;
background:@wine7;
line-height:1.5rem;
}

.box{
ul{
padding:0 0 0 .3rem;
}
}

.mess{
.pr;
margin:2rem 0 0 0;
padding:1rem;
border:4px @g4 dotted;
background:@g7;
line-height:1.5rem;
.r(.5rem);

.text{
width:70%;
color:@wine1;
}
}

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


.link{
.db;
margin:1rem 0 0 0;
}
.link a{
.db;
border: 2px @pink5 solid;
background:@pink7;
.r(.5rem);
}
.link p{
.bold;
color:@wine1;
line-height:1.6rem;
margin:1rem 0 1rem 1rem;
}
.link span{
.bold;
color:@wine1;
}
.link p:before{
top:.5rem;
border-right:2px @wine1 solid;
border-bottom:2px @wine1 solid;
}
.link:hover a{
border: 2px @focus solid;
}
.link:hover p,
.link:hover span{
color:@focus;
}

}



/* voice ///////////////////////*/
.voice{

h4{
margin-top:0;
}
}



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

dl{
padding:0 0 0 0;
}

dt p{
.ffgm;
line-height:1.6rem;
padding:0 0 15px 40px;
}

dt em{
.dib;
width:30px;
height:30px;
font-size:.95rem;
line-height:30px;
.r(50%);
.tac;
color:#FFF;
background:@pink;
margin:0 10px 0 -40px;
}

dt:hover em{
background:@focus;
}

dd{
.dn;
padding:0 0 30px 0;
}

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

}


/* exp ///////////////////////*/
.exp{
.pr;
padding:1rem 1rem 2rem 1rem;
background:@bg1;
.r(.5rem);

.text{
padding:0 0 1rem 0;
max-width:@w1;
.center;
}

.scroll{
max-width:@w1;
.center;
height:5rem;
}

.scroll p{
.pr;
.tac;
width:55%;
font-size:1.3rem;
padding:1rem 0 0 0;
}

.scroll p:before{
.pa;
content:"";
width:.75rem;
height:.75rem;
border-bottom:2px @g2 solid;
border-right:2px @g2  solid;
top:2rem;
left:50%;
margin-left:-5px;
}

.scroll p:before{
animation: fadeDown 1.3s forwards infinite;
}

@keyframes fadeDown{
from {
transform: translateY(.5rem)  rotate(45deg);
}
to {
transform:translateY(1.5rem) rotate(45deg);
}
}

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

.area{
.pr;
.oxh;
max-width:@w1;
.center;

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

ol{
.pa;
top:0;
width:49%;
min-width:120px;
margin-left:3%;
padding:0;
.bs;
}
li{
padding:0;
}

table{
.pa;
top:0;
left:0;
z-index:2;
width:100%;
}
th{
width:49%;
img{
opacity:0;
}
}
td{
padding:0 0 0 1rem;
}

em{
.tal;
.ffgm;
font-size:1.1rem;
padding:0 0 .5rem 0;
}

.text{
.pr;
font-size:.85rem;
line-height:1.3rem;
padding:0 0 0 1rem;
}

.text:before{
content:"";
width:70px;
height:10px;
background:@g1;
border:4px #FFF solid;
.db;
.pa;
top:5px;
left:-55px;
.r(10px)
}
.text:after{
content:"";
width:16px;
height:16px;
.r(50%);
background:@g1;
border:4px #FFF solid;
.db;
.pa;
top:0;
left:-70px;
}

}

}