@charset "utf-8";
/* -----------------------------------------------------------------
MODULE CSS
LAST UPDATE:
--------------------------------------------------------------------*/

#officeCP{ color: #333; line-height: 1.4; word-wrap: break-word; -webkit-text-size-adjust: 100%; height: 100%; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","Osaka",Verdana,Arial,sans-serif;}
.clearfix::after { content: ""; display: block; clear: both;}

/*--------------------------------
section
---------------------------------*/
/*section module setting*/
#officeCP section{ position: relative;}

#officeCP section p,
#officeCP section ol,
#officeCP section ul{font-size: 12pt;}
#officeCP section p,
#officeCP section ol,
#officeCP section ul,
#officeCP section table{margin-top: 20px;}
#officeCP section .inner{ width: 1080px; margin: 0 auto 0; padding: 30px 0 0; background: #fff;}

@media screen and (max-width: 479px){
	
#officeCP section p,
#officeCP section ol,
#officeCP section ul{font-size: 11pt;}
#officeCP section p,
#officeCP section ol,
#officeCP section ul,
#officeCP section table{margin-top: 1em;}
#officeCP section .inner{ width: auto; margin: 0 10px; padding: 10px 5px 0;}
#officeCP video{ width: 100%; height: auto;}

}


/*--------------------------------
mvArea
---------------------------------*/
#officeCP .mvArea{ min-width: 1350px; position: relative;}
#officeCP .mvArea h1{ width: 100%; margin: 0 auto;}
#officeCP .mvArea h1 span{ width: 1350px; margin: 0 auto; display: block; padding-bottom: 10px;}
#officeCP .mvArea .mvInner{ width: 100%; max-width: 2000px; margin: 0 auto; background: url("../../../../5info/common_office-workout/img/bg_mv.jpg") no-repeat center top; background-size: 2000px auto;}
#officeCP .mvArea .mvInner .headLogo{ position: absolute; top: 30px; left: 0px; right: 930px; margin: auto; width: 254px; z-index: 99999;}
#officeCP .mvArea .mvInner .headBnr{ position: absolute; top: 20px; left: 880px; right: 0; margin: auto; width: 326px; z-index: 99999;}

@media screen and (max-width: 479px){
#officeCP .mvArea{ background: none; min-width: 0;}
#officeCP .mvArea h1{ width: 100%; margin: 0 auto;}
#officeCP .mvArea h1 span{ width: 100%; margin: 0;}
#officeCP .mvArea h1 span img{ width: 100%;}
#officeCP .mvArea .headCampaignArea{ display: none;}
#officeCP .mvArea .mvInner{ background: none;}
#officeCP .mvArea .mvInner .headLogo{ top: 12%; left: inherit; right: 6px; width: 150px;}
#officeCP .mvArea .mvInner .headBnr{ position: inherit; width: 100%;}
}


/*--------------------------------
contTop
---------------------------------*/
#officeCP section#contTop h2{ width: 1080px; margin: 0 auto;}
#officeCP section#contTop .bLink01{ background: url("../../../../5info/common_office-workout/img/bg_blink_01.png") repeat center top; text-align: center; font-size: 0; margin-top: 40px;}
#officeCP section#contTop .bLink01 li{ display: inline-block;}
#officeCP section#contTop .bLink01 li:first-child{ margin: 0 40px;}
#officeCP section#contTop .bLink01 li a{ transition: 0.4s;}
#officeCP section#contTop .bLink01 li a:hover{ opacity: 0.6;}
#officeCP section#contTop .bLink01 li.new{ position: relative;}
#officeCP section#contTop .bLink01 li.new:after{ position: absolute; content: ""; background: url("../../../../5info/common_office-workout/img/icon_new_01.png") no-repeat; background-size: 100% auto; width: 55px; height: 25px; top: -12px; left: 50%; transform: translateX(-50%);}
section#contTop .topImg{ width: 1140px; margin: 0 auto 60px;}

@media screen and (max-width: 479px){
#officeCP section#contTop h2{ width: 100%; margin: 0 auto;}
#officeCP section#contTop .bLink01{ margin-top: 20px; background-size: 50px auto; padding: 10px 0;}
#officeCP section#contTop .bLink01 li{ display: block; margin: 0;}
#officeCP section#contTop .bLink01 li:first-child{ margin: 0;}
#officeCP section#contTop .bLink01 li.new:after{ display: none;}
#officeCP section#contTop .topImg{ width: auto; margin: 0 15px 30px;}   
   
}

