@charset "utf-8";

/* =================================================== */
/* 共通
/* =================================================== */
.guide-page a {
  color: #333333;
  text-decoration: none;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.guide-page a:hover {
  text-decoration: underline;
}
.guide-page img {
  border: 0;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.guide-page figure,.guide-pagefigure,.guide-page figcaption {
  display: inline-block;
  text-align: center;
  margin: 0;
}
.guide-page h1,.guide-page h2,.guide-page h3,.guide-page h4,.guide-page h5,
.guide-page p,.guide-page ul,.guide-page ol,.guide-page li,.guide-page dl,.guide-page dt,.guide-page dd {
  margin: 0;
  padding: 0;
}

.guide-page *:before,.guide-page *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/* responsive view =========== */
.smp-mode-view {
  display: none !important;
}

/* style =========== */

.txt-size-S {
  font-size: 0.8rem;
}

.txt-size-M {
  font-size: 1rem;
  line-height: 1.8;
}

.txt-lBlu { color: #0e72bb; }
.bg-lBlu { background: #0e72bb; }
.txt-dRed { color: #c80b17; }
.txt-lRed { color: #f2323e; }
.txt-Blk { color: #000000; }
.bg-dRed { background: #c80b17; }
.bg-lRed { background: #f2323e; }

.under-line {
  font-weight: 700;
  border-bottom: #333 solid 1px;
}

.line-through {
  text-decoration: line-through;
}

.fl-left {
  float: left;
}
.fl-right {
  float: right;
}


.mgt-5 { margin-top: 5px; }
.mgt-10 { margin-top: 10px; }
.mgt-15 { margin-top: 15px; }
.mgt-20 { margin-top: 20px; }
.mgt-30 { margin-top: 30px; }
.mgt-50 { margin-top: 50px; }
.mgt-60 { margin-top: 60px; }

.mgb-5 { margin-bottom: 5px; }
.mgb-10 { margin-bottom: 10px; }
.mgb-15 { margin-bottom: 15px; }
.mgb-20 { margin-bottom: 20px; }
.mgb-30 { margin-bottom: 30px; }
.mgb-50 { margin-bottom: 50px; }
.mgb-60 { margin-bottom: 60px; }

.mgl-5 { margin-left: 5px; }
.mgl-10 { margin-left: 10px; }
.mgl-15 { margin-left: 15px; }
.mgl-20 { margin-left: 20px; }
.mgl-30 { margin-left: 30px; }
.mgl-50 { margin-left: 50px; }
.mgl-60 { margin-left: 60px; }

.mgr-5 { margin-right: 5px; }
.mgr-10 { margin-right: 10px; }
.mgr-15 { margin-right: 15px; }
.mgr-20 { margin-right: 20px; }
.mgr-30 { margin-right: 30px; }
.mgr-50 { margin-right: 50px; }
.mgr-60 { margin-right: 60px; }

.mglr-10 { margin-left: 10px !important; margin-right: 10px !important; }
.mglr-15 { margin-left: 15px !important; margin-right: 15px !important; }
.mglr-20 { margin-left: 20px !important; margin-right: 20px !important; }

.fntW-n { font-weight: 400 !important; }
.fntW-b { font-weight: 700 !important; }

.horizontal-item {
  display: inline-block;
  margin-right: 15px;
}

.br-none, .br-visible, .pc-view {
  display: none;
}

.move-obj {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

/* button =========== */

/* #Type*/
.button-block.type-A a {
  position: relative;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  font-size: 1.6rem;
  line-height: 1.3;
  border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
.button-block.typ-A a:hover,
.button-block.typ-A a:active {
  background-color: #e3edf4;
}

/* #BG color*/
.button-block.bg-red a {
  color: #fff;
  background-color: #e12630;
}
.button-block.bg-red a:hover,
.button-block.bg-red a:active {
  background-color: #e9434c;
}

.button-block.bg-blu a {
  color: #fff;
  background-color: #306a9e;
}
.button-block.bg-blu a:hover,
.button-block.bg-blu a:active {
  background-color: #4a8ac4;
}


/* --------------------------------------------------- */
/* clearfix
/* --------------------------------------------------- */
.clearfix::after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
}
.clearfix {
	_display: inline-table;
	zoom: 1;
}


/* =================================================== */
/* Second Page
/* =================================================== */

.guide-page-wrapper {
  margin: 50px 0 80px;
}
.guide-page {
  width: 100%;
  min-width: 980px;
}



/*----------------------------------
 Guide page
----------------------------------*/

.guide-page h2.ttl-box {
  border-bottom: none;
  margin-bottom: 30px;
  text-align: center;
}
.guide-page .container .tab-set {
  border-bottom: #cb2121 solid 2px;
}
.guide-page .container .tab-box {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 900px;
}
.guide-page .container .tab-box li {
  display: flex;
  width: 33.333333%;
  border-left: #fff solid 1px;
}
.guide-page .container .tab-box li:first-child {
  border-left: none;
}
.guide-page .container .tab-box li a {
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  background: #dabbbc;
  color: #fff;
  padding: 20px 10px;
  text-align: center;
  width: 100%;
  font-size: 1.2rem;
}
.guide-page .container .tab-box li.is-active a {
  background: #cb2121;
}
.guide-page .container .tab-box li a:hover,
.guide-page .container .tab-box li a:active {
  text-decoration: none;
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.guide-page section.blocks {
  padding-bottom: 60px;
  border-left: #eee solid 3px;
  border-right: #eee solid 3px;
  border-bottom: #eee solid 3px;
}

.guide-page section.blocks h3.ttl-box {
  background: #eee;
  text-align: center;
  font-size: 1.8rem;
  padding: 25px 10px;
  font-weight: 700;
}
.guide-page section.blocks h3.ttl-box.mgt-set {
  margin-top: 80px;
}
.guide-page section.blocks h3.ttl-box .icon-no1 {
  color: #cb2121;
}
.guide-page section.blocks h3.ttl-box .icon-no1:before{
	content: "";
	display: inline-block;
	width: 33px;
	height: 30px;
	background-image: url("../image/guide/icon_no1.png");
	background-size: 100% auto;
	margin-right: 5px;
	margin-top: -4px;
	vertical-align: middle;
}
.guide-page section.blocks h3.ttl-box .icon-no2 {
  color: #263c6e;
}
.guide-page section.blocks h3.ttl-box .icon-no2:before{
	content: "";
	display: inline-block;
	width: 32px;
	height: 29px;
	background-image: url("../image/guide/icon_no2.png");
	background-size: 100% auto;
	margin-right: 5px;
	margin-top: -4px;
	vertical-align: middle;
}
.guide-page section.blocks h3.ttl-box .icon-no3 {
  color: #19797e;
}
.guide-page section.blocks h3.ttl-box .icon-no3:before{
	content: "";
	display: inline-block;
	width: 32px;
	height: 30px;
	background-image: url("../image/guide/icon_no3.png");
	background-size: 100% auto;
	margin-right: 5px;
	margin-top: -4px;
	vertical-align: middle;
}
.guide-page section.blocks .step-block {
  width: 800px;
  margin: 60px auto 0;
  padding-bottom: 35px;
  background: url("../image/guide/img_flow-arrow.png") no-repeat bottom center;
}
.guide-page section.blocks .step-block.end-flow {
  padding-bottom: 0;
  background: none;
}
.guide-page section.blocks .step-block .img-box {
  float: left;
}
.guide-page .smp-ver section.blocks .step-block .img-box,
.guide-page .atena-smp-ver section.blocks .step-block .img-box {
  width: 260px;
}
.guide-page .pc-ver section.blocks .step-block .img-box,
.guide-page .atena-ver section.blocks .step-block .img-box {
  width: 420px;
}
.guide-page section.blocks .step-block .txt-box {
  float: right;
  font-size: 1rem;
  line-height: 1.8;
}
.guide-page .smp-ver section.blocks .step-block .txt-box,
.guide-page .atena-smp-ver section.blocks .step-block .txt-box {
  width: 510px;
}
.guide-page .pc-ver section.blocks .step-block .txt-box,
.guide-page .atena-ver section.blocks .step-block .txt-box {
  width: 350px;
}
.guide-page section.blocks h4.ttl-box {
  width: 800px;
  margin: 60px auto 30px;
  font-size: 1.4rem;
  font-weight: 700;
  padding-left: 15px;
  border-left: #19797e solid 4px;
}

.guide-page section.blocks a.btn-atena {
  background: #19797e;
  display: inline-block;
  margin-top: 30px;
  padding: 6px 18px;
  border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.guide-page section.blocks a.btn-atena:hover,
.guide-page section.blocks a.btn-atena:active {
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}


/* Atena =========== */

.guide-page .atena-ver section.blocks,
.guide-page .atena-smp-ver section.blocks{
  padding-bottom: 60px;
  padding-top: 40px;
}

.pageindex-block {
  width: 800px;
  margin: 0 auto 40px;
}
.pageindex-block .read-box {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.2rem;
  text-decoration: underline;
  color: #c02223;
}
.pageindex-block dl {
  border: #999 solid 2px;
}
.pageindex-block dt {
  padding: 10px 15px;
  font-size: 1rem;
}
.pageindex-block dt:nth-child(n+2) {
  border-top: #999 solid 2px;
}
.pageindex-block dd {
  font-size: 0.9rem;
  border-top: #ccc solid 1px;
}
.pageindex-block dt .icon-newcreate:before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 26px;
	background-image: url("../image/guide/icon_newcreate.png");
	background-size: 25px auto;
	margin-right: 8px;
	margin-top: -4px;
	vertical-align: middle;
}
.pageindex-block dt .icon-edit:before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 22px;
	background-image: url("../image/guide/icon_edit.png");
	background-size: 25px auto;
	margin-right: 8px;
	margin-top: -4px;
	vertical-align: middle;
}
.pageindex-block dd {
  position: relative;
}
.pageindex-block dd a {
  padding: 10px 15px;
  display: block;
  width: 100%;
}
.pageindex-block dd a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f063";
  position: absolute;
  font-weight: 900;
  font-size: 0.6rem;
  top: 50%;
  right: 10px;
  margin-top: -8px;
  color: #ccc;
}
.pageindex-block dd a:hover,
.pageindex-block dd a:active {
  text-decoration: none;
  background: #eee;
}

.guide-page section.blocks h3.ttl-box .icon-newcreate:before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 31px;
	background-image: url("../image/guide/icon_newcreate.png");
	background-size: 100% auto;
	margin-right: 8px;
	margin-top: -6px;
	vertical-align: middle;
}
.guide-page section.blocks h4.ttl-box {
  border-left: #c02223 solid 4px;
}

.guide-page section.blocks .annot-box {
  margin: 0 auto;
  border: #cfcfcf solid 1px;
  width: 800px;
}
.guide-page section.blocks .annot-box.mgt-set {
  margin-top: 30px;
}
.guide-page section.blocks .annot-box .answer {
  padding: 10px;
  font-size: 0.8rem !important;
}
.guide-page section.blocks .annot-box .btn {
  white-space: normal;
  text-align: left;
  color: #666 !important;
  font-size: 0.8rem !important;
}


/* =================================================== */
/* custom.css
/* =================================================== */

.blocks .btn::after,
.panel-heading::after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
  float: right;
  margin-left: 15px;
}
.blocks .collapsed::after,
.collapsed .panel-heading::after {
  content: "\e114";
}


button,
input,
optgroup,
select,
textarea {
 margin:0;
 font:inherit;
 color:inherit
}

button {
 overflow:visible
}

button,
select {
 text-transform:none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
 -webkit-appearance:button;
 cursor:pointer
}

button,
input,
select,
textarea {
 font-family:inherit;
 font-size:inherit;
 line-height:inherit
}

.btn {
 display:inline-block;
 padding:6px 12px;
 margin-bottom:0;
 font-size:14px;
 font-weight:400;
 line-height:1.42857143;
 text-align:center;
 white-space:nowrap;
 vertical-align:middle;
 -ms-touch-action:manipulation;
 touch-action:manipulation;
 cursor:pointer;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 background-image:none;
 border:1px solid transparent;
 border-radius:4px
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
 outline:5px auto -webkit-focus-ring-color;
 outline-offset:-2px
}
.btn.focus,
.btn:focus,
.btn:hover {
 color:#333;
 text-decoration:none
}
.btn.active,
.btn:active {
 background-image:none;
 outline:0;
 -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
 box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
}

.btn-block {
  display: block;
  width: 100%;
}

button,
input,
optgroup,
select,
textarea {
 margin:0;
 font:inherit;
 color:inherit
}
button {
 overflow:visible
}
button,
select {
 text-transform:none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
 -webkit-appearance:button;
 cursor:pointer
}
button[disabled],
html input[disabled] {
 cursor:default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
 padding:0;
 border:0
}
input {
 line-height:normal
}

.collapse {
 display:none
}
.collapse.in {
  display: block
}
tr.collapse.in {
  display: table-row
}
tbody.collapse.in {
  display: table-row-group
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
  transition-property: height, visibility
}

:root {
  --swiper-theme-color: #007aff;
}
:root {
  --swiper-navigation-size: 44px;
}