@charset "utf-8";

/*---------------------------------------------

modal

---------------------------------------------*/

/*---------------------------------------------
pc 1024px-
---------------------------------------------*/
.popupModal > input { display: none; }
.popupModal > input:nth-child(1) + label { cursor: pointer; }
.popupModal > input:nth-child(1) + label i { font-size:93%; padding-right:2px; color:#666; }
.modalPopup_window { display: none; }
.modalPopup_cont { overflow-y:scroll; padding:0; }

/*--- close ---*/
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label:hover { cursor:pointer; }

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
color: #1a1a1a;
display: inline-block;
display: block;
height: 39px;
line-height: 29px;
letter-spacing: normal;
padding: 5px;
position: fixed;
right:10px;
top: 10px;
text-align: center;
text-decoration: none;
vertical-align:bottom;
width: 80px;
z-index:300003;
}

/* ラジオ１ チェックでポップアップ表示 */
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window {
display: block;
position: fixed;
width: 100%;
height: 100%;
border-radius: 0;
left: 0;
top: 0;
/*left: 50%;*/
/*top: 50%;*/
/*-webkit-transform: translate(-50%,-50%);*/
/*-ms-transform: translate(-50%,-50%);*/
/*transform: translate(-50%,-50%);*/
/*padding:20px 10px 10px 20px;*/
overflow: hidden;
z-index:300002;
}

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window > div {
color:#1a1a1a;
/*overflow:auto;*/
-webkit-overflow-scrolling:touch;
display: inline-block;
width: 100%;
height: 100%;
}

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window > div.modalPopup_cont {
padding:0;
position:relative;
border-radius:0;
background-color:#fff;
/*border-style:solid;*/
/*border-width:1px;*/
/*border-bottom: 1px solid #e6e6e6;*/
/*border-radius: 4px;*/
/*border-color: rgba(0, 0, 0, 0.1);*/
font-size:100%;
/*font-weight:700;*/
padding: 0;
text-align:center;
}

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window div.modalMain {
padding:0;
}

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window > div > iframe {
width: 100%;
height:100%;
border:none;
display:block;
}

/* ポップアップの中の要素 */
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window > div > img {
max-width: 100%;
}