/*--------------------------------
cont01
---------------------------------*/
#officeCP section#cont01{ position: relative; padding-bottom: 60px; background: url("../../../../5info/common_office-workout/img/bg_training.jpg") no-repeat top;}
#officeCP section#cont01 .bgItem01{ position: absolute; top: 130px; left: 0;}
#officeCP section#cont01 .bgItem02{ position: absolute; top: 790px; left: 0;}
#officeCP section#cont01 .bgItem03{ position: absolute; top: 1120px; right: 0;}
#officeCP section#cont01 .bgItem04{ position: absolute; top: 508px; right: 0;}
#officeCP section#cont01 .bgItem05{ position: absolute; top: 1560px; left: -115px;}
#officeCP section#cont01 .bgItem06{ position: absolute; top: 2045px; left: 0;}
#officeCP section#cont01 .bgItem07{ position: absolute; top: 1890px; right: 0;}
#officeCP section#cont01 .entryBtn01{ position: absolute; top: -75px; right: 0;}
#officeCP section#cont01 .entryBtn01 a{ display: block; transition: 0.4s;}
#officeCP section#cont01 .entryBtn01 a:hover{ opacity: 0.7;}
#officeCP section#cont01 .entryBtn01.fixed{ position: fixed; bottom: 205px; top: auto;}
#officeCP section#cont01 .entryBtn01.disabled a{ pointer-events: none; opacity: 0;}
#officeCP section#cont01 h2{ width: 1140px; margin: 0 auto;}
#officeCP section#cont01 h3 img{ margin: 0 auto;}
#officeCP section#cont01 .inner{ width: 1140px; margin: 0 auto; padding: 60px 0 0; z-index: 2; position: relative; background: transparent;}
#officeCP section#cont01 .inner .col2Wrap{ overflow: hidden;}
#officeCP section#cont01 .inner .col2Wrap .left{ float: left; width: 360px;}
#officeCP section#cont01 .inner .col2Wrap .left ul{ margin-top: 5px;}
#officeCP section#cont01 .inner .col2Wrap .right{ float: right; width: calc(100% - 360px);}
#officeCP section#cont01 .inner .col2Wrap02{ overflow: hidden;}
#officeCP section#cont01 .inner .col2Wrap02 .left{ float: left; width: 780px;}
#officeCP section#cont01 .inner .col2Wrap02 .right{ float: right; width: calc(100% - 783px);}
#officeCP section#cont01 .pointOffice{ width: 1140px; margin: 60px auto 0;}
#officeCP section#office{ background: url("../../../../5info/common_office-workout/img/bg_office.png") no-repeat center top; background-size: 2000px auto; text-align: center; font-size: 0; margin: 40px 0 85px;}
#officeCP section#office .pointOffice img{ margin: 0 auto;}
#officeCP section#office .pointOffice02 img{ margin: 0 auto;}

@media screen and (max-width: 479px){
#officeCP section#cont01{ padding-bottom: 40px; background: none;}
#officeCP section#cont01 .bgItem01{ position: absolute; top: -2px; left: 0; width: 110px; margin: 0;}
#officeCP section#cont01 .bgItem02{ position: absolute; top: 33vw; left: 0; width: 79px;}
#officeCP section#cont01 .bgItem03{ position: absolute; top: 55vw; right: 0; width: 79px;}
#officeCP section#cont01 .bgItem04{ position: absolute; top: 197vw; bottom: auto; left: 0; right: auto; width: 220px;}
#officeCP section#cont01 .bgItem05{ position: absolute; top: 336vw; left: 0; width: 220px;}
#officeCP section#cont01 .bgItem06{ position: absolute; top: 282vw; left: auto; right: 0; width: 128px;}
#officeCP section#cont01 .bgItem07{ display: none;}
#officeCP section#cont01{ padding-bottom: 10px;}
#officeCP section#cont01 .entryBtn01{ top: 5px; width: 122px;}	
#officeCP section#cont01 .entryBtn01.fixed{ position: fixed; bottom: 20px; top: auto;}
#officeCP section#cont01 h2{ width: 100%;}
#officeCP section#cont01 h3 img{ width: 277px;}
#officeCP section#cont01 .inner{ width: 100%; margin: 0 auto; padding: 0; border-radius: 5px;}
#officeCP section#cont01 .inner .col2Wrap{ overflow: hidden; padding-top: 15px;}
#officeCP section#cont01 .inner .col2Wrap .left{ float: none; width: 100%; margin-top: 10px;}
#officeCP section#cont01 .inner .col2Wrap .right{ float: none; width: 100%;}
#officeCP section#cont01 .inner .col2Wrap02{ overflow: hidden;}
#officeCP section#cont01 .inner .col2Wrap02 .left{ float: none; width: 100%; margin-top: 10px;}
#officeCP section#cont01 .pointOffice{ width: 100%; margin: 55px auto 0;}
#officeCP section#office{ background: url("../../../../5info/common_office-workout/img/bg_office_sp.png") no-repeat center top; background-size: 100% auto;  margin: 35px 0 40px;}
#officeCP section#office .pointOffice,section#office .pointOffice02{ width: auto; margin: 0 15px;}   
   
}

