@charset "utf-8";
/* 打ち消し用スタイル */
#InnerNavi_top nav.pc li{
margin:0;
}

@media screen and (max-width:768px) {
#feature #inner,
#style #inner,
#workings #inner {
padding:0;
} 
} 

/* - 下層ページスタイル - */
#Underlayer h2 {
margin:3.12rem auto 0;
}
#Underlayer h2.feature {
color: #ff5e1f;
font-size: 2.5rem;
line-height: 2.6rem;
}
#Underlayer h2.sub {
font-size: xx-large;
}
#Underlayer h2:after {
content:"";
display:block;
width:96px;
height:6px;
margin:1.75rem auto 2rem;
background-size:contain;
background-image:url("../img/h2_after.png");
}
#Underlayer h2.feature span{
font-size: x-large;
}
#Underlayer h2.feature span.catch {
font-size: large;
color:#333;
}


#workings,#style,#feature  {
background-image:linear-gradient(180deg , #FFF 0%, #fff5f1 0%);
}
.feature__case,
.workings__case {
margin:1rem auto 3rem;
display:flex;
flex-wrap:wrap;
-webkit-box-pack:justify;
justify-content: center;
}
.feature__case li.works,
.feature__case li.case,
.workings__case li.case {
width:300px;
background-color:#ff5e1f;
border-radius:20px;
text-align:center;
padding:15px 0 0;
margin:0 0.4rem;
}
.feature__case li.works:after,
.feature__case li.case:after,
.workings__case li.case:after {
content:"〉";
transform:rotate(90deg);
display:block;
}
.feature__case a,
.workings__case a {
color:#fff;
font-size: 1rem;
line-height: 1.6;
}
.feature__case a:hover,
.workings__case a:hover {opacity:0.6;}

.feature__case a:before,
.workings__case a:before {
content:"";
display:block;
margin:0 auto 10px;
background-size:contain;
}
.feature__case a:nth-child(1):before {
width:82px;
height:18px;
background-image:url("../img/feature_case1.png");
}
.feature__case a:nth-child(2):before {
width:86px;
height:18px;
background-image:url("../img/feature_case2.png");
}
.feature__case a:nth-child(3):before {
width:87px;
height:18px;
background-image:url("../img/feature_case3.png");
}
.workings__case a:nth-child(1):before {
width:112px;
height:18px;
background-image:url("../img/workings_case1.png");
}
.workings__case a:nth-child(2):before {
width:112px;
height:18px;
background-image:url("../img/workings_case2.png");
}
.workings__case a:nth-child(3):before {
width:154px;
height:18px;
background-image:url("../img/workings_case3.png");
}


#box_frame {
border-radius:20px;
padding:40px;
margin:3.12rem 0;
background-color:#fff;
position:relative;
}
.box_frame_inner {
display: flex;
width: 100%;
margin:0 !important;
padding: 0;
}
.box_frame__head {
width:108px;
padding:0 0 20px;
border-bottom:2px solid #ff5e1f;
margin-bottom:20px;
}


#feature h3{
font-size:1.6em;
margin-bottom:6.24%;
}
.text_case {
flex: 1;
margin-right: 4%;
}
.img_case {
width:40%;
}
.img_caption {
font-size: 0.875em;
line-height: 1.6;
margin: 3.12% 20%;
text-align: center;
}
.comment {
color:#ff5e1f;
display:block;
width:90%;
margin:0 auto;
}

#style h3 {
font-size:1.6em;
margin-bottom:1.75rem;
}
#style .graph {
margin:3.12% 0 0 0;
}

#workings h3 {
margin:0 0 20px 0;
padding:0;
position:relative;
}
#workings h3 span {
font-size:1.6em;
line-height:1.5;
background-color:#fff;
}

#box_type {
padding:30px;
margin-bottom:10%;
}
#box_type h3.obi {
margin: 0 0 -1.75rem 0;
}

