@charset "UTF-8";

/*==================
共通設定 ＆ 凡用クラス
==================== */

@media screen and (min-width: 960px) { /*ウィンドウ幅が960px以上の場合に適用*/
    html{
        font-size: 62.5%;
    }
    .yo{
            text-align: center;
            font-size: 1rem;
            letter-spacing: 0.4em;
            color: #999;
    }
    span{
        color: black;
    }
    .copy{
        text-align: center;
        font-size: 1.2rem;
        letter-spacing: 0.2em;
    }
    body{
        font-size: 1.6rem;
        font-family: 'Georgia',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
        line-height: 2;
        font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
        color: #333;
    }
    a{
        text-decoration: none;
    }
    a:hover{
        opacity: 0.6;
    }
    .title{
        text-align: center;
        font-size: 2.6rem;
        margin-bottom: 30px;
        line-height: 1;
    }
    .btn{
        margin: 30px;
        font-weight: bold;
        font-size: 1.6rem;
    }
    .btn a{
        display: block;
        background-color: #3cad5a;
        width: 80%;
        max-width: 270px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: #fff;
        line-height: 70px;
        border-radius: 5px;
    }
    b{
        border-bottom: 1px solid black;
    }
    .to_top{
        font-size: 4rem;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        background-color: #eee;
        width:50px;
        height:50px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor: pointer;
      }
      .lang{
          font-size: 0.7em;
      }
      .flex{
        display: flex;
    }
    /*==================
    ヘッダー ＆ メニュー
    ==================== */
    header{
        width: 20%;
    }
    .sticky{
        position: sticky;
        top: 0;
    }
    .tnav nav{
       margin: 50px 30px;
    }
    .tnav p{
        margin: 0px 30px;
    }
    .now a{
        /* font-weight: 900; */
        border-bottom: 0.5px solid;
        padding-bottom: 4px;
    }
    header div{
        /* display: flex;
        justify-content: space-between;
        align-items: center; */
    }
    header div ul li{
        /* display: inline;
        margin-right: 20px; */
    }
    header div ul li a{
        /* color: #333; */
    }
    h1{
        line-height: 1.5;
        letter-spaciem;
        /* font-size: 50px; */
        font-size: 4rem;
        margin: 0 20px;
        text-align: left;
        /* word-wrap: break-word; */
    }
    a{
        color: #333;
    }
    /*==================
    フッター
    ==================== */
    footer .inner{
        font-size: 1rem;
        text-align: left;
        letter-spacing: 0.4em;
    }
    .fnav{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90%;
        margin: 50px auto auto auto;
    }
    .ti{
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.4em;
        margin: 0 0 5px 0;
    }
    .ti1{
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.4em;
        margin: 0 0 5px 0;
        margin-left: 20%;
    }
    .na{
        margin: 10px;
    }
    .na1{
        margin: 10px;
    }
    .na2{
        margin: 10px;
    }
        /* Twitterマウスホバー時 */
        .flowbtn10 .fa-twitter:hover{
        color:#55acee;
        }
        /* Instagramマウスホバー時 */
        .flowbtn10 .fa-instagram:hover{
        color:#c6529a;
        }
        /* Facebookマウスホバー時 */
        .flowbtn10 .fa-facebook-f:hover{
        color:#55acee;
        }
        /* YouTubeマウスホバー時 */
        .flowbtn10 .fa-youtube:hover{
        color:#fc0d1c;
        }
        /* LINEマウスホバー時 */
        .flowbtn10 .fa-line:hover{
        color:#00c300;
        }
        .flowbtn10 .fa-linkedin-in:hover{
            color: #2867B2;
        }
        /* ulタグの内側余白を０にする */
        ul.snsbtniti{
        /* padding:0!important; */
        }
        /* アイコン全体の位置 */
        .snsbtniti{
        /* display:flex;
        flex-flow:nowrap;
        justify-content:space-between;	 */
        }
        /* アイコン同士の余白 */
        .snsbtniti li{
        /* flex:0 0 33%;
        text-align:center!important; */
        }
        form{
            text-align: center;
        }
    form{
        margin: 10px;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    form li + li {
        margin-top: 1em;
    }
    label {
        /* すべてのラベルを同じサイズにして、きちんと揃える */
        display: inline-block;
        width: 80px;
        text-align: left;
    }
    input, textarea {
        /* すべてのテキストフィールドのフォント設定を一致させる
            デフォルトで、textarea は等幅フォントが設定されている */
        font: 1em sans-serif;
        /* すべてのテキストフィールドを同じサイズにする */
        width: 300px;
        box-sizing: border-box;
        /* テキストフィールドのボーダーの外見を同一にする */
        border: 1px solid #999;
    }
    input #botan{
        width: 40px;
    }
    input:focus,
    textarea:focus {
        /* アクティブな要素を少し強調する */
        border-color: #000;
    }
    textarea {
        /* 複数行のテキストフィールドをラベルにきちんと揃える */
        vertical-align: top;
        /* テキスト入力に十分な領域を与える */
        height: 5em;
    }
    .button {
        /* ボタンを他のテキストフィールドと同じ場所に置く */
        /* label 要素と同じサイズ */
        /* padding-left: 90px; */
        text-align: center;
        margin-left: 26%;
    }
    .botan{
        text-align: center;
    }
    .botan1{
        text-align: center;
        /* border: 1px solid black; */
    }
    button {
        /* このマージンは、ラベルとテキストフィールドの間のスペースと
            おおよそ同じスペースを表す */
        /* margin-left: .5em; */
    }
    /*==================
    メイン
    ==================== */
    main{
        width: 80%;
        margin: auto;
    }
    .inner{
        text-align: center;
    }
    .inner p img{
    }
    .fx{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

    }
    .jp1{
        display: inline-block;
        width: 105px;
    }
    .jp{
        position: absolute;
        right: 0;
        z-index: 1;
        margin: 20px 50px 0 0;
        color: #a7542a;
        display: none;
    }
    .jp a{
        color: #a7542a;
    }
    .per{
        position: relative;
    }
    .per img{
        width: 100%;
    }
    .per p{
        margin-bottom: 30px;
    }
    .the{
        width: 49%;
    }
    .the p{
        margin-bottom: 30px;
    }
    .cos{
        width: 49%;
    }
    .cos p{
        margin-bottom: 30px;
    }
    /* .cos img{
        width: 100%;
        height: 70%;
    } */
    .bac p{
        margin-bottom: 30px;
        /* width: 50%;
        height: auto;
        margin-top: -13%; */
    }
    .jake{
        width: 49%;
    }
    .aya{
        width: 49%;
        /* margin-left: 60%;
        margin-top: -34%; */
    }
    /*==================
    ABOUT
    ==================== */
    .self{
        /* width: 30%;
        margin: 10px auto 40px auto; */
    }
    .abo img{
        /* height: 100vh; */
    /* height: 930px; */
    }
    .abo{
        width: 49%;
    }
    /* .about{
        width: 100%;
        margin: auto;
    } */
    .about h2{
        display: inline;
    }
    .left{
        margin-bottom: 30px;
        text-align: left;
        margin-right: 30px;
    }
    .right{
        margin-right: 30px;
        text-align: right;
    }
    .text{
        margin: 10px 10px;
    }
    .text1{
        margin: 70px;
        color: #999;
    }
    .text2{
        font-size: 0.7em;
    }
    /*==================
    JOURNAL
    ==================== */
    /* .df-jl{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .jl{
        width: 45%;
        height: auto;
        margin: 0 auto auto auto;
    }
    .jl1{
        width: 45%;
        height: auto;
        padding-top: 350px;
        margin: 0 auto auto auto;
    }
    .jl2{
        width: 45%;
        height: auto;
        margin: 0 auto auto auto;
    }
    .jl3{
        width: 45%;
        height: auto;
        padding-top: 350px;
        margin: 0 auto auto auto;
    }
    .jl4{
        width: 45%;
        height: auto;
        margin: 0px auto auto auto;
    }
    .jl5{
        width: 45%;
        height: auto;
        padding-top: 350px;
        margin: 0 auto auto auto;
    }
    .jl6{
        width: 45%;
        height: auto;
        margin: 0 auto auto auto;
    }
    .jl7{
        width: 45%;
        height: auto;
        padding-top: 550px;
        margin: 0 auto auto auto;
    }
    .jl8{
        width: 45%;
        height: auto;
        margin: 0 auto auto auto;
    }
    .jl9{
        width: 45%;
        height: auto;
        padding-top: 250px;
        margin: 60px auto auto auto;
    } */
    .journaltop img{
        width: 100%;
        /* height: 1334px; */
    }
    .jou{
        width: 45%;
        margin: 5px;
        text-align: left;
        margin-right: 30px;
        margin-bottom: 30px;
    }
    .jouimg{
        width: 49%;
        /* width: 32vw; */
        /* height: 0vh; */
    }
    .jouimg img{
        width: 100%;
        /* height: 100vh; */
    }
    .joute{
        text-align: left;
        margin: 20px 30px 20px 0;
    }
   /*==================
    THE BIBIO PROJECT
    ==================== */
    .tb{
        width: 1400px;
        margin: 30px auto;
    }
    .tb1{
        width: 600px;
        margin: auto;
    }
    .tb2{
        width: 600px;
        margin: auto;
    }
    .tb2 img{
        width: 100%;
        height: auto;
        /* height: 40vh; */
    }
    .tb3{
        width: 100%;
        margin: 40px auto;
    }
    .tb3 img{
        /* width: 50vw; */
    }
    .tb4{
        width: 80%;
        height: auto;
        margin: auto;
    }
    .tb5{
        width: 80%;
        height: auto;
        margin: auto;
    }
    .tb7{
        margin: 40px;
        width: 25vw;
    }
    /*==================
    COS
    ==================== */
    .co{
        margin: auto;
        width: 74%;
    }
    .co1{
        margin: 50px;
    }
    .co4{
        margin: 30px;
    }
    .co6{
        margin: 30px;
    }
    .co7{
        margin: 30px;
    }
    .co9{
        width: 40%;
        margin: 30px auto;
    }
    /*==================
    BACHELOR’S DEGREE
    ==================== */
    .ba{
        width: 100%;
        margin-bottom: 10px;
    }
    .ba img{
        width: 100%;
    }
    .batext{
        margin-right: 30px;
        margin-bottom: 30px;
    }
    .ba1{
        width: 49%;
    }
    .ba1 img{
        width: 110%;
        /* height: 100vh; */
    }
    .batext1{
        margin-bottom: 30px;
    }
    /* .bo{
        width: 100%;
        margin: auto;
    }
    .bo1{
        margin: 30px auto;
    }
    .bo1 img{
        width: 1000px;
    }
    .bo2{
        margin: 30px auto;
    }
    .bo3{
        margin: 30px auto;
    }
    .bo4{
        width: 70%;
        margin: 30px auto;
    }
    .bo5{
        margin: 30px;
    }
    .bo6{
        margin: 40px;
    }
    .bo7{
        margin: 40px;
    }
    .bo8{
        margin: 40px;
    }
    .bo9{
        width: 90%;
        margin: 30px 30px 0 30px;
    } */
    /*==================
    PERSONAL
    ==================== */
    .pe{
        width: 100%;
        /* margin: 10px auto; */
    }
    .pe img{
        width: 100%;
    }
    .petext{
        text-align: left;
        margin-right: 30px;
        margin-bottom: 30px;
    }
    .petext1{
        margin-bottom: 30px;
    }
    .wrap{
       display: flex;
       flex-wrap: nowrap;
    }
    .pe1{
        width: 49%;
    }
    .pe1 img{
        width: 100%;
        /* height: 100vh; */
    }
    .pe2{
        margin-top: 30px;
        width: 32.5%;
    }
    .pe2 img{
        width: 100%;
        /* height: 70vh; */
    }
    /*==================
    JAKE RANFORD
    ==================== */
    .jr{
        width: 90%;
       margin: auto;
    }
    .jr1{
        width: 50%;
        margin: 30px auto 15px auto;
    }
    .jr2{
        width: 90%;
        margin: 15px auto;
    }
    .jr3{
        width: 50%;
        margin: 15px auto;
    }
    .jr4{
        width: 90%;
        height: auto;
        margin: auto;
    }
    .jr5{
        width: 90%;
        margin: 30px auto;
    }
    .jr6{
        width: 90%;
        margin: 30px auto;
    }
    .jr7{
        width: 90%;
        margin: 30px auto;
    }
    .jr8{
        width: 90%;
        margin: 30px auto;
    }
    .jr9{
        width: 90%;
        margin: 30px auto;
    }
    .jr10{
        width: 90%;
        margin: 40px auto;
    }
    .jr11{
        width: 90%;
        margin: 30px auto;
    }
    /*==================
    AYA BRACE
    ==================== */
    .df-ab{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .ab{
        width: 45%;
        margin: 0 auto auto auto;
    }
    .ab1{
        width: 45%;
        padding-top: 200px;
        margin: 0 auto auto auto;
    }
    .ab2{
        width: 45%;
        margin: 0 auto auto auto;
    }
    .ab3{
        width: 45%;
        padding-top: 250px;
        margin: 0 auto auto auto;
    }
    .df-ab1{
        display: flex;
    }
    .ab4{
       width: 60%;
      margin: 20px;
    }
    .ab5{
       width: 55%;
       margin: 20px;
       margin-top: 250px;
    }
    .ab6{
        margin: 50px 50px 0 50px;
    }
    .ab6 img{
        width: 100%;
        height: auto;
    }
    /*==================
    STORE
    ==================== */
    .store{
        text-align: center;
        line-height: 550px;
    }
    .storejp{
        text-align: center;
        line-height: 550px;
    }
}





/*==================
600px以下に反映
==================== */

@media screen and (max-width: 559px) {
    html{
        font-size: 62.5%;
    }
    body{
        font-family: 'Georgia',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
        font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
        line-height: 2;
        color: #333;
    }
    /* .fx{
        display: block;
    } */
    .joute{
        text-align: left;
    }
    .fxph{
        display: flex;
    }
    .fxph li{
        display: block;
        width: 100%;
        text-align: left;
        margin: 10px;
    }
    .per p{
        text-align: center;
    }
    .jouph{
        margin-top: 10px;
        margin-left: 20px;
    }
    .jouph1{
        margin: 0 20px;
        text-align: left;
    }
    .jou{
        margin-left: 20px;
    }
    .petext1{
        margin-top: 0;
    }
    .headertextph{
        margin: 10px;
    }
    .yo{
        text-align: center;
        /* font-size: 1rem;
        letter-spacing: 0.4em; */
        color: #999;
    }
    span{
        color: black;
    }
    .title{
        font-size: 2.6rem;
        margin-bottom: 30px;
        line-height: 1;
    }
    .btn{
        margin: 30px;
        font-weight: bold;
        font-size: 1.6rem;
    }
    .btn a{
        display: block;
        background-color: #3cad5a;
        width: 80%;
        max-width: 270px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: #fff;
        line-height: 70px;
        border-radius: 5px;
    }
    b{
        border-bottom: 1px solid black;
    }
    .to_top{
        font-size: 4rem;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        background-color: #eee;
        width:50px;
        height:50px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor: pointer;
      }
    /*==================
    ヘッダー ＆ メニュー
    ==================== */
    header{
        /* position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        background-color: rgba(255,255,255,0.8); */
    }
    .tnav{
        width: 95%;
        height: auto;
        margin: auto;
    }
    header div ul li{
        display: inline;
        margin-right: 20px;
    }
    header div ul li a{
        color: #333;
    }
    h1{
        width: 100%;
        text-align: center;
        font-size: 2.8rem;
    }
    .tnav h1 a{
        /* color: #dd0000; */
    }
    /* .headertext{
        display: none;
    } */
    a{
        color: #333;
        text-decoration: none;
    }
    .tnav nav{
        text-align: center;
        margin: -10px;
    }
    .tnav nav ul li{
        font-size: 1.4rem;
    }
    .tnav nav ul .lang{
        font-size: 1rem;
    }
    .fx div{
        margin: 20px;
        /* text-align: center; */
        text-align: left;
    }
    .fx div .petext1{
        /* text-align: left; */
        text-align: center;

    }
    .fx .tb7{
        margin: 0 20px;
    }
    /*==================
    フッター
    ==================== */
    footer .inner{
        font-size: 1rem;
        text-align: left;
        letter-spacing: 0.4em;
    }
    .fnav{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin: auto;
    }
    .ti{
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.4em;
        margin: 0 0 5px 0;
    }
    .ti1{
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.4em;
        margin: 0 0 5px 0;
        text-align: center;
    }
    .na{
        margin: 10px;
    }
    .na1{
        margin: 10px;
    }
    .na2{
        margin: 10px;
    }
    .copy{
        text-align: center;
    }
        /* Twitterマウスホバー時 */
        .flowbtn10 .fa-twitter:hover{
        color:#55acee;
        }
        /* Instagramマウスホバー時 */
        .flowbtn10 .fa-instagram:hover{
        color:#c6529a;
        }
        /* Facebookマウスホバー時 */
        .flowbtn10 .fa-facebook-f:hover{
        color:#55acee;
        }
        /* YouTubeマウスホバー時 */
        .flowbtn10 .fa-youtube:hover{
        color:#fc0d1c;
        }
        /* LINEマウスホバー時 */
        .flowbtn10 .fa-line:hover{
        color:#00c300;
        }
        /* ulタグの内側余白を０にする */
        ul.snsbtniti{
        /* padding:0!important; */
        }
        /* アイコン全体の位置 */
        .snsbtniti{
        /* display:flex;
        flex-flow:nowrap;
        justify-content:space-between;	 */
        }
        /* アイコン同士の余白 */
        .snsbtniti li{
        /* flex:0 0 33%;
        text-align:center!important; */
        }
    form{
        width: 80%;
        margin: auto;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    form li + li {
        margin-top: 1em;
    }
    label {
        /* すべてのラベルを同じサイズにして、きちんと揃える */
        display: inline-block;
        width: 80px;
        /* text-align: left; */
    }
    .jp{
        display: none;
    }
    .jp1{
        display: inline-block;
        width: 105px;
    }
    input, textarea {
        /* すべてのテキストフィールドのフォント設定を一致させる
            デフォルトで、textarea は等幅フォントが設定されている */
        font: 1em sans-serif;
        /* すべてのテキストフィールドを同じサイズにする */
        width: 300px;
        box-sizing: border-box;
        /* テキストフィールドのボーダーの外見を同一にする */
        border: 1px solid #999;
    }
    input:focus,
    textarea:focus {
        /* アクティブな要素を少し強調する */
        border-color: #000;
    }
    textarea {
        /* 複数行のテキストフィールドをラベルにきちんと揃える */
        vertical-align: top;
        /* テキスト入力に十分な領域を与える */
        height: 5em;
    }
    .button {
        /* ボタンを他のテキストフィールドと同じ場所に置く */
        /* label 要素と同じサイズ */
        /* padding-left: 90px; */
        text-align: center;
    }
    button {
        /* このマージンは、ラベルとテキストフィールドの間のスペースと
            おおよそ同じスペースを表す */
        margin-left: .5em;
    }
    footer{
        margin: 0 20px;
    }
    /*==================
    PERSONAL
    ==================== */
    .pe{
        margin: 20px;
    }
    .pe1{
        margin: 20px;
    }
    .df-co div{
        margin: 20px;
    }
    .df-jr div{
        margin: 20px;
    }
    .cf-bo div{
        margin: 20px;
    }
    .df-ab div{
        margin: 20px;
    }
    .df-jl div{
        margin: 20px;
    }
    .store{
        text-align: center;
        padding: 80px;
    }
    .storejp{
        text-align: center;
        padding: 80px;
    }
    .ab4{
        margin: 20px;
    }
    .ab5{
        margin: 20px;
    }
    .ab6{
        margin: 20px 20px 0 20px;
    }
    /*==================
    ABOUT
    ==================== */
    .about h2{
        display: inline;
    }
    .left{
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: left;
    }
    .right{
        text-align: right;
    }
    .text{
        font-size: 1.2rem;
        margin: 20px;
    }
    .text1{
        margin: 70px;
        text-align: center;
        color: #999;
    }
    .text2{
        font-size: 0.7em;
    }
    .about{
        margin: 20px;
    }
}


/*==================
959px以下に反映
==================== */

@media screen and (min-width:560px) and ( max-width:959px) {
    html{
        font-size: 62.5%;
        font-size: 80%;
    }
    body{
        font-family: 'Georgia',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
        font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
        line-height: 2;
        color: #333;
    }
    .fxph{
        display: flex;
    }
    .fxph li{
        display: block;
        width: 100%;
        text-align: left;
        margin: 20px;
    }
    .per p{
        text-align: center;
    }
    .jouph{
        margin-top: 10px;
        margin-left: 20px;
    }
    .jouph1{
        margin: 0 20px;
    }
    .jou{
        margin-left: 20px;
    }
    .petext1{
        margin-top: 0;
    }
    .headertextph{
        margin: 10px;
    }
    .yo{
        text-align: center;
        color: #999;
    }
    span{
        color: black;
    }
    .title{
        font-size: 2.6rem;
        margin-bottom: 30px;
        line-height: 1;
    }
    .btn{
        margin: 30px;
        font-weight: bold;
        font-size: 1.6rem;
    }
    .btn a{
        display: block;
        background-color: #3cad5a;
        width: 80%;
        max-width: 270px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: #fff;
        line-height: 70px;
        border-radius: 5px;
    }
    b{
        border-bottom: 1px solid black;
    }
    .to_top{
        font-size: 4rem;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        background-color: #eee;
        width:50px;
        height:50px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor: pointer;
      }
    /*==================
    ヘッダー ＆ メニュー
    ==================== */
    header{
        /* position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        background-color: rgba(255,255,255,0.8); */
    }
    .tnav{
        width: 95%;
        height: auto;
        margin: auto;
    }
    header div ul li{
        display: inline;
        margin-right: 20px;
    }
    header div ul li a{
        /* color: #333; */
    }
    h1{
        width: 100%;
        text-align: center;
        font-size: 5rem;
    }
    .tnav h1 a{
        /* color: #dd0000; */
    }
    a{
        color: #333;
        text-decoration: none;
    }
    .tnav nav{
        /* text-align: center; */
    }
    .tnav nav ul li{
        font-size: 2rem;
    }
    .tnav nav ul .lang{
        font-size: 1rem;
    }
    .fx div{
        margin: 50px;
        /* text-align: center; */
        text-align: left;
    }
    .fx .tb7{
        margin: 0 20px;
    }
    /*==================
    フッター
    ==================== */
    footer .inner{
        font-size: 1rem;
        text-align: left;
        letter-spacing: 0.4em;
    }
    .fnav{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin: auto;
    }
    .ti{
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.4em;
        margin: 0 0 5px 0;
    }
    .ti1{
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.4em;
        margin: 0 0 5px 0;
        text-align: center;
    }
    .na{
        margin: 20px;
    }
    .na1{
        margin: 20px;
    }
    .na2{
        margin: 20px;
    }
    .copy{
        text-align: center;
    }
        /* Twitterマウスホバー時 */
        .flowbtn10 .fa-twitter:hover{
        color:#55acee;
        }
        /* Instagramマウスホバー時 */
        .flowbtn10 .fa-instagram:hover{
        color:#c6529a;
        }
        /* Facebookマウスホバー時 */
        .flowbtn10 .fa-facebook-f:hover{
        color:#55acee;
        }
        /* YouTubeマウスホバー時 */
        .flowbtn10 .fa-youtube:hover{
        color:#fc0d1c;
        }
        /* LINEマウスホバー時 */
        .flowbtn10 .fa-line:hover{
        color:#00c300;
        }
        /* ulタグの内側余白を０にする */
        ul.snsbtniti{
        /* padding:0!important; */
        }
        /* アイコン全体の位置 */
        .snsbtniti{
        /* display:flex;
        flex-flow:nowrap;
        justify-content:space-between;	 */
        }
        /* アイコン同士の余白 */
        .snsbtniti li{
        /* flex:0 0 33%;
        text-align:center!important; */
        }
    form{
        margin: auto;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    form li + li {
        margin-top: 1em;
    }
    label {
        /* すべてのラベルを同じサイズにして、きちんと揃える */
        display: inline-block;
        width: 80px;
        /* text-align: left; */
    }
    .jp{
        display: none;
    }
    .jp1{
        display: inline-block;
        width: 105px;
    }
    input, textarea {
        /* すべてのテキストフィールドのフォント設定を一致させる
            デフォルトで、textarea は等幅フォントが設定されている */
        font: 1em sans-serif;
        /* すべてのテキストフィールドを同じサイズにする */
        width: 300px;
        box-sizing: border-box;
        /* テキストフィールドのボーダーの外見を同一にする */
        border: 1px solid #999;
    }
    input:focus,
    textarea:focus {
        /* アクティブな要素を少し強調する */
        border-color: #000;
    }
    textarea {
        /* 複数行のテキストフィールドをラベルにきちんと揃える */
        vertical-align: top;
        /* テキスト入力に十分な領域を与える */
        height: 5em;
    }
    .button {
        /* ボタンを他のテキストフィールドと同じ場所に置く */
        /* label 要素と同じサイズ */
        /* padding-left: 90px; */
        text-align: center;
    }
    button {
        /* このマージンは、ラベルとテキストフィールドの間のスペースと
            おおよそ同じスペースを表す */
        margin-left: .5em;
    }
    footer{
        margin: 0 20px;
    }
    /*==================
    PERSONAL
    ==================== */
    .pe{
        margin: 20px;
    }
    .pe1{
        margin: 20px;
    }
    .df-co div{
        margin: 20px;
    }
    .df-jr div{
        margin: 20px;
    }
    .cf-bo div{
        margin: 20px;
    }
    .df-ab{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .df-ab div{
        margin: 20px;
    }
    .df-jl div{
        margin: 20px;
    }
    .store{
        text-align: center;
        padding: 80px;
    }
    .storejp{
        text-align: center;
        padding: 80px;
    }
    .ab{
        width: 40%;
    }
    .ab1{
        width: 40%;
    }
    .ab2{
        width: 40%;
    }
    .ab3{
        width: 40%;
    }
    .ab4{
        margin: 20px 50px;
    }
    .ab4 img{
        width: 100%;
    }
    .ab5{
        margin: 50px 50px;
    }
    .ab6{
        margin: 50px 50px 0 50px;
    }
    /*==================
    ABOUT
    ==================== */
    .about h2{
        display: inline;
    }
    .left{
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: left;
    }
    .right{
        text-align: right;
    }
    .text{
        font-size: 1.2rem;
        margin: 20px;
    }
    .text1{
        margin: 70px;
        text-align: center;
        color: #999;
    }
    .text2{
        font-size: 0.7em;
    }
    .about{
        margin: 20px;
    }
    .cos img{
        width: 100%;
    }
    p{
        font-size: 1.6rem;
    }
}