@charset "UTF-8";

/*-------------------------------------------------------------------------
  Clearfix
/*-----------------------------------------------------------------------*/
#jp-utasuki section,
#jp-utasuki article,
#jp-utasuki figure,
#jp-utasuki nav,
#jp-utasuki aside,
#jp-utasuki header,
#jp-utasuki footer,
#jp-utasuki div,
#jp-utasuki ul,
#jp-utasuki dl {
  zoom: 1;
}

#jp-utasuki section:after,
#jp-utasuki article:after,
#jp-utasuki figure:after,
#jp-utasuki nav:after,
#jp-utasuki aside:after,
#jp-utasuki header:after,
#jp-utasuki footer:after,
#jp-utasuki div:after,
#jp-utasuki ul:after,
#jp-utasuki dl:after,
#jp-utasuki form:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

/*-	jp-utasuki
-----------------------------------------------------------------------*/
#jp-utasuki {
	width: 1030px;
	margin:0;
  	padding:0;
      margin-top: 20px
}

#jp-cmp-wrap,
#jp-cmp-main {
background: url(../img/bg_mypage.png) !important;
}

/*- jp-utasuki-main
-----------------------------------------------------------------------*/
#jp-utasuki.jp-cmp-box-001 {
  margin-bottom: 30px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fcf8ef;
  -ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
@media screen and (min-width:768px){
  #jp-utasuki.jp-cmp-box-001 {
    padding: 20px;
  }
  #jp-cmp-topicpath + #jp-utasuki.jp-cmp-box-001 {
    margin-top: 20px;
  }
}
@media screen and (max-width:767px){
  #jp-utasuki.jp-cmp-box-001 {
    margin: 0 auto 10px;
    padding: 20px 10px;
    width: 95%;
  }
  #jp-cmp-topicpath + #jp-utasuki.jp-cmp-box-001 {
    margin-top: 10px;
  }
  #jp-utasuki.jp-cmp-box-001.jp-cmp-box-004 {
    margin: 0 3% 10px;
    padding: 15px 0 0;
  }
}


#jp-utasuki #jp-utasuki-main {
	position:relative;
  	margin-bottom: 20px;
}

  #jp-utasuki #jp-utasuki-main h1 {
  }

    #jp-utasuki #jp-utasuki-main h1 img {
      width: 100%;
      height: 100%;
    }


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

	#jp-utasuki {
		width:100%;
	}

}

