@charset "utf-8";
/*!
 * Smartphone Theme
 */


/*===============================================
 Frame Design
===============================================*/
.pc{display: none!important;}
.sp{display: block!important;}
.flexBox { display: block; margin-bottom: 0;}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { width: 100%; }
.docs{ width: 100%;}
.docsfr{ width: 100%; padding: 20px 20px ;}
.outlineTxt{ font-size: 14px; }

/*===============================================
 header
===============================================*/
header{border-bottom: 1px solid #ccc; min-height: 70px; }
/*===============================================
 nav
===============================================*/
#hanburger { display: none;}
.spContact{
  display: block; position: absolute;
  right: 70px; top: 12px; width: 42px;
  text-align: center;
}
.spContact a{display: block; color: #c62a1c; text-decoration: none; padding-top: 4px;}
.spContact i{ font-size: 32px; line-height: 100%;}
.spContact span{ display: block;color: #c62a1c; font-size: 10px; font-weight: bold; line-height: 100%;margin-top: -3px;}
/*---------------------menu button*/
.navToggle {
  display: block; position: absolute;
  right: 20px; top: 12px; width: 42px; height: 51px;
  cursor: pointer; z-index: 99999; text-align: center;
}
.navToggle span {
  display: block; position: absolute;
  width: 30px; border-bottom: solid 3px #c62a1c;
  transition: .35s ease-in-out; left: 6px;
}
.navToggle span:nth-child(1) { top: 9px; }
.navToggle span:nth-child(2) { top: 18px; }
.navToggle span:nth-child(3) { top: 27px; }
.navToggle span:nth-child(4) {
  border: none; color: #c62a1c;
  font-size: 10px; font-weight: bold; top: 27px;
}
#hanburger:checked + .navToggle span:nth-child(1) {
  top: 18px; left: 6px; transform: rotate(-45deg); border-bottom: solid 3px #fff;
}
#hanburger:checked + .navToggle span:nth-child(2),
#hanburger:checked + .navToggle span:nth-child(3) {
  top: 18px; transform: rotate(45deg); border-bottom: solid 3px #fff;
}
#hanburger:checked + .navToggle span:nth-child(4){color: #fff;}


/*---------------------/menu button*/

.globalMenu {
  display: block; visibility: hidden;
  width: 100vw; height: 100%; position: fixed;
  top: 0; left: 0; padding: 0; color: #fff;
  background: #c62a1c; overflow-y:  scroll;
  text-align: left; z-index: 99;
}

.globalMenu li{ margin-bottom: 20px;}
.globalMenu li:first-child{margin-top: 70px;}
#hanburger:checked ~ .globalMenu { visibility: visible;}

.globalMenu a { display: block; color: #fff; padding: 5px 20px; font-size: 18px;}
.globalMenu a:hover { opacity: .8; background: #b0261a;}
.childMenu{display: none;}
.globalMenu > .menu > a::before { content: none;}
.spCallcenter{display: block; text-align: center;}
.spCallcenter .phoneNum a{font-size: 30px!important;}
.userlogin{display: none;}
.spUserlogin{display: block;}
.globalMenu .doc{display: block;}
/*===============================================
 footerMenu
===============================================*/
#footerMenu .footerLogo{ margin-bottom: 40px;}

/*===============================================
 footer
===============================================*/
footer .copyRight{ text-align: center;}
footer .seal{ justify-content: center;}
#footerMenu .linkList{ margin-bottom: 30px;}
/*===============================================
 pagetop
===============================================*/
/*#pagetop{ display: none;}*/

/*===============================================
 ttl
===============================================*/
h2.ttl{ font-size: 36px; margin-bottom: 40px;}
h2.copy{ font-size: 28px; margin-bottom: 30px;}
/*===============================================
 table
===============================================*/
.tbsThLeft th{ display: block; border-bottom: none; padding:5px 10px; text-align: left; width: 100%;}
.tbsThLeft td{ display: block; border-bottom: 1px solid #242424; padding: 10px 10px 15px 10px; width: 100%;}
/*----------*/
.tbsBasic th{ display: block; padding:7px 10px; border-bottom: none; width: 100%;}
.tbsBasic td{ display: block; padding:7px 10px; width: 100%;}
.tbsBasic tr.mdTop{display: none;}
/*----------*/
.tbsDotted th{ display: block; padding: 10px 10px 5px 10px; border-bottom: none; width: 100%;}
.tbsDotted td{ display: block; padding: 5px 10px 15px 10px; width: 100%;}
/*----------*/
.intoTb{ display: block;}
.intoTb dt{ width: 100%; padding: 0;}
.intoTb dd{ width: 100%; padding: 0; margin-bottom: 10px;}
table.th300 th{width: auto;}
table.th200 th{width: auto;}
table .w200{width: auto;}
.scrollTable{
  position: relative;
  overflow: auto;
  white-space: nowrap;
  border: solid 1px #ccc;
}
.spScroll{ display: block;}
/*----------*/
.tbsContact th{ display: block; padding: 15px 10px 0px 10px; width: 100%;}
.tbsContact td{ display: block; padding: 10px 10px 15px 10px; width: 100%;}

/*===============================================
 list
===============================================*/


/*===============================================
 button
===============================================*/
.btnSet{ justify-content: space-between; width: 80%; padding: 10px 0 0 0;}
.btnSet li{ margin-left:0; padding-bottom:10px; width: 49%;}
.btnSet li:first-child{ margin-left:0;}



/*########################################################################
 top contents
########################################################################*/
/*===============================================
 mainVisual
===============================================*/
#mainVisual .visualInner{ height: 442px;}
#mainVisual .visualInner .mainCopy{ width: 90%;}
#mainVisual .visualInner .obj01 img{ right: -320px; opacity: .6; width: 800px;}
#mainVisual .visualInner .mainCopy h3{ font-size: 18px;}
#mainVisual .visualInner .mainCopy h1{ font-size: 58px;}
#mainVisual .visualInner .mainCopy h1 span{ font-size: 40px;}

/*===============================================
 apply
===============================================*/
.applySet.w480{width: 100%!important;}

/*===============================================
 topIssue
===============================================*/
#topIssue h2{font-size: 30px;}
#topIssue li{font-size: 20px;}
/*===============================================
 topFeatures
===============================================*/
#topFeatures h2{ font-size: 30px;}
#topFeatures dl{ display: block;}
#topFeatures dt .imgBox{ width: 100%;}
#topFeatures dd{ margin-left: 0;}

/*===============================================
 topService
===============================================*/
.servieLineup{ margin-bottom: 40px;}
.servieLineup .sentence h3{ font-size: 18px; }
.servieLineup .sentence h2{ font-size: 36px; }

/*===============================================
 topAbout
===============================================*/
#topAbout .sentence h2{font-size: 30px; }
#topAbout .sentence h4{font-size: 20px;}
#topAbout .sentence{ margin-bottom: 20px;}
#topAbout .license{ border: none;}
#topAbout .license .seal{margin-left: 0;}
#topAbout .license p{ margin-left: 0;}

/*===============================================
 contacts
===============================================*/
#contacts .contactsBox .contactsList{ display: block;}
#contacts .contactsBox .contactsList li{ width: 100%; margin-bottom: 40px;}
#contacts .contactsBox .contactsList li:nth-child(1)::after,
#contacts .contactsBox .contactsList li:nth-child(2)::after{ content: none;}
#contacts .contactsBox .contactsList li:nth-child(3){margin-bottom: 0;}
#contacts .contactsBox .callcenter p.tel a{ color: #242424; text-decoration: none;}



/*########################################################################
 under contents
########################################################################*/
/*===============================================
 under common
===============================================*/
.checkList li{font-size: 18px;}
.scrollTable{ position: relative; overflow: auto; white-space: nowrap; border: solid 1px #ccc;}
.spScroll{ display: block; text-align: right;}
.spScroll span{ background-color: #333; color: #fff;
  font-size: 12px; padding: 5px 0 5px 10px; border-radius: 5px 5px 0 0;
}
.spScroll span::after{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 12px 0 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
/*===============================================
 pageVisual
===============================================*/
#pageVisual .visualInner{ height: 320px;}
#pageVisual .visualInner .mainCopy{ width: 90%;}
#pageVisual .visualInner .obj01 img{ right: -400px; opacity: .6; width: 800px;}
#pageVisual .visualInner .mainCopy h1{ font-size: 48px; margin: 0 0 10px 0;}
#pageVisual .visualInner .mainCopy h3{ font-size: 18px; margin: 0 0 20px 0;}
#pageVisual .visualInner .mainCopy h1 span{ font-size: 20px;}
/*------*/
#plainVisual .visualInner{ height: 120px;}
#plainVisual .visualInner .mainCopy h1{ font-size: 38px;}
/*===============================================
 breadcrumbs
===============================================*/

/*===============================================
 topicBox
===============================================*/
.topicBox{ margin-bottom: 40px;}

/*===============================================
 usageFlow
===============================================*/

/*===============================================
 msp plan table
===============================================*/
.tbsMspPlan td.vertical {writing-mode: horizontal-tb;}
/*===============================================
 aws top
===============================================*/
.awsMenuBox{ margin-bottom: 40px;}
.awsMenuBox .sentence .btDetail{ width: 70%;}
.awsList{ display: block;}
.awsList li{ margin-bottom: 20px; width: 100%;}
/*===============================================
  services option list
===============================================*/
.optionList{ display: block;}
.optionList.col2 li{width: 100%;}
.optionList.col3 li{width: 100%;}
/*===============================================
 knowledge [ column ]
===============================================*/
.knowledgeList{display: block;}
.knowledgeList li{width: 100%;}
.knowledgeList .postSummary h3{ font-size: 20px;}
/*===============================================
 case [ case study ]
===============================================*/
.caseStudyList{display: block;}
.caseStudyList li{width: 100%;}
.caseStudyList .postSummary h3{ font-size: 20px;}
/*-------------------------------------------------------- Old Site Import */
/*===============================================
 cmenu
===============================================*/
#cmenu ul{ display: block;}
#cmenu ul li{width: 100%; }
#cmenu li:nth-child(2){border-top: none;}
/*===============================================
 company
===============================================*/
/*===============================================
 serviceGuide
===============================================*/
/*===============================================
 information
===============================================*/
/*===============================================
 provider
===============================================*/
.migrationBox p{ margin-left: 0;}
.migrationBox table{ margin:0 0 10px 0;}
/*===============================================
 rule
===============================================*/
/*===============================================
 procedure
===============================================*/

/*===============================================
 server [ shared | dedicated | managed ]
===============================================*/
.ftrShared,
.ftrDedicated,
.ftrManaged,
.ftrColocation,
.ftrSpamsqr,
.ftrNormal{ margin-bottom: 30px;}

/*===============================================
 colocation
===============================================*/
/*===============================================
 housing
===============================================*/
/*===============================================
 domain
===============================================*/
/*===============================================
 ssl
===============================================*/
/*===============================================
 spamsqr
===============================================*/
.pamsqrMrtBox dt{ width:60px;}
.pamsqrMrtBox dt img{ width:50px;}
.pamsqrMrtBox dd{ width:calc(100% - 60px);}
/*===============================================
 popup
===============================================*/
/*===============================================
 conditions
===============================================*/
/*===============================================
 partner
===============================================*/
/*===============================================
 manual
===============================================*/
/*===============================================
 endofsales
===============================================*/
/*===============================================
  documents
===============================================*/
.docuList{ display: block;}
.docuList li{width: 100%;}
.docuList li h3{ min-height: inherit; margin-bottom: 15px;}
/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/