@charset "utf-8";
@media screen and (min-width: 100px) {
    /*++++++++++++++
    共通
    ++++++++++++++*/

    body {
    overflow-x: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    /*
    font-family: YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    */
    font-family: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","ＭＳ Ｐゴシック","helvetica","arial",sans-serif;
    position: relative;
    }

    #wrapper {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

	em {
		font-size: 0.7em;
		font-style:normal;
	}
	
	.pc {display: none !important;}
      
    
    .container {
        max-width: 100%;
    }

    a {
    text-decoration: none;
    color: inherit;
    }

    img {
    max-width: 100%;
    vertical-align: bottom;
    }


    /*flex*/
    .flex {
    display: flex;
    justify-content: space-between;
    }

 
    .center {
        display: block;
        margin: auto;
        text-align: center;
    }
    /*++++++++++++++
    ボタン
    ++++++++++++++*/

    a.button {
        cursor: pointer;
        margin: auto;
        display: block;
        text-align: center;
        position: relative;
        width: 90%;
        overflow: hidden;
        transition: .5s;
        -webkit-transform: scale(1);
        transform: scale(1);
        overflow: hidden;
        position: relative;
        display: block;
    }
    a.button:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);	
    }

    @keyframes kirakira {
        0% { left: -20%; }
        10% { left: 120%; }
        100% { left: 120%; }
    }
    a.button:hover:after {
        content: '';
        position: absolute;
        top: -10%;
        left: -20%;
        width: 40px;
        height: 100%;
        transform: scale(2) rotate(20deg);
        background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);

        /* アニメーション */
        animation-name: kirakira;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    /*++++++++++++++
    固定ボタン
    ++++++++++++++*/
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        right: 0;
        margin: auto;
        background: rgba(255,255,255,0.8);
        padding: 20px 0 0;
    }
    .fixed a {
        display: flex;
        justify-content: center;
        max-width: 90%;
        width: 100%;
    }
    .fixed a > img {}
    .fixed img {
        max-width: 90%;
        margin: auto;
    }
    /*++++++++++++++
    各section
    ++++++++++++++*/
    #i1 {
        background: url("../../img/lp/basis/1_1.jpg") no-repeat #fff;
        position: relative;
        background-size: 100%;
    }
    #i1 img {
        position: relative;
        z-index: 1;
    }
    #i1:before {
        content:"";
        background: rgba(0,0,0,0.5);
        position: absolute;
        width: 100%;
        /* height: 2000px; */
        z-index: 0;
        top: 0;
    }
    #i1 .scale {
        padding: 30px 0 20px;
    }

    #i2 {
        /* height: 1000px; */
        position: relative;
        padding: 50px 0 0;
    }
    #i2:before {
        content:"";
        background: url("../../img/lp/basis/2_0.jpg") repeat;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
    }
    #i3  {
        position: relative;
        padding: 0 0 30px;
        margin: 0 0 100px;
    }

    #i3 span {width: 90%;margin: 0 auto 20px;border-bottom: 1px dashed #333;display: block;padding: 0 0 20px;}
    #i3 .i3_4 {
        width:90%;
    }
    
    #i3:before {
        content:"";
        border: 1px solid #111;
        width: 95%;
        position: absolute;
        bottom: 0;
        height: 25%;
        border-top: none;
        margin: auto;
        left: 0;
        right: 0;
        z-index: -1;
    }

    #i3 img.i3_2 {
        margin: -15% auto 0;
    }

    #i5 {padding: 0 0 50px;}

    footer {
		margin: 50px 0 0;
        padding: 50px 0 200px;
        border-top: 1px solid #ccc;
    }

    footer p {
        text-align: center;
        font-size: 12px;
    } 
}
@media screen and (min-width: 500px) {
    
        /*++++++++++++++
    共通
    ++++++++++++++*/

    body {
    overflow-x: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    /*
    font-family: YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    */
    font-family: "HiraKakuProN-W3","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","ＭＳ Ｐゴシック","helvetica","arial",sans-serif;
    position: relative;
    }
	
	.pc {display: block !important;}

    #wrapper {
    padding: 0;
    margin: 0;
    }

    .container {
    max-width: 640px;
    margin: auto;
    }


    a {
    text-decoration: none;
    color: inherit;
    }

    img {
    max-width: 100%;
    vertical-align: bottom;
    }


    /*flex*/
    .flex {
    display: flex;
    justify-content: space-between;
    }

    
    
    .center {
        display: block;
        margin: auto;
        text-align: center;
    }
    /*++++++++++++++
    ボタン
    ++++++++++++++*/

    a.button {
        cursor: pointer;
        margin: auto;
        display: block;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition: .5s;
        -webkit-transform: scale(1);
        transform: scale(1);
        overflow: hidden;
        position: relative;
        display: block;	
    }
    a.button:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);	
    }

    @keyframes kirakira {
        0% { left: -20%; }
        10% { left: 120%; }
        100% { left: 120%; }
    }
    a.button:hover:after {
        content: '';
        position: absolute;
        top: -10%;
        left: -20%;
        width: 40px;
        height: 100%;
        transform: scale(2) rotate(20deg);
        background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);

        /* アニメーション */
        animation-name: kirakira;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    /*++++++++++++++
    固定ボタン
    ++++++++++++++*/
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        right: 0;
        margin: auto;
        background: rgba(255,255,255,0.8);
        padding: 20px 0 0;
    }
    .fixed a {
        display: flex;
        justify-content: center;
        max-width: 500px;
        width: 100%;
    }
    .fixed a > img {}
    .fixed img {
        max-width: 500px;
        margin: auto;
    }
    /*++++++++++++++
    各section
    ++++++++++++++*/
    #i1 {
        background: url("../../img/lp/basis/1_1.jpg") no-repeat #fff;
        position: relative;
    }
    #i1 img {
        position: relative;
        z-index: 1;
    }
    #i1:before {
        content:"";
        background: rgba(0,0,0,0.5);
        position: absolute;
        width: 100%;
        /* height: 2000px; */
        z-index: 0;
        top: 0;
    }
    #i1 .scale {
        padding: 30px 0 20px;
    }

    #i2 {
        /* height: 1000px; */
        position: relative;
        padding: 50px 0 0;
    }
    #i2:before {
        content:"";
        background: url("../../img/lp/basis/2_0.jpg") repeat;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
    }
    #i3  {
        position: relative;
        padding: 0 0 30px;
        margin: 0 0 100px;
    }

    #i3 span {width: 90%;margin: 0 auto 20px;border-bottom: 1px dashed #333;display: block;padding: 0 0 20px;}
    #i3:before {
        content:"";
        border: 1px solid #111;
        width: 609px;
        position: absolute;
        bottom: 0;
        height: 20%;
        border-top: none;
        margin: auto;
        left: 0;
        right: 0;
        z-index: -1;
    }

    #i3 img.i3_2 {
        margin: -15% auto 0;
    }

    #i5 {padding: 0 0 50px;}

    footer {
        padding: 50px 0 200px;
        border-top: 1px solid #ccc;
    }

    footer p {
        text-align: center;
        font-size: 12px;
    }
}