/*- jp-utasuki-login
-----------------------------------------------------------------------*/

  #jp-utasuki .jp-utasuki-content {
    margin-bottom:60px;
    padding:40px;
  }

    #jp-utasuki .jp-utasuki-content .jp-utasuki-login {
      width: 100%;
      text-align: center;
    }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login h3 {
        margin-bottom:30px;
        text-align:center;
        color: #6f4536;
        font-size:28px;
        font-weight:bold;
        display: inline-block;
        border-bottom: 5px solid #b68979;
      }

    #jp-utasuki .jp-utasuki-content .jp-utasuki-login-flow {
      margin-bottom: 55px;
    }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-flow li {
        display: inline-block;
        text-align: center;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-flow li.jp-utasuki-login-flow-box {
        width: 200px;
        padding: 15px 0;
        margin-right: 3%;
        background: #6f4536;
        border-radius: 10px;
        font-size: 23px;
        font-weight: bold;
        color: #fff;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-flow li.jp-utasuki-login-flow-delta {
        width: 0;
        height: 0;
        position: relative;
        top: 7px;
        margin-right: 0px;
        margin-left: -5px;
        margin-top: 5px;
        border: 15px solid transparent;
        border-left: 15px solid #f9dd25;
      }

    #jp-utasuki .jp-utasuki-content .jp-utasuki-login-btn {
      font-size: 20px;
      margin-bottom: 55px;
    }

      #jp-utasuki .jp-utasuki-content .jp-cmp-sub-login-detail-btn a {
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 20px 10px 18px 30px;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -ms-border-radius: 3px/3px 3px 3px 3px;
        -moz-border-radius: 3px/3px 3px 3px 3px;
        -webkit-border-radius: 3px/3px 3px 3px 3px;
        border-radius: 3px/3px 3px 3px 3px;
        background: #fe9900 url(../img/sub-ico-lock-002.png) 10px 46% no-repeat;
        color: #fff;
        font-size: 110%;
        font-weight: bold;
        text-align: center;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-btn .jp-cmp-sub-login-detail-btn a {
        text-align: center;
        width: 300px;
      }

      #jp-utasuki .jp-utasuki-content .jp-cmp-sub-login-detail-btn a:hover {
        text-decoration: none;
        filter: alpha(opacity=75);
        -moz-opacity:0.75;
        opacity: 0.75;
      }

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

  #jp-utasuki .jp-utasuki-content {
    padding:0;
  }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login h3 {
        font-size: 23px;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-flow li.jp-utasuki-login-flow-box {
        width: 29%;
        font-size: 100%;
        padding: 15px 0;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-flow li.jp-utasuki-login-flow-delta {
        width: 0;
        height: 0;
        position: relative;
        top: 0px;
        border: 5px solid transparent;
        border-left: 5px solid #f9dd25;
        margin-right: 0px;
        margin-left: -5px;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-login-btn .jp-cmp-sub-login-detail-btn a {
        width: auto;
        font-size: 90%;
      }

}

/*- jp-utasuki-content-box
-----------------------------------------------------------------------*/

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box {
        padding: 30px;
        margin-bottom:60px;
        border-radius:6px;
        border:3px solid #e5d1ca;
        background: #fff;
      }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead {
          background: url(../img/bg_lead.png) no-repeat right;
        }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead img {
            float: left;
            margin-right: 30px;
          }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead p.jp-utasuki-content-box-lead-txt {
            padding-top: 15px;
            color: #501d0b;
            font-size: 26px;
            font-weight: bold;
          }

            #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead p.jp-utasuki-content-box-lead-txt span {
              color: #e60012;
              font-weight: bold;
            }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-inner {
            width: 100%;
            margin-bottom: 35px;
          }

            #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-inner ul {
              width: 90%;
              margin: 0 auto;
            }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner-list-text {
        margin-top: 55px;
        margin-bottom:20px;
      }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner-list-text p {
          font-size:19px;
          width:310px;
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner-list-left .jp-utasuki-content-box-inner-list-text {
          float: left;
          background: url(../img/bg001.png) no-repeat;
          width: 378px;
          padding-top: 60px;
          padding-bottom: 60px;
          padding-left: 50px;
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner-list-right .jp-utasuki-content-box-inner-list-text {
          float: right;
          background: url(../img/bg002.png) no-repeat;
          width: 378px;
          padding-top: 50px;
          padding-bottom: 50px;
          padding-left: 70px;
        }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-catch {
        background: url(../img/bg003.png) no-repeat bottom;
      }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-catch img {
          margin-bottom: 35px;
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-catch-txt p {
          text-align: center;
          font-size: 23px;
          font-weight: bold;
        }

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

      #jp-utasuki .jp-utasuki-content h3 {
       margin-bottom:15px;
       padding:0;
       font-size:19px;
       text-align:left;
     }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box {
       padding: 20px;
      }

    #jp-utasuki .jp-utasuki-content-box-lead-img {
      width: 100%;
    }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead {
          background-size: 25%;
          background-position: top right;
        }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead .jp-utasuki-content-box-lead-img {
            text-align: center;
          }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead img {
            float: none;
          }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-lead p.jp-utasuki-content-box-lead-txt {
            font-size: 19px;
          }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box .jp-utasuki-content-box-inner ul {
            width:100%;
          }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner .jp-utasuki-content-box-inner-list-text {
          background: #f9f1df;
          width: auto;
          padding: 20px;
          margin-bottom: 20px;
          border-radius: 10px;
        }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner .jp-utasuki-content-box-inner-list-text p {
            width: auto;
            margin-bottom: 0;
          }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-inner .jp-utasuki-content-box-inner-list-img {
          width: 80%;
          margin: 0 auto;
        }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-catch {
        background: none;
      }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-catch-txt p {
          font-size: 19px;
          text-align: left;
        }

}

/*- jp-utasuki-content-link-box
-----------------------------------------------------------------------*/

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner {
          padding:60px 20px 20px 20px;
        }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li {
            float: left;
            width: 330px;
            margin-right: 15px;
          }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li:last-child {
            margin-right: 0px;
          }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li a {
            display: block;
            border: 3px solid #c0a9a0;
            padding: 20px 10px;
            width: 290px;
            background: url(../img/arrow.png) no-repeat right;
            background-position: 95%;
          }

              #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li a p {
               color: #6f4536;
               float: left;
               font-size: 18px;
               font-weight: bold;
               line-height: 1.1;
              }

            #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li p.jp-utasuki-content-box-inner-list-btn-txt {
              padding-top: 10px;
              padding-left: 10px;
            }

            #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li p.jp-utasuki-content-box-inner-list-btn-txt.jp-utasuki-content-box-inner-long-txt {
              padding-top: 2px;
              padding-left: 10px;
            }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner-txt {
          margin: 10px 0;
          font-size: 15px;
          font-weight: bold;
          text-align: center;
        }

            #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner-txt span {
              font-weight: bold;
              color: #e60012;
            }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-happy,
      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-useful {
        margin-bottom:60px;
        border-radius:6px;
        background: #fff;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-happy {
        border:3px solid #f7df40;
      }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-useful {
        border:3px solid #fec5dd;
      }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-happy h4,
        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-useful h4 {
          padding:10px;
          color: #501d0b;
          font-size:30px;
          font-weight:bold;
          text-align: center;
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-happy h4 {
          background: url(../img/bg_happy.gif);
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-useful h4 {
          background: url(../img/bg_useful.gif);
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner ul{
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
        }


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

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-happy h4,
        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box-useful h4 {
          font-size:20px;
        }

      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-box,
      #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box {
        margin-bottom:30px !important;
      }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner {
          padding: 20px;
        }

        #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner ul{
          display: block;
        }

          #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li {
            width: 100%;
          }

            #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li a {
              width: auto;
            }

              #jp-utasuki .jp-utasuki-content .jp-utasuki-content-link-box .jp-utasuki-content-box-inner li a p {
                font-size: 15px;
              }

}