#box_point {
border-radius: 20px;
background-color:#fff;
padding: 40px;
margin: 0 auto 40px;
width: 70%;
}
#box_point h3 {
font-size:1.6em;
}
#box_comments {
border:2px solid #ff5e1f;
border-radius:20px;
padding:30px;
margin-bottom:30px;
}
#workings h4 {
color:#ff5e1f;
text-align:center;
font-size:1.6em;
line-height:1.5;
font-weight:300;
position:relative;
padding-top:3.12%;
}
#workings h4:before {
content:"スタッフの声";
color:#fff;
background-color:#ff5e1f;
text-align:center;
font-size:medium;
border-radius:20px;
width:30%;
position:absolute;
top:-50px;
left:36%;
}
.works_image {
flex: 1;
margin:0 5% 0 0;
}
.character {
margin:0;
padding: 0;
width:50%;
}
.point_image {
width: 40%;
float: right;
margin: 0 0 30px 0;
}

.staff_face {
width:120px;
margin:3.12% 3.12% 3.12% 0;
}
#workings dl {
font-size:1.2em;
position:absolute;
top:9.36%;
left:15.6%;
}
.img_chart {
position:absolute;
top:0;
right:0;
width:420px;
}



table {
width:100%;
border:0;
margin:0 auto 4%;
border-collapse:collapse;
border-spacing:0;
}
table tr {height:2.4em;}
table td {vertical-align:top;}
table td.head {width:15.7%; font-size:0.85em; font-weight:bold;}
table td.text {width:60%;}

/* 注釈 */
.bullet { font-size:0.85em;
}
.bullet:before {
content:"※";
vertical-align:inherit;
margin:0 0.5% 0 0;
}
/* pdfリンク */
a.link_pdf:after {
content:'';
display:inline-block;
width:10%;
height:24px;
background:url('../common/icon_pdf.png');
background-size:20%;
background-repeat:no-repeat;
margin:-0.5% 0.5%;
}



/* ------ レスポンシブ用 ------ */
@media screen and (min-width:769px) {
}


@media screen and (max-width:768px) {

#Underlayer h2 {
margin:3.12% auto;
}
#Underlayer h2.feature {
font-size: 2em;
line-height: 2.6rem;
}
#Underlayer h2.sub {
font-size: x-large;
}
#Underlayer h2.feature span{
font-size: large;
}


.feature__case,
.workings__case {
margin:0 auto 3.12rem;
padding:3.12rem 6.24% 0;
}
.feature__case li.case,
.workings__case li.case {
width:324px;
margin:0 auto 6.24%;
}

.feature__case li.works,
.feature__case li.case,
.workings__case li.case {
margin:0 0 1.4rem;
}


#box_frame {
border-radius:0;
padding:30px;
}
.box_frame_inner {
display: block;
width:100%;
}
.text_case {
margin-right: 0;
}
.img_case {
width:80%;
margin:1rem auto 0;
position:inherit;
}
.img_caption {
position: inherit;
text-align: center;
margin: 1rem auto;
}
#feature .comment {
width:100%;
padding-bottom:12rem;
}
#feature .txt_fukidashi {
padding:6.24% 0;
background-image:none/*url(../../feature/img/img_fukidashi_sp.png); */;
}
#feature .txt_fukidashi:after {
content:" ";
background-image:url(../../feature/img/img_fukidashi_sp.png);
display:block;
background-size:cover;
width:100%;
height:30px;
margin-top:9.36%;
}
#feature .img_staff {
left:15.6%;
width:65%;
}
#box_frame:last-child {
margin-bottom:0;
}  

#box_point {
padding:30px;
margin:0 auto;
}
#box_comments {
border:none;
border-radius:0;
margin-bottom:12.48%;
}

#workings h4 {
text-align:left;
padding-top:15.6%;
margin-bottom:20px;
}
#workings h4:before {
width:60%;
top:0;
left:20%;
}
.works_image {
flex: none;
width: 80%;
margin:3.12% auto 0;
}
.character {
margin:0;
padding:20px 0;
width:auto;
float:none;
}

.point_image {
width: 100%;
float: none;
}
.point_txt {
width:100%;
position: inherit;
}
.staff_face {
width:auto;
margin:6.24% 15.6%;
}
#workings dl {
margin:6.24% 0;
position:inherit;
left:0;
}
.img_chart {
position:inherit;
width:auto;
margin:9.36% 0 0;
}

}