/*--------------------------------
cont01 .accWrap .training
---------------------------------*/
#officeCP .accWrap .training { margin: 0 auto 20px; border-bottom: #000 solid 5px; border-radius: 15px; text-align: center;}
#officeCP .accWrap .training .accTtl { background: linear-gradient(0deg, rgba(34,116,69,1) 50%, rgba(15,104,53,1) 50%); color: #fff; font-size: 26px; font-weight: bold; padding: 20px; border-radius: 8px; position: relative; z-index: +1; cursor: pointer; transition-duration: 0.2s;}
#officeCP .accWrap .training.ppt .accTtl { background: linear-gradient(0deg, rgba(188,68,42,1) 50%, rgba(182,52,24,1) 50%);}
#officeCP .accWrap .training.word .accTtl { background: linear-gradient(0deg, rgba(38,95,182,1) 50%, rgba(19,81,176,1) 50%);}
#officeCP .accWrap .training .accTtl:hover { background: linear-gradient(0deg, rgba(5,72,33,1) 0%, rgba(5,72,33,1) 100%);}
#officeCP .accWrap .training.ppt .accTtl:hover { background: linear-gradient(0deg, rgba(119,21,0,1) 0%, rgba(119,21,0,1) 100%);}
#officeCP .accWrap .training.word .accTtl:hover { background: linear-gradient(0deg, rgba(0,46,117,1) 0%, rgba(0,46,117,1) 100%);}
#officeCP .accWrap .training .accTtl.open { border-bottom: 0px; background: linear-gradient(0deg, rgba(15,104,53,1) 0%, rgba(15,104,53,1) 100%);}
#officeCP .accWrap .training.ppt .accTtl.open { border-bottom: 0px; background: linear-gradient(0deg, rgba(182,52,24,1) 0%, rgba(182,52,24,1) 100%);}
#officeCP .accWrap .training.word .accTtl.open { border-bottom: 0px; background: linear-gradient(0deg, rgba(19,81,176,1) 0%, rgba(19,81,176,1) 100%);}
#officeCP .accWrap .training .accTtl .accSwitch { display: flex; justify-content: center; align-items: center; position: absolute; top: 52%; right: 2%; width: 40px; height: 40px; margin-top: -20px; box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s;}
#officeCP .accWrap .training .accTtl .accSwitch .one { display: block; width: 28px; height: 28px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s; position: relative;}
#officeCP .accWrap .training .accTtl.open .accSwitch { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
#officeCP .accWrap .training .accTtl .accSwitch .one:before, .accWrap .training .accTtl .accSwitch .one:after { display: flex; content: ''; background: #fff; width: 26px; height: 5px; position: absolute; top: 10px; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center;}
#officeCP .accWrap .training .accTtl .accSwitch .one:before { width: 5px; height: 26px; top: 0; left: 10px;}
#officeCP .accWrap .training .accTtl.open .accSwitch .one:before { content: none;}
#officeCP .accWrap .training .accTtl.open .accSwitch .one:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#officeCP .accWrap .training .accInner { display: none; padding: 30px 30px; border-left: 6px solid #0f6835; border-right: 6px solid #0f6835; border-bottom: 6px solid #0f6835; box-sizing: border-box; margin-top: -6px; border-radius: 0 0 12px 12px;}
#officeCP .accWrap .training.ppt .accInner { border-left: 6px solid #b63418; border-right: 6px solid #b63418; border-bottom: 6px solid #b63418;}
#officeCP .accWrap .training.word .accInner { border-left: 6px solid #1351b0; border-right: 6px solid #1351b0; border-bottom: 6px solid #1351b0;}
#officeCP .accWrap .training .accInner .trainingDatil { height: 300px;}
#officeCP .accWrap .training .accInner p.txt_a_ac { margin: 0;}

@media screen and (max-width: 767px) {
#officeCP .accWrap { padding: 0 15px;}
#officeCP .accWrap .training { margin: 0 auto 6px; border-bottom: #000 solid 4px; border-radius: 12px;}
#officeCP .accWrap .training .accTtl { font-size: 16px; padding: 15px;}
#officeCP .accWrap .training .accTtl img{ width: 250px;}
#officeCP .accWrap .training .accTtl .accSwitch { top: 50%; right: 4%; width: 20px; height: 20px; margin-top: -10px;}
#officeCP .accWrap .training .accTtl .accSwitch .one { width: 16px; height: 16px;}
#officeCP .accWrap .training .accTtl .accSwitch .one:before, .accWrap .training .accTtl .accSwitch .one:after { width: 17px; height: 4px; top: 6px; left: 0;}
#officeCP .accWrap .training .accTtl .accSwitch .one:before { width: 4px; height: 17px; top: 0; left: 6px;}
}


