@charset "utf-8";
/* CSS Document */

/* sm list_charm */
#list_charm{
position: relative;
margin-top: -50px;/*マイナスマージンで調整*/
padding: 50px 0;
border-radius: 0 0 0 50px;
}

#list_charm h3{
margin-bottom: 20px;
font-size: 2.0rem;
}

#list_charm h3 span{
background:linear-gradient(transparent 80%, rgba(255,240,30,1.0) 80%);
padding-bottom: 10px;
}

#list_charm .charm_contents{
margin-bottom: 40px;
padding: 30px 0;
border-radius: 20px 0 0 0;
}

#list_charm .charm_contents:last-of-type{
margin-bottom: 0;
}

#list_charm .charm_contents .inner{
width: 90%;
margin: 0 auto;
}

#list_charm .charm_photo{
margin-bottom: 70px;
text-align: center;
}

#list_charm .charm_photo img{
border-radius: 0 0 20px 0;
}

#list_charm .charm_contents li{
position: relative;
margin-bottom: 70px;
padding-top:15px;;
border-top: 1px solid rgba(0,63,146,1.0);
}

#list_charm .charm_contents li:last-child{
margin-bottom: 0px;
}

#list_charm .charm_contents li :after{
content: "";
display: inline-block;
position: absolute;
top: -50px;
left: 0;
width: 50px;
height: 50px;
background: url("../img/icon_hand.svg")center center/cover no-repeat;
}

#list_charm .charm_contents h4{
display: inline-block;
font-size: 1.8rem;
margin-bottom: 15px;
padding: 5px 5px 2px 5px;
background-color: rgba(255,240,30,1.0);
line-height: 1.4;
}

#list_charm .charm_contents li p{
overflow-wrap: break-word; 
}

/* md list_charm */
@media screen and (min-width:768px) {
#list_charm .charm_photo img{
width: 60%;
}
}


/* lg list_charm */
@media screen and (min-width:1024px) {
#list_charm{
margin-top: -100px;/*マイナスマージンで調整*/
padding: 100px 0;
border-radius: 0 0 0 200px;
}

#list_charm h3{
margin-bottom: 30px;
font-size: 3.0rem;
text-align: center;
}

#list_charm h3 span{
padding-bottom: 15px;
}

#list_charm .charm_contents{
margin-bottom: 50px;
padding: 40px 0;
border-radius: 40px 0 0 0;
}

#list_charm .charm_photo{
margin: 0 auto 30px;
}

#list_charm .charm_photo img{
border-radius: 0 0 40px 0;
}

#list_charm .charm_contents li{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 70px;
padding: 30px 20px 0;
border-top: 2px solid rgba(0,63,146,1.0);
border-left: 2px solid rgba(0,63,146,1.0);
border-radius: 40px 0 0 0;
}

#list_charm .charm_contents li :after{
left: 30px;
}

#list_charm .charm_contents h4{
width: 35%;
font-size: 2.0rem;
margin-bottom: 0;/*smmdでのデザインを解除*/
padding: 10px 10px 8px 12px;
box-sizing: border-box;
}

#list_charm .charm_titleonly{
width: 100% !important;
}

#list_charm .charm_text{
width: 63%;
}

#list_charm .charm_textonly{
width: 100%;
}
}


/* sm list_company */
#list_company{
padding-top: 50px;
text-align: center;
}

#list_company dl{
padding-top: 20px; 
text-align: left;
}

#list_company dl dt{
font-weight: bold;
}

#list_company dl dd{
padding-bottom: 15px;
border-bottom: 1px solid rgba(220,220,220,1.0);
line-height: 1.4;
}

#list_company dl dd:not(:last-child){
margin-bottom: 20px;
}


/* md list_company */
@media screen and (min-width:768px) {
#list_company dl{
display: flex;
flex-wrap: wrap;
width: 100%;
}

#list_company dl dt{
width: 20%;
padding-bottom: 15px;
border-bottom: 1px solid rgba(230,230,230,1.0);
}

#list_company dl dd{
width: 80%;
}

#list_company dl dt:not(:last-of-type),
#list_company dl dd:not(:last-child){
margin-bottom: 30px;
}
}


/* md list_company */
@media screen and (min-width:1024px) {
#list_company{
padding-top: 100px;
}

#list_company dl{
max-width: 768px;
margin: 0 auto;
padding-top: 50px; 
}
}