@charset 'shift_jis'; 

/* ===============================================
基本構成
=============================================== */
#tenyou .content-bg {background-image: none;}
#tenyou .content {width: 880px;}

#tenyou .pagetit {margin-bottom: 20px; display: table; overflow: hidden; zoom: 1;}
#tenyou .pagetit h2 {display: table-cell; vertical-align: middle; font-size: 220%; font-weight: normal; margin: 0; padding: 0 0 0 10px; color: #4762b9; background: none; border: none;}
#tenyou .pagetit .tit_step {display: table-cell; vertical-align: middle; margin: 0; padding: 0; line-height: 1.4; width: 80px; height: 80px; font-size: 100%; line-height: 1.2; background: #5b75c9; color: #fff; text-align: center; border-radius: 50%; -webkit-border-radius: 50%; moz-border-radius: 50%;}
#tenyou .pagetit .tit_step .dinf {font-size: 180%;}

#tenyou h3 {font-size: 160%;  margin: 40px 0 20px; padding: 0; border-bottom: none; border-left: 0px solid #627fdb;}
#tenyou.index h3 {margin: 50px 0 15px;} 
#tenyou h4 i {color: #5b75c9; font-size: 120%;}
img.icon {vertical-align: middle; margin-right: 6px;}

/* ========= ページヘッダー ========= */
.pagehead {width: 990px; height: 180px; padding: 0; text-align: right; background:url(/tenyou/images/pagehead_bg.png) no-repeat;}
.pagehead h1 {font-size: 250%; font-weight: normal; padding: 30px 25px 0 0;}
.pagehead ul {font-size: 110%; margin-right: 25px;}