/*--------------------------------
cont02
---------------------------------*/
#officeCP section#cont02{ padding: 0 0 70px; background: url("../../../../5info/common_office-workout/img/bg_recommend_01.jpg") repeat center top; background-size: 2000px auto;}
#officeCP section#cont02 .ttlBg{ background: url("../../../../5info/common_office-workout/img/bg_recommend_02.png") no-repeat center top; background-size: 2000px auto;}
#officeCP section#cont02 h2{ width: 1200px; margin: 0 auto;}
#officeCP section#cont02 .inner{ width: 1200px; margin: 0 auto; padding: 0; position: relative; background: none;}
#officeCP section#cont02 .inner .typeCont{ margin-bottom: 25px; z-index: 2; overflow: hidden;}
#officeCP section#cont02 .inner .typeCont .top{ padding-top: 20px; position: relative;}
#officeCP section#cont02 .inner .typeCont .type{ overflow: hidden; width: 600px; margin: 0 auto; float: left; background: #fff; padding: 40px 0 40px 50px;}
#officeCP section#cont02 .inner .typeCont .type.non{ padding: 40px 30px;}
#officeCP section#cont02 .inner .typeCont .type .detail{ width: 550px;}
#officeCP section#cont02 .inner .typeCont .type h4{ margin: auto;}
#officeCP section#cont02 .inner .typeCont .type h4 img{ margin: 0 auto;}
#officeCP section#cont02 .inner .typeCont .type .product{ overflow: hidden; margin: 30px 0 0;}
#officeCP section#cont02 .inner .typeCont .type .product dt{ width: 250px; margin-right: 15px; display: inline-block;}
#officeCP section#cont02 .inner .typeCont .type .product dd{ display: inline-block; vertical-align: top;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont01A{ margin-top: 30px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont01B{ margin-top: 30px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont02A{ margin-top: 10px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont02B{ margin-top: 30px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont03A{ margin-top: 30px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont03B{ margin-top: 30px;}
#officeCP section#cont02 .inner .typeCont .type .product dd .name{ font-size: 14pt; font-weight: bold; line-height: 1.6; display: block; letter-spacing: -1px;}
#officeCP section#cont02 .inner .typeCont .type .product dd .price{ color: #df0000; font-size: 22pt; font-weight: bold; margin-top: 4px; display: block;}
#officeCP section#cont02 .inner .typeCont .type .product dd .price small{ color: #000; font-size: 13pt; font-weight: bold; padding-left: 8px;}
#officeCP section#cont02 .inner .typeCont .type .spec{ overflow: hidden;}
#officeCP section#cont02 .inner .typeCont .type .spec ul{ width: 265px; margin: 20px 0 0; float: left;}
#officeCP section#cont02 .inner .typeCont .type .spec ul.after{ width: 285px;}
#officeCP section#cont02 .inner .typeCont .type .spec li{ font-size: 9pt; font-weight: bold; padding: 3px 0 3px 77px; margin-bottom: 6px; letter-spacing: -0.6px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec01{ background: url("../../../../5info/common_office-workout/img/img_spec_icon01.png") no-repeat;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec02{ background: url("../../../../5info/common_office-workout/img/img_spec_icon02.png") no-repeat;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec03{ background: url("../../../../5info/common_office-workout/img/img_spec_icon03.png") no-repeat;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec04{ background: url("../../../../5info/common_office-workout/img/img_spec_icon04.png") no-repeat;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec05{ background: url("../../../../5info/common_office-workout/img/img_spec_icon05.png") no-repeat;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec06{ background: url("../../../../5info/common_office-workout/img/img_spec_icon06.png") no-repeat;}
#officeCP section#cont02 .inner .typeCont .type .review{ width: 420px; margin: 0 auto;}
#officeCP section#cont02 .inner .typeCont .type .review p.link.Atype a{ background: #0032d5; padding: 17px 0; border-radius: 4px;}
#officeCP section#cont02 .inner .typeCont .type .review p.link.Atype a:hover{ background: #002088;}
#officeCP section#cont02 .inner .typeCont .type .review p.link.Btype a{ background: #137000; padding: 17px 0; border-radius: 4px;}
#officeCP section#cont02 .inner .typeCont .type .review p.link.Btype a:hover{ background: #0a3b00;}
#officeCP section#cont02 .inner .typeCont .type .review p.link a span{ font-size: 13pt;}
#officeCP section#cont02 .inner .typeCont .type .review p.link a span:after{top: 5px;}
#officeCP section#cont02 .inner .typeCont p.link a{ text-align: center; text-decoration: none; background: #323232; padding: 20px 0; display: block; clear: both;}
#officeCP section#cont02 .inner .typeCont p.link a span{ text-decoration: none; color: #fff; font-size: 14pt; font-weight: bold; display: inline-block; transition: 0.4s; position: relative;}
#officeCP section#cont02 .inner .typeCont p.link a span:after{ content: ""; position: absolute; background: url("../../../../5info/common_office-workout/img/img_arrow_left.png") no-repeat; background-size: 100% auto; right: -25px; top: 7px; width: 10px; height: 15px;}
#officeCP section#cont02 .inner .typeCont p.link:hover a{ background: #616161; transition: 0.4s;}


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

#officeCP section#cont02{ padding: 0 0 20px; background: url("../../../../5info/common_office-workout/img/bg_recommend_01_sp.jpg") repeat center top; background-size: 100% auto;}
#officeCP section#cont02 h2{ width: 100%; margin: 0 auto;}
#officeCP section#cont02 .inner{ width: 95%; padding: 0;}
#officeCP section#cont02 .inner .typeCont{ margin-bottom: 25px;}
#officeCP section#cont02 .inner .typeCont .top{ padding: 6px 0 0;}
#officeCP section#cont02 .inner .typeCont .top .typeHeadTxt{ width: 100%; border-bottom: 1px #000 solid; padding-bottom: 16px; margin-top: 14px;}
#officeCP section#cont02 .inner .typeCont .top .text{ font-size: 1.2rem; margin: 14px 0; line-height: 1.9;}

