@charset "shift-jis";
/* --------------------------------------------------
* Service Article
* --------------------------------------------------
*/
/* ----------
article : header
----------
*/
#article_header {
background-repeat: no-repeat;
background-size: cover;
}
#article_header_container {
}
/* title */
#article_header .ttl {
}
#article_header .lead {
padding-top: 8px;
font-size: 115%;
line-height: 1.75;
}
/* links */
#article_header .links {
left: 100px;
bottom: 74px;
width: 569px;
}
#article_header .links ul {
margin-left: -40px;
}
#article_header .links li {
margin-left: 40px;
}
#article_header .links li a {
width: 163px;
height: 163px;
background-size: 163px auto;
}
#article_header .links.x4 {
left: 28px;
bottom: 74px;
width: 712px;
}
#article_header .links.x4 ul {
margin-left: -20px;
}
#article_header .links.x4 li {
margin-left: 20px;
}
/* ----------
article : lead
----------
*/
#article_lead {
padding: 70px 0;
}
#article_lead .lead {
font-size: 172%;
letter-spacing: -0.04em;
}
#article_lead .img {
width: 688px;
margin: 0 auto;
}
#article_lead .txt {
padding-top: 15px;
font-size: 100%;
line-height: 2;
letter-spacing: -0.03em;
}
/* ----------
section
----------
*/
.section {
}
/* section : header */
/* section : container */
.section_container {
width: 576px;
}
/* box : column */
.box_column {}
.box_column .column_left {}
.box_column .column_right {}
.box_column dl {
padding-top: 30px;
}
.box_column dl.first {}
.box_column dt {
font-size: 129%;
}
.box_column dd {
padding-top: 5px;
font-size: 100%;
line-height: 1.7;
}
/* box : chapter */
.box_chapter {
margin-top: 40px;
}
.box_chapter dl {
padding-top: 20px;
}
.box_chapter dl.first {}
.box_chapter dd {
padding-top: 5px;
line-height: 1.7;
}
/* box : list */
.box_list {
margin-top: 40px;
}
.box_list ul {
}
.box_list ul li {
padding-top: 3px;
padding-left: 1em;
text-indent: -1em;
font-size: 93%;
}
/* box : image */
.box_image {
margin-top: 40px;
}
.box_image dl {}
.box_image dt {
font-size: 115%;
}
.box_image dd {
padding-top: 5px;
}
/* box : feature */
.box_feature {
margin-top: 40px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.box_feature.first {
margin-top: 0;
}
.box_feature.green {
background-image: none;
border: 1px solid #58ac2a;
}
.box_feature.blue {
background-image: none;
border: 1px solid #2c9cca;
}
.box_feature.orange {
background-image: none;
border: 1px solid #ea9127;
}
.box_feature.yellow {
background-image: none;
border: 1px solid #d6af00;
}
.box_feature_inner {
padding: 40px;
}
.green .box_feature_inner { background-image: none; }
.blue .box_feature_inner { background-image: none; }
.orange .box_feature_inner { background-image: none; }
.yellow .box_feature_inner { background-image: none; }
.box_feature .ttl {
padding-bottom: 10px;
}
.box_feature .ttl span {
padding-left: 28px;
background-size: 22px auto;
font-size: 129%;
letter-spacing: -0.02em;
}
.box_feature dl {
padding-top: 20px;
}
.box_feature dl.first {
padding-top: 23px;
}
.box_feature dt {
font-size: 100%;
font-weight: bold;
color: #2c9cca;
}
.box_feature dd {
}
.box_feature dd ul {
padding-top: 3px;
}
.box_feature dd li {
padding-left: 1.3em;
text-indent: -1.3em;
font-size: 93%;
line-height: 1.5;
}
.box_feature p {
padding-top: 20px;
font-size: 93%;
line-height: 1.5;
}
/* box : case */
.box_case {
margin-top: 40px;
}
.box_case .item dt {
height: 22px;
padding-top: 6px;
padding-left: 108px;
background-size: 100px auto;
font-size: 108%;
line-height: 1.2;
}
.box_case .item dt.case00 {
background-image: url(../img/service/service_case00_m.png);
}
.box_case .item dt.case01 {
background-image: url(../img/service/service_case01_m.png);
}
.box_case .item dt.case02 {
background-image: url(../img/service/service_case02_m.png);
}
.box_case .item dt span {
font-size: 81%;
}
.box_case .item dd.img {
padding-top: 16px;
}
.box_case .item dd.txt {
padding-top: 16px;
font-size: 100%;
}
/* box : result */
.box_result {
margin-top: 40px;
}
.box_result p {
padding: 50px 0;
font-size: 129%;
line-height: 1.4;
}
.box_result dl {
padding: 30px 40px;
}
.box_result dt {
font-size: 129%;
}
.box_result dd {
padding-top: 6px;
font-size: 100%;
}
/* ----------
solution
----------
*/
.solution {
padding: 40px 0;
}
/* solution : header */
.solution_header {
width: 688px;
background-color: #228ad9;
background-image: none;
border-radius: 9px 9px 0 0;
-moz-border-radius: 9px 9px 0 0;
-webkit-border-radius: 9px 9px 0 0;
}
.solution_header .solution_inner {
padding: 40px 56px;
background-color: #fff;
background-image: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.solution_header .ttl {
padding-left: 28px;
background-size: 22px auto;
font-size: 129%;
letter-spacing: -0.02em;
}
/* list */
.solution_header .list {
margin-top: 10px;
}
.solution_header .list li {
padding: 8px 0;
padding-left: 3px;
font-size: 93%;
}
/* case*/
.solution_header .case {
margin-top: 14px;
background-image: none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.solution_header .case dl {
padding: 12px;
background-image: none;
}
.solution_header .case dt {
font-size: 93%;
}
.solution_header .case dd {
font-size: 93%;
}
/* solution : opener */
.solution_opener {
width: 688px;
background-image: none;
border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
}
.solution_opener .solution_inner {
padding: 0 56px;
}
.solution_opener .solution_inner a {
padding: 20px 0;
padding-left: 28px;
background-size: 22px auto;
font-size: 129%;
letter-spacing: -0.02em;
}
.solution_opener .solution_inner a span {
padding-right: 50px;
background-size: 15px auto;
}
/* focus */
.solution_opener.focus {
background-image: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.solution_opener.focus .solution_inner a span {
display: block;
background-image: url(../img/icon/up_l_wht.png);
}
/* solution : container */
.solution_container {
width: 688px;
background-color: #fff;
background-image: none;
border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
}
.solution_container .solution_inner {
padding: 40px 56px 70px 56px;
}
/* title */
.solution_container .ttl {
font-size: 172%;
}
/* resolve */
.solution_container .resolve {
margin-top: 36px;
}
.solution_container .resolve dt {
font-size: 93%;
}
.solution_container .resolve dd {
}
.solution_container .resolve dd ul {
margin-top: 10px;
}
.solution_container .resolve dd li {
padding: 8px 0;
padding-left: 3px;
font-size: 93%;
}
/* img */
.solution_container .img_label {
margin-top: 20px;
}
.solution_container .img {
margin-top: 24px;
}
.solution_container .img.p {
display: none;
}
.solution_container .img.m {
display: block;
}
/* result */
.solution_container .result {
margin-top: 48px;
padding: 4px;
border: 1px solid #52aba0;
}
.solution_container .result p {
padding: 45px 0;
font-size: 129%;
line-height: 1.45;
}
/* close */
.solution_container .close {
margin-top: 40px;
}
.solution_container .close a {
display: block;
width: 346px;
margin: 0 auto;
padding: 0 20px;
background-color: #232323;
border-bottom: 1px solid #000;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font-size: 115%;
color: #fff;
text-decoration: none;
text-align: center;
}
.solution_container .close a span {
display: block;
height: 37px;
padding-top: 12px;
background-image: url(../img/icon/up_l_wht.png);
background-repeat: no-repeat;
background-position: right;
background-size: 14px auto;
}
/* ----------
article : footer
----------
*/
#article_footer {}
/* service case */
#service_case {
height: 300px;
}
#service_case_container {
width: 688px;
}
#service_case .ttl {
padding-top: 48px;
font-size: 172%;
}
/* link */
#service_case .link {
position: absolute;
right: 0;
top: 40px;
}
#service_case .link a {
width: 276px;
height: 37px;
padding: 0 14px;
padding-top: 11px;
border-bottom: 2px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 129%;
}
#service_case .link a span {
padding-left: 0;
background-size: 16px auto;
text-align: center;
}
/* content */
#service_case .content {
margin-top: 30px;
background-size: 210px auto;
}
#service_case .content#service_case_livinggallery {
background-image: url(../img/service/case_img_livinggallery_m.jpg);
}
#service_case .content#service_case_suntoryfoods {
background-image: url(../img/service/case_img_suntoryfoods_m.jpg);
}
#service_case .content#service_case_cloudpoint {
background-image: url(../img/service/case_img_cloudpoint_m.jpg);
}
#service_case .content a {
height: 140px;
padding-left: 230px;
background-position: 650px;
background-size: 20px auto;
}
#service_case .content .name {
position: relative;
padding-top: 15px;
font-size: 93%;
}
#service_case .content .service {
position: absolute;
left: 230px;
bottom: 15px;
}
#service_case .content .service dt {
font-size: 115%;
}
#service_case .content .service dd {
padding-top: 4px;
font-size: 100%;
line-height: 1.45;
}
/* section : inquiry */
#inquiry {}
#inquiry_container {
}
/* inquiry : footer */
#inquiry_footer {
border: none;
border-top: 1px solid #d4d3d3;
}
#inquiry_footer a {
display: table;
width: 668px;
margin: 0 auto;
height: auto;
padding-top: 0;
font-size: 122%;
letter-spacing: -0.04em;
}
#inquiry_footer span {
display: table-cell;
width: auto;
height: 120px;
margin: 0;
padding-top: 0;
background-image: url(../img/service/icon_download_m.png);
background-size: 74px auto;
vertical-align: middle;
}