/* ========= お申し込みボタンー ========= */
.glid_btn.order {background: #5b75c9; margin: 20px auto !important; padding: 20px; text-align: center;}
.glid_btn.order li  {margin: 0;}
.glid_btn.order li a {padding: 25px 0; font-size: 160%; letter-spacing: 0.15em;}
.glid_btn .step {margin-right: 10px; color: #4762b9; letter-spacing: 0.05em;}

/*「1」へ戻る*/
.glid_btn.back {width: 500px; margin: 0 auto; padding: 20px; font-size: 130%; letter-spacing: 0.05em; text-align: center;}

/* ========= STEP説明 ========= */
.step_box {background: #5b75c9; margin-bottom: 30px; padding: 6px 0 10px 40px; overflow: hidden; zoom: 1;}
.step_box .txt {text-align: center; color: #fff; font-size: 150%; letter-spacing: 0.1em; padding-bottom: 5px;}
.step_box .txt .em {color: #ff3;}
.step_box ul {list-style: none; overflow: hidden; zoom: 1;  margin: 0; padding: 0 0 15px;}
.step_box ul li {width: 415px;float: left; text-align: center; background: #dde5ff; margin: 0 20px 0 0; padding: 15px; font-size: 120%;position: relative; border: 0px solid #999; border-radius: 4px;}
.step_box ul li b {margin-right: 10px;padding-right: 10px; color: #4762b9; border-right: 1px solid #5b75c9;}

/* 出し分け */
body.index .step_box ul li.index,
body.process .step_box ul li.process {background: #fff;}

body.index .step_box ul li.index:after,
body.index .step_box ul li.index:before,
body.process .step_box ul li.process:after,
body.process .step_box ul li.process:before {left: 49%; top: 98%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 1; border-top-color: #fff; border-width: 12px; margin-bottom: -12px;}


/* ===============================================
STEP1.光コラボレーション、転用とは
=============================================== */
.offer_box {margin: 15px 0 30px; padding: 30px 0;}
.offer_box h4 {margin: 0; padding: 0; text-align: center;}
.offer_box img {margin: 20px auto; text-align: center; display: block;}
.offer_box.col {border: 2px solid #333; padding-bottom: 0;}


/* ===============================================
STEP2.転用のお手続き
=============================================== */

/* ========= お手続きの流れ ========= */
ol.flow {list-style: none; overflow: hidden; zoom: 1; margin: 0 0 0 -26px; padding: 0;}
ol.flow li {float:left; width: 220px; height: 55px; margin: 0 0 0 26px; padding: 0; border-radius: 4px; border: 1px solid #999; position: relative; display: table;}
ol.flow li:after {left: 103%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 1; border-left-color: #bbb; border-width: 15px; margin-top: -15px;}
ol.flow li:last-child:after {border: none;}
ol.flow span {display: table-cell; vertical-align: middle; font-size: 130%; color: #fff; color: #fff; margin: 0 ; padding: 0; background: #f3f6ff; width: 45px; text-align: center;}
ol.flow p {display: table-cell;  vertical-align: middle; margin: 0; padding: 0 10px;}

/* 担当色分け */
ol.flow li.flow01 {border-color: #189bf2;}
ol.flow li.flow02 {border-color: #004a9a;}
ol.flow li.flow03 {border-color: #ff8c00;}
ol.flow li.flow04 {border: none; text-align: center; font-size: 140%; width: 130px;}
ol.flow li.flow04 p {padding: 0;}

ol.flow li.flow01 span {background: #189bf2;}
ol.flow li.flow02 span {background: #004a9a;}
ol.flow li.flow03 span {background: #ff8c00;}

/* ========= お手続きの流れ詳細 ========= */
.process-wrap {border: 2px solid #627fdb; border-radius: 4px; position: relative; margin: 10px 0 50px;}
.process-wrap:after,
.step-wrap:after {content:""; display: block; width: 0; height: 0; border-style: solid; border-width: 30px 50px 0 50px; border-color: #ccc transparent transparent transparent; line-height: 0; position: absolute; bottom: -40px; left: 50%; margin-left: -50px;}
.process-wrap .inner {padding: 15px 30px;}

.process-wrap h4 {font-size: 140%; margin: 0; padding: 15px; border-bottom: none; color: #fff;}
.process-wrap h5 {font-size:130%; margin: 40px 0 10px; padding: 0 5px 5px; border-bottom: 1px solid #627fdb;}
.process-wrap .num {font-family:"dinFs", "Arial", "sans-serif"; font-size: 100%; font-weight: bold; margin: 0 10px 0 0; padding: 4px 15px 4px 4px; border-right: 1px solid #fff;}
.process-wrap.last:after {display: none;}

/* 担当色分け */
#flow01.process-wrap {border-color: #189bf2;}
#flow02.process-wrap {border-color: #004a9a;}
#flow03.process-wrap {border-color: #ff8c00;}
#flow04.process-wrap {border: none; text-align: center;}

#flow01.process-wrap h4 {background: #189bf2;}
#flow02.process-wrap h4 {background: #004a9a;}
#flow03.process-wrap h4 {background: #ff8c00;}
#flow04.process-wrap h4 {background: #none; color: #000;}

/* ========= NTT東日本でのお手続き ========= */
#process .inner {margin: 15px 0; padding: 0;}

/* iframe */
#process iframe {border: solid 1px #ccc; background-color: #fff; margin: 1em 0 0;}

/* btn */
#btn-print {
  position: relative;
  display: none;
  zoom: 1;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: -ms-linear-gradient(top, #fff, #f5f5f5);
  background: -moz-linear-gradient(top, #fff, #f5f5f5);
  background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#f5f5f5));
  background: linear-gradient(#fff, #f5f5f5);
  background-color: #fafafa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fffff, endColorstr=#fff5f5f5);
}
#btn-print:hover {
  border-color: #a1bfdc;
  background: #fff;
  box-shadow: 0 0 4px rgba(161, 191, 220, .5) inset;
  filter: none;
}
@media print {#btn-print,#offer-wrap {display: none!important;}}
#policy {display: none; margin-bottom: 30px;}
#offer-wrap {display: none; text-align: center; padding: 10px;}