#officeCP section#cont02 .inner .typeCont .point{ padding: 24px 15px 20px;}
#officeCP section#cont02 .inner .typeCont .point dl{ width: 100%;}
#officeCP section#cont02 .inner .typeCont .point dt{ width: 100%; float: inherit;}
#officeCP section#cont02 .inner .typeCont .point dt img{ width: 270px; margin: 0 auto;}
#officeCP section#cont02 .inner .typeCont .point dd{ width: 100%; float: inherit;}
#officeCP section#cont02 .inner .typeCont .point dd .ttl{ padding-left: 14px; border-left: #e81d81 3px solid; margin-top: 26px;}
#officeCP section#cont02 .inner .typeCont .point dd .ttl img{ width: 250px;}
#officeCP section#cont02 .inner .typeCont .point dd .keyword{ margin-top: 12px;}
#officeCP section#cont02 .inner .typeCont .point dd .keyword img{ width: 285px;}
#officeCP section#cont02 .inner .typeCont .point dd .detail{ font-size: 1.3rem; margin-top: 8px; line-height: 1.8;}

#officeCP section#cont02 .inner .typeCont .type{ width: auto; margin: 0; padding: 22px 15px 15px;}
#officeCP section#cont02 .inner .typeCont .type.non{ padding: 0 15px 22px;}
#officeCP section#cont02 .inner .typeCont .type .detail{ width: 100%; float: inherit;}
#officeCP section#cont02 .inner .typeCont .type h4{ padding: 0;}
#officeCP section#cont02 .inner .typeCont .type h4 img{ width: 100%;}
#officeCP section#cont02 .inner .typeCont .type .product{ margin: 15px 0 0;}
#officeCP section#cont02 .inner .typeCont .type .product dt{ width: 145px; margin-right: 2px;}
#officeCP section#cont02 .inner .typeCont .type .product dd{ width: calc(100% - 155px);}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont01A{ margin-top: 20px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont01B{ margin-top: 20px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont02A{ margin-top: 5px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont02B{ margin-top: 20px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont03A{ margin-top: 20px;}
#officeCP section#cont02 .inner .typeCont .type .product dd.cont03B{ margin-top: 20px;}
#officeCP section#cont02 .inner .typeCont .type .product dd .name{ font-size: 10pt; line-height: 1.5;}
#officeCP section#cont02 .inner .typeCont .type .product dd .price{ font-size: 14pt; margin-top: 4px;}
#officeCP section#cont02 .inner .typeCont .type .product dd .price small{ font-size: 9pt; padding-left: 4px;}
#officeCP section#cont02 .inner .typeCont .type .spec{ margin-top: 15px;}
#officeCP section#cont02 .inner .typeCont .type .spec ul{ width: 100%; margin: 0; display: block;}
#officeCP section#cont02 .inner .typeCont .type .spec ul.after{ width: 100%;}
#officeCP section#cont02 .inner .typeCont .type .spec li{ font-size: 9pt; padding: 2px 0 0 74px; margin-bottom: 7px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec01{ background: url("../../../../5info/common_office-workout/img/img_spec_icon01_sp.png") no-repeat; background-size: 65px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec02{ background: url("../../../../5info/common_office-workout/img/img_spec_icon02_sp.png") no-repeat; background-size: 65px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec03{ background: url("../../../../5info/common_office-workout/img/img_spec_icon03_sp.png") no-repeat; background-size: 65px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec04{ background: url("../../../../5info/common_office-workout/img/img_spec_icon04_sp.png") no-repeat; background-size: 65px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec05{ background: url("../../../../5info/common_office-workout/img/img_spec_icon05_sp.png") no-repeat; background-size: 65px;}
#officeCP section#cont02 .inner .typeCont .type .spec li.spec06{ background: url("../../../../5info/common_office-workout/img/img_spec_icon06_sp.png") no-repeat; background-size: 65px;}

#officeCP section#cont02 .inner .typeCont .type .review{ width: 100%; float: inherit; margin: 0 0 15px; background: url("../../../../5info/common_office-workout/img/bg_dot.png") repeat-x #fff; background-position: bottom; padding-bottom: 30px;}
#officeCP section#cont02 .inner .typeCont .type.non .review{ margin: 0; background: none; padding-bottom: 0;}
#officeCP section#cont02 .inner .typeCont .type .review li{ padding: 12px 12px 8px 62px; min-height: 73px; font-size: 1.1rem; margin-bottom: 7px; border-radius: 4px;}
#officeCP section#cont02 .inner .typeCont .type .review li.userA:before{ left: 12px; top: 12px; width: 36px; height: 49px;}	
#officeCP section#cont02 .inner .typeCont .type .review li.userB:before{ left: 12px; top: 12px; width: 36px; height: 49px;}	

