@charset "UTF-8";
/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*Focus Template Layout*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*設定*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700");.mincho {
font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

.gothic {
        font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }

section {
        padding-top: 30px;
}

html {
        overflow-x: hidden; }

body {
        font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
        line-height: 1.4;
        font-weight: normal;
        margin: 0px;
        /*background-image: url(../img/bg.png);*/
        background-attachment: fixed;
        background-size: auto;
        background-repeat: repeat;
        max-width: 600px;
        margin: auto;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
}

.wrap {
        margin-bottom: 20%;
}

.Input-frame{
        height: 40px;
        margin-bottom: 2%;
        background-color: #f1f1f1;
        border: none;
        box-sizing: border-box;
        width: 100%;
}

/*---ヘッダー開始---*/
#header{
        padding: 9px;
        background-color: #757575;
        display: flex;
        height: 55px;
}

.headertxt{
        color: #fff;
        margin-left: 2%;
        margin: 7px 0px 0px 15px;
}

.text-small{
        font-size: 12px;
        display: block;
}

.fa-info-circle{
        content: "\f05a";
        font-size: 3em;
        margin-top: 5px;
        color: #fff;
}
/*---ヘッダー終了---*/


/*---トップ開始---*/
.main{
        padding: 0px 4%;
        margin-top: 5%;
}

.proform{

}

.fa-user:before{
        content: "\f007";
        padding-right: 4px;
}

.title i{
        color: #757575;
}

.title{
        padding-bottom: 7%;
}

.proform .td-title{
        width: 30%;
        text-align: center;
        vertical-align: top;
}

.proform .td-summary{
        width: 100%;
        display: flex;
        margin-top: 10px;
}

.proform table{
        border-spacing:0px 30px;
}

.proform p{
         font-weight: bold;
         font-size: 12px;
}

.proform .proset h1{
        font-size: 1.2em;
        font-weight: 500;
        color: #828282;
}

.proform .proset .td-title{
         text-align: left;
         width: 10%;
}

.proform  .required{
        background-color: #ff0000;
        padding: 4.6px 8px;
        color: #fff;
        font-weight: lighter;
        border-radius: 20px;
        font-size: 12px;
        margin-right: 3%;
}

.proform  .note{
        font-size: 8px;
        color: #f00;
        font-weight: lighter;
        text-align: left;
}

.proform  .sec1{
        display: flex;
        padding-bottom: 4%;
}

/*.proform .sec1 .left{
        width: 90%;
        line-height: 0.4rem;
}*/

.proform .sec1 .right{
        margin-top: 2px;
        width: 100%;
}


.proform  .sec2{
        display: flex;
        padding-bottom: 4%;
}

/*.proform .sec2 .left{
        width: 90%;
        line-height: 0.4rem;
}*/

.proform .sec2 .right{
        margin-top: 2px;
        width: 100%;
}

.proform .sec2 .radio{
        width: 100%;
        font-size: 12px;
}

.proform  .sec3{
        display: flex;
        padding-bottom: 4%;
}

/*.proform .sec3 .left{
        width: 90%;
        line-height: 0.4rem;
}*/

.proform .sec3 .right{
        margin-top: 2px;
        width: 100%;
}

.proform .sec3 .right select{
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        font-size: 1em;
        border: none;
        border-radius: 0;
        padding: 0px;
        background: #f1f1f1;
}

.proform  .sec4{
        display: flex;
        padding-bottom: 4%;
}

/*.proform .sec4 .left{
        width: 90%;
        line-height: 0.4rem;
}*/

.proform .sec4 .right{
        margin-top: 2px;
        width: 100%;
}

.left{
        width: 80%;
        line-height: 0.4rem;
}

.btnarea{
        background-color: #f00;
        margin: auto;
        width: 70%;
        border-radius: 30px;
}

.btn{
        text-decoration: none;
        text-align: center;
        color: #fff;
}

.btn p{
        font-size: 16px;
         font-weight: bold;
         padding: 10px;
         margin-bottom: 4%;
}

.note{
        text-align: center;
        color: #f00;
        margin: 0px;
        font-size: 8px;
}

.article{

}

.article a{
        text-decoration: none;
        color: #000;
}

.article .sec1{
        display: flex;
        padding: 20px 4px;
        margin-top: 10%;
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
}