.serviceList {}
.serviceList h3 {
/*background-color: #fff3ad;*/
background-color: #eee;
position: relative;
padding: 20px;
font-size:116%;
font-weight:600;
}
.serviceList h3:before {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: 0;
right: 0;
bottom: -15px;
margin: 0 auto;
/*border-top: 15px solid #fff3ad;*/
border-top: 15px solid #eee;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}

.serviceList h3:first-child { margin-top:0; }
.serviceList h3 a { color:#333; font-size:124%; font-weight:600; text-decoration:none; }
.serviceList ol { padding:20px 0; }
.serviceList ol li { border-bottom:1px solid #ccc; width:100%; }
.serviceList ol li:first-child { border-top:1px solid #ccc; }
.serviceList ol li a { background-image:url(../img/common/i_ar_link.png); background-position: 98% center; background-repeat: no-repeat; background-size: 6px 10px; display:block; text-align:left; text-decoration:none; padding:20px 10px; }
.serviceList ol li a dl { letter-spacing:-.40em; display:table; table-layout:fixed; }
.serviceList ol li a dl dt { display:table-cell; letter-spacing:normal; text-align:center; vertical-align:middle; width:10%; min-width:60px; min-height:60px; }
.serviceList ol li a dl dt img { width:100%; height:auto; border-radius:50%; }
.serviceList ol li a dl dd { color:#333; display:table-cell; letter-spacing:normal; text-align:left; vertical-align:middle; padding:0 0 0 10px; width:90%; font-size:116%; font-weight:600; }

.serviceList ol.solution { letter-spacing:-.40em; margin-top:30px; padding:0; }
.serviceList ol.solution li { border:none; display:inline-block; letter-spacing:normal; vertical-align:top; margin:0 1% 10px; width:32.3%; float:none; }
.serviceList ol.solution li:nth-child(2),
.serviceList ol.solution li:nth-child(5) { width:29.4%; }
.serviceList ol.solution li a { background-image:none; text-align:center; padding:0; }
.serviceList ol.solution li a dl { border-radius:50%; display:block; padding:0; width:auto; }
.serviceList ol.solution li a dl dt { border-radius:50%; display:inline-block; padding:0; width:80px; height:auto; text-align:center; position:relative; }
.serviceList ol.solution li a dl dt img { border-radius:50%; width:100%; height:auto; }
.serviceList ol.solution li a dl dd { color:#333; display:inline-block; font-size:100%; font-weight:600; line-height:1.4; margin-top:0; padding:10px 10px 20px; vertical-align:middle; text-align:center; }

.serviceList ol.solution li:first-child a dl dt:before {
background-image:url(../img/common/ico_ki.png);
background-position:center center;
background-repeat:no-repeat;
background-size:36px 36px;
content:" ";
position:absolute;
width:36px;
height:36px;
right:-12px;
bottom:-6px;
}

.serviceList ol.solution li:nth-child(2) a dl dt:before {
background-image:url(../img/common/ico_sp.png);
background-position:center center;
background-repeat:no-repeat;
background-size:36px 36px;
content:" ";
position:absolute;
width:36px;
height:36px;
right:-12px;
bottom:-6px;
}

.serviceList ol.solution li:nth-child(4) a dl dt:before {
background-image:url(../img/common/ico_ds.png);
background-position:center center;
background-repeat:no-repeat;
background-size:36px 36px;
content:" ";
position:absolute;
width:36px;
height:36px;
right:-12px;
bottom:-6px;
}

/*
.serviceList ol.solution li:nth-child(4) a dl dt:before {
background-image:url(../img/common/ico_day.png);
background-position:center center;
background-repeat:no-repeat;
background-size:36px 36px;
content:" ";
position:absolute;
width:36px;
height:36px;
right:-12px;
bottom:-6px;
}
*/

.serviceList ol.solution li:nth-child(5) a dl dt:before {
background-image:url(../img/common/ico_demand.png);
background-position:center center;
background-repeat:no-repeat;
background-size:36px 36px;
content:" ";
position:absolute;
width:36px;
height:36px;
right:-12px;
bottom:-6px;
}

.serviceList ol.solution li:nth-child(6) a dl dt:before {
background-image:url(../img/common/ico_truck.png);
background-position:center center;
background-repeat:no-repeat;
background-size:36px 36px;
content:" ";
position:absolute;
width:36px;
height:36px;
right:-12px;
bottom:-6px;
}


/* ラジオ１ 以外のラベルを初期は非表示 */
.popupModal > input:nth-child(1) + label ~ label {
display: none;
}
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.70);
display: block;
position: fixed;
left: 0;
top: 0;
text-indent: -999999px;
z-index:300001;
}

/*--- close ---*/
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label:hover { cursor:pointer; }

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
color: #1a1a1a;
display: inline-block;
display: block;
font-size:85%;
height: 39px;
line-height: 29px;
letter-spacing: normal;
padding: 5px;
position: fixed;
right:10px;
top: 10px;
text-align: center;
text-decoration: none;
vertical-align:bottom;
width: 80px;
z-index:300003;
}

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label:hover { cursor:pointer; }

.modalPopup_window {
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
padding-bottom:0;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

input::before,
input+label::before,
input::after,
input label::after,
label::before,
input::before { /*display:none;*/ }

input+label { display:block; font-size:100%; }

/*--- modal_title ---*/
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window .modal_title { 
letter-spacing:-.40em;
overflow:hidden;
height:auto;
text-align:left;
padding: 13px 20px;
width: 100%;
min-width: 100%;
}
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window .modal_title h2 { display:inline-block; text-align:left; letter-spacing:normal; font-size:167%; font-weight:700; vertical-align:top; padding:0; }
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window .modal_title ul { display:inline-block; text-align:right; vertical-align:top; }
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window .modal_title ul li { display:inline-block; text-align:left; letter-spacing:normal; vertical-align:middle; margin-left:10px; }
.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window .modal_title ul li a { display:block; }

.linkBtn {
padding:0 10px 20px;
}
.linkBtn ul {
border:1px solid #ccc;
border-radius:5px;
text-align:center;
}
.linkBtn ul li:first-child {
border-radius:5px 5px 0 0;
}
.linkBtn ul li:last-child {
border-radius:0 0 5px 5px;
}

.linkBtn ul li a {
background-image:url(../img/common/i_ar_link.png);
background-position: 98% center;
background-repeat: no-repeat;
background-size: 6px 10px; 
background-color: #fff;
border-top:1px solid #ccc;
border-radius:5px 5px 5px 5px;
color: #1a1a1a;
display: block;
font-size:116%;
font-weight:400;
letter-spacing: normal;
padding: 10px;
text-align: center;
text-decoration: none;
vertical-align:bottom;
}

.linkBtn ul li:first-child a {
border-radius:5px 5px 0 0;
border-top:none;
}
.linkBtn ul li:last-child a {
border-radius:0 0 5px 5px;
}

.linkBtn ul li:first-child:last-child a {
border-radius:5px 5px 5px 5px;
}

.linkBtn.group { border-top:1px solid #ccc; padding:20px 10px 30px; }

.modal-close i { padding-right:3px; }

/*--------------------------------------------------
tablet 768-1024px
----------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1024px) {

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup_window {
/*max-width: 560px;*/
height: 100%;
width:100%;
/*padding:20px 20px;*/
padding:0;
}

.popupModal > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
/*left: 50% !important;*/
/*top: 50% !important;*/
/*margin-left: 190px !important;*/
/*margin-top: -260px !important;*/
vertical-align:bottom;
}

.serviceList ol li a dl dd { font-size:116%; font-weight:600; text-align:left; padding:0 0 0 10px; }
.serviceList ol.solution li:first-child a dl dt:before,
.serviceList ol.solution li:nth-child(2) a dl dt:before,
.serviceList ol.solution li:nth-child(3) a dl dt:before,
.serviceList ol.solution li:nth-child(4) a dl dt:before,
.serviceList ol.solution li:nth-child(5) a dl dt:before,
.serviceList ol.solution li:nth-child(6) a dl dt:before { background-size:72px 72px; width:72px; height:72px; right:-24px; bottom:-12px; }
.serviceList ol.solution li a dl dt { width:160px; }
.serviceList ol.solution li a dl dd { font-size:124%; margin-top: 10px; }


}

/*---------------------------------------------
sp -768px
---------------------------------------------*/
@media screen and (max-width:767px){

.serviceList ol.solution li { width:48%; }
.serviceList ol.solution li:nth-child(2),
.serviceList ol.solution li:nth-child(5) { width:48%; }
.serviceList ol.solution li a dl dd { padding:10px 0; }

}