#officeCP section#cont02 .inner .typeCont .type .review p.link.Atype a,
#officeCP section#cont02 .inner .typeCont .type .review p.link.Btype a{ padding: 20px 0; margin-top: 15px;}
#officeCP section#cont02 .inner .typeCont .type .review p.link a span{ font-size: 12pt;}
#officeCP section#cont02 .inner .typeCont .type .review p.link a span:after{top: 5px;}
	
#officeCP section#cont02 .inner .typeCont p.link{ margin: 0;}
#officeCP section#cont02 .inner .typeCont p.link a{ padding: 12px 0;}
#officeCP section#cont02 .inner .typeCont p.link a span{font-size: 11pt;}
#officeCP section#cont02 .inner .typeCont p.link a span:after{top: 13px; width: 7px; right: -16px;}
#officeCP section#cont02 .inner .typeCont p.link:hover a{ background: #616161; transition: 0.4s;}

}


/*--------------------------------
cont03
---------------------------------*/
#officeCP section#cont03{ background-image: url("../../../../5info/common_office-workout/img/img_bg_present_left.png"), url("../../../../5info/common_office-workout/img/img_bg_present_right.png"); background-position: left top, right top; background-size: 18% auto, 18% auto; background-repeat: no-repeat, no-repeat; padding-top: 60px; min-width: 1050px;}
#officeCP section#cont03 .inner{ background: none; padding-top: 0;}

#officeCP section#cont03 h2{ width: 1080px; margin: 0 auto 30px;}
#officeCP section#cont03 h3{ width: 560px; margin: 0 auto 35px;}

/*provisional*/
#officeCP section#cont03 .inner .caution{ background: #ffffc7; padding: 30px 190px 15px;}
#officeCP section#cont03 .inner .caution ul{ margin-bottom: 0;}
#officeCP section#cont03 .inner .caution li{ color: #dc2929; font-weight: bold; font-size: 2.2rem; margin-bottom: 20px;}

#officeCP section#cont03 .col3Wrap{ display: block; font-size: 0; margin-bottom: 15px;}
#officeCP section#cont03 .col3Wrap li{ width: 330px; display: inline-block; margin-right: 30px; padding-left: 0;}
#officeCP section#cont03 .col3Wrap li:last-child{ margin-right: 0;}

#officeCP section#cont03 h3.stepHead{ display: block; width: 100%; margin: 60px 0 30px;}
#officeCP section#cont03 .stepWrap{ display: table;}
#officeCP section#cont03 .stepWrap p{ display: table-cell; vertical-align: top;}
#officeCP section#cont03 .stepWrap p.step01{ width: 326px;}
#officeCP section#cont03 .stepWrap p.step02{ width: 476px;}
#officeCP section#cont03 .stepWrap p.step03{ width: 278px;}

#officeCP section#cont03 p.head{ font-weight: bold; margin-top: 40px;}
#officeCP section#cont03 ul{ margin: 10px 0 50px;}
#officeCP section#cont03 ul li{ text-indent: -1em; padding-left: 1em; margin-bottom: 10px; line-height: 1.8; font-size: 11pt;}

#officeCP section#cont03 ul.cautionSmall{ margin: 0 0 40px;}
#officeCP section#cont03 ul.cautionSmall li{ margin-bottom: 5px; font-size: 12px;}

#officeCP section#cont03 .inner .bottomBtn{ width: 700px; margin: 30px auto 0;}
#officeCP section#cont03 .inner .bottomBtn a{ display: block; text-align: center; text-decoration: none; transition: 0.4s;}

#officeCP section#cont03 .inner .logoLinkWrap01{ display: block; font-size: 0; margin: 60px auto; text-align: center;}
#officeCP section#cont03 .inner .logoLinkWrap01 li{ display: inline-block; width: 175px; transition: 0.4s;}
#officeCP section#cont03 .inner .logoLinkWrap01 li:last-child{ margin-right: 0;}
#officeCP section#cont03 .inner .logoLinkWrap01 li.label01{ margin-right: 45px;}
#officeCP section#cont03 .inner .logoLinkWrap01 li.label02{ margin-right: 30px;}
#officeCP section#cont03 .inner .logoLinkWrap01 li.label03{ margin-right: 0;}

#officeCP section#cont03 .inner .logoLinkWrap01 li:hover,
#officeCP section#cont03 .inner .bottomBtn a:hover{ opacity: 0.6;}