.article .sec2{
        display: flex;
        padding: 20px 4px;
        border-bottom: 1px solid #f1f1f1;
}

.article .btntxt{
        width: 100%;
        text-align: left;
        font-size: 16px;
}

/*---トップ終了---*/

/*---ページ範囲開始---*/
.terms,.privacy,.trans{
        padding: 10px;
}
/*---ページ範囲終了---*/

/*---ページタイトル開始---*/
.title{
        display: flex;
        padding-bottom: 7%;
        font-weight: bold;
}

.title a{
        text-align: left;
        margin-top: 1%;
}

.title p{
        font-size: 1.3em;
        margin: auto;
}
/*---ページタイトル終了---*/

/*---特商法画像アップ開始---*/
.trunspic-up{
        margin-top: 20%;
}

.trunspic{
#        padding: 30% 0px;
#        background-image:url(../img/blog_colmun1.png);             /* 画像のURLを指定       */
#        background-repeat:  no-repeat;                /* 画像の繰り返しを指定  */
        width:auto;
}

.txt{
        width: 70%;
        font-size: 12px;
        margin: 7% auto 0%;
}

.pic-up {
        background: #ff0002;
        color: #fff;
        cursor: pointer;
        padding: 10px 0px;
        width: 70%;
        display: inline-block;
        font-weight: bold;
        border-radius: 50px;
}
label.filelabel input {
        display: none;
}

.filepic{
        margin-top: 5%;
        margin-bottom: 5%;
        text-align: center;
}

.skip{
        font-size: 12px;
        margin: 8% 0%;
        text-align: center;
}
/*---特商法画像アップ終了---*/

/*---年齢認証開始---*/
.age .title{
        border-bottom: 1px solid #000;
        padding-bottom: 0%;
}

.age-body{
        padding: 5% 20px;
}

.age-caption{
        font-size: 14px;
        border-bottom: 1px solid #f1f1f1;
}

.age-txt{
        font-size: 12px;
        padding-bottom: 5%;
}

.agesec{
        display: flex;
}

.agepic1{
        background-color: black;
        width: 80%;
        height: 120px;
        margin-right: 5%;
        background-image:url(../img/age_varification_1.png);
}

.agepic2{
        background-color: black;
        width: 80%;
        height: 120px;
        margin-right: 5%;
        background-image:url(../img/age_varification_2.png);
}

.agepic3{
        background-color: black;
        width: 80%;
        height: 120px;
        margin-right: 5%;
        background-image:url(../img/age_varification_3.png);
}
/*---年齢認証終了---*/

/*---プロフ２開始---*/
.prof2-top{
        text-align: center;
        background-color: #e2e2e2;
        padding: 3% 0px;
}
.selectbox {
        width: 80%;
        position: relative;
        margin-left: auto;
    }
    select{
      -webkit-appearance:none;
        appearance:none;
      width:100%;
      padding:1em 1em;
      box-sizing:border-box;
      font-size:1em;
      border:#ccc 1px solid;
      border-radius:0;
      background:#fff;
    }
    .selectbox::after{
      content:"";
      display:block;
      width:10px;
      height:10px;
      position:absolute;
      right:5%;
      top:35%;
      border-bottom:#333 2px solid;
      border-right:#333 2px solid;
      transform:rotate(45deg)translateY(-30%);
    }
    .color.selectbox select{
      background:blue;
      color:#fff;
      border-radius:2em;
    }
    .color.selectbox::after{
      border-bottom:#fff 5px solid;
      border-right:#fff 5px solid;
    }

.selectarea{
        display: flex;
        padding: 3% 0;
        border-bottom: 1px solid #f1f1f1;
}
/*---プロフ２終了---*/
textarea {
        width: 100%;
        height: 13em;
        resize: none;
        box-sizing: border-box;
        border: none;
        background-color: #f1f1f1;
        font-size: 16px;
}

.textarea{
        padding-top: 5%;
}

.regist-photo {
    width: 100%;
}

/*---メアド入力---*/
.mail p{
        margin: auto;
}

.mail input{
        width: 100%;
        box-sizing: border-box;
        line-height: 1.7rem;
        border: 1px solid #ddd;
        background-color: #fffcf9;
}