@media screen and (max-width: 479px){
#officeCP section#cont03{ background-image: url("../../../../5info/common_office-workout/img/img_bg_present_left_sp.png"), url("../../../../5info/common_office-workout/img/img_bg_present_right_sp.png"); background-position: left top, right top; background-size: 18% auto, 18% auto; background-repeat: no-repeat, no-repeat; padding-top: 35px; min-width: 0;}

#officeCP section#cont03 .inner{ padding: 0;}
#officeCP section#cont03 h2{ width: auto; margin: 0 0 20px;}
#officeCP section#cont03 h3{ width: auto; margin: 0 0 20px;}

/*provisional*/
#officeCP section#cont03 .inner .caution{ padding: 20px 0 10px 35px;}
#officeCP section#cont03 .inner .caution li{ font-size: 1.5rem; margin-bottom: 10px; padding: 0; text-indent: 0;}

#officeCP section#cont03 .col3Wrap{ display: block; font-size: 0; margin-bottom: 40px;}
#officeCP section#cont03 .col3Wrap li{ width: 100%; display: block; margin: 0 0 10px; padding: 0;}

#officeCP section#cont03 h3.stepHead{ margin: 40px 0 15px;}
#officeCP section#cont03 .stepWrap{ display: block;}
#officeCP section#cont03 .stepWrap p{ display: block; margin-top: 0;}
#officeCP section#cont03 .stepWrap p.step01,
#officeCP section#cont03 .stepWrap p.step02,
#officeCP section#cont03 .stepWrap p.step03{ width: 100%;}	

#officeCP section#cont03 p.head{ margin-top: 30px;}
#officeCP section#cont03 .presentText p.head{ font-size: 1.4rem;}
#officeCP section#cont03 .presentText p{ font-size: 1.2rem;}
#officeCP section#cont03 ul{ margin: 5px 0 40px;}
#officeCP section#cont03 ul li{ font-size: 10.5pt; margin-bottom: 0.8em;}
   
#officeCP section#cont03 ul.cautionSmall{ margin: 0 0 40px;}
#officeCP section#cont03 ul.cautionSmall li{ margin-bottom: 10px; font-size: 11px;}

#officeCP section#cont03 .inner .bottomBtn{ width: auto; margin: 30px auto 0;}

#officeCP section#cont03 .inner .logoLinkWrap01{ margin: 40px auto 30px;}
#officeCP section#cont03 .inner .logoLinkWrap01 li{ width: 110px; text-indent: 0; padding: 0;}
#officeCP section#cont03 .inner .logoLinkWrap01 li:last-child{ margin-right: 0;}
#officeCP section#cont03 .inner .logoLinkWrap01 li.label01{ margin-right: 14px;}
#officeCP section#cont03 .inner .logoLinkWrap01 li.label02{ margin-right: 0;}
#officeCP section#cont03 .inner .logoLinkWrap01 li.label03{ margin-right: -10px;}	
	
}

/*--------------------------------
footer
---------------------------------*/
#officeCP .footerLogo{ text-align: center; position: relative; min-width: 1080px; border-top: 5px solid #525252;}
#officeCP .footerLogo ul{ display: block; text-align: center; padding: 40px 0 30px;}
#officeCP .footerLogo ul li{ display: inline-block; width: 190px; margin: 0 25px;}
#officeCP .footerLogo ul li a:hover{ opacity: 0.6; transition: 0.4s;}
#officeCP .footerLogo p.company{ margin-bottom: 22px; line-height: 1.8; font-weight: bold;}
#officeCP .footerLogo p.copy{ font-size: 12px; padding: 0 0 25px; color: #333;}

@media screen and (max-width: 479px){
#officeCP .footerLogo{ min-width: 0;}
#officeCP .footerLogo p.copy{ font-size: 1rem; padding: 0 0 20px;}
#officeCP .footerLogo ul{ padding: 30px 0 25px;}
#officeCP .footerLogo ul li{ width: 130px; margin: 0 15px;}
#officeCP .footerLogo p.copy{ font-size: 0.7rem; padding: 0 0 30px;}

}

/*--------------------------------
sec
---------------------------------*/
#officeCP .col2Wrap{width: 100%; overflow: hidden;}
#officeCP .col2Wrap .colL{width: 442px;float: left;}
#officeCP .col2Wrap .colR{width: 442px;float: right;}

/*---------------------------------
 TEXT
-----------------------------------*/
section p strong{font-weight: bold;}

/*---------------------------------
 device
-----------------------------------*/
#officeCP .spOnly{display: none !important;}
#officeCP .spOnlyI{display: none !important;}
#officeCP .pcOnly{display: block !important;}
#officeCP .pcOnlyI{display: inline-block !important;}

@media screen and (max-width: 479px){
#officeCP .spOnly{display: block !important;}
#officeCP .spOnlyI{display: inline-block !important;}
#officeCP .pcOnly{display: none !important;}
#officeCP .pcOnlyI{display: none !important;}
}

/*---------------------------------
 IMG
-----------------------------------*/
#officeCP .imgMax{ width: 100%; height: auto;}

@media screen and (max-width: 479px){
#officeCP .imgMaxSp{ width: 100%; height: auto;}
}

/*---------------------------------
 margin
-----------------------------------*/
#officeCP .mb0 { margin-bottom: 0px !important;}
#officeCP .mb5 { margin-bottom: 5px !important;}
#officeCP .mb10 { margin-bottom: 10px !important;}
#officeCP .mb15 { margin-bottom: 15px !important;}
#officeCP .mb20 { margin-bottom: 20px !important;}
#officeCP .mb25 { margin-bottom: 25px !important;}
#officeCP .mb30 { margin-bottom: 30px !important;}
#officeCP .mb35 { margin-bottom: 35px !important;}
#officeCP .mb40 { margin-bottom: 40px !important;}
#officeCP .mb45 { margin-bottom: 45px !important;}
#officeCP .mb50 { margin-bottom: 50px !important;}
#officeCP .mt0 { margin-top: 0px !important;}
#officeCP .mt5 { margin-top: 5px !important;}
#officeCP .mt10 { margin-top: 10px !important;}
#officeCP .mt15 { margin-top: 15px !important;}
#officeCP .mt20 { margin-top: 20px !important;}
#officeCP .mt25 { margin-top: 25px !important;}
#officeCP .mt30 { margin-top: 30px !important;}
#officeCP .mt35 { margin-top: 35px !important;}
#officeCP .mt40 { margin-top: 40px !important;}
#officeCP .mt45 { margin-top: 45px !important;}
#officeCP .mt50 { margin-top: 50px !important;}
#officeCP .ml0 { margin-left: 0px !important;}
#officeCP .ml5 { margin-left: 5px !important;}
#officeCP .ml10 { margin-left: 10px !important;}
#officeCP .ml15 { margin-left: 15px !important;}
#officeCP .ml20 { margin-left: 20px !important;}
#officeCP .ml25 { margin-left: 25px !important;}
#officeCP .ml30 { margin-left: 30px !important;}
#officeCP .ml35 { margin-left: 35px !important;}
#officeCP .ml40 { margin-left: 40px !important;}
#officeCP .ml45 { margin-left: 45px !important;}
#officeCP .ml50 { margin-left: 50px !important;}
#officeCP .mr0 { margin-right: 0px !important;}
#officeCP .mr5 { margin-right: 5px !important;}
#officeCP .mr10 { margin-right: 10px !important;}
#officeCP .mr15 { margin-right: 15px !important;}
#officeCP .mr20 { margin-right: 20px !important;}
#officeCP .mr25 { margin-right: 25px !important;}
#officeCP .mr30 { margin-right: 30px !important;}
#officeCP .mr35 { margin-right: 35px !important;}
#officeCP .mr40 { margin-right: 40px !important;}
#officeCP .mr45 { margin-right: 45px !important;}
#officeCP .mr50 { margin-right: 50px !important;}

#officeCP .pt0{ padding-top: 0px !important;}
/*---------------------------------
 fig
-----------------------------------*/
#officeCP .clear{ clear:both;}

#officeCP .layoutC{ text-align:center !important;}
#officeCP .layoutR{ text-align:right !important;}
#officeCP .layoutL{ text-align:left !important;}

/*---------------------------------
 javascript
-----------------------------------*/
#officeCP .bLink01Fix{ background: url("../../../../5info/common_office-workout/img/bg_blink_01.png") repeat center top; text-align: center; font-size: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; opacity: 0; pointer-events: none;}

#officeCP .bLink01Fix li{ display: inline-block; margin-right: 24px;}
#officeCP .bLink01Fix li:first-child{ margin-right: 30px;}
#officeCP .bLink01Fix li:last-child{ margin-left: 5px; margin-right: 0;}
#officeCP .bLink01Fix li a{ transition: 0.4s;}
#officeCP .bLink01Fix li a:hover{ opacity: 0.6;}

#officeCP .bLink01Fix li.new{ position: relative; transition: 0.4s;}
#officeCP .bLink01Fix li.new:before{ position: absolute; content: ""; top: 0; left: 50%; transform: translateX(-50%); background: url("../../../../5info/common_office-workout/img/icon_new_01.png") no-repeat; background-size: 100% auto; width: 38px; height: 20px;}

#officeCP .bLink01Fix li.new:hover:before{ opacity: 0.6;}

#officeCP .bLink01Fix.fixed{ opacity: 1; pointer-events: auto;}
#officeCP .bLink01Fix.fixed.UpMove { animation: UpAnime 0.5s forwards;}
#officeCP .bLink01Fix.fixed.DownMove { animation: DownAnime 0.5s forwards;}

@media screen and (max-width: 479px){
#officeCP .bLink01Fix{ background-size: 50px auto; padding: 8px 0;}
#officeCP .bLink01Fix li{ display: block; margin: 0;}
#officeCP .bLink01Fix li:first-child{ margin: 0;}
#officeCP .bLink01Fix li.new:before{ display: none;}
   
#officeCP .bLink01Fix.fixed.UpMove { animation: UpAnimeSp 0.5s forwards;}
#officeCP .bLink01Fix.fixed.DownMove { animation: DownAnimeSp 0.5s forwards;}
}

/*--------------------------------
Animetion
---------------------------------*/
@keyframes UpAnime { from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-140px); } }
@keyframes DownAnime { from { opacity: 0; transform: translateY(-140px); }
  to { opacity: 1; transform: translateY(0); } }
@keyframes UpAnimeSp { from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-72px); } }
@keyframes DownAnimeSp { from { opacity: 0; transform: translateY(-72px); }
  to { opacity: 1; transform: translateY(0); } }