@charset "UTF-8";

/*
	tab highlight color & user select disabled
=========================================*/
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    touch-action: manipulation;
}


/*
	iOS ContextMenu disabled
=========================================*/
* {
    -webkit-touch-callout: none;
}

input[type="text"],
textarea {
    -webkit-user-select: auto;
}


/*
	box-sizing Setting
=========================================*/

*,
*:before,
*: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;
}




/*
* Noto Sans Japanese (japanese) http://www.google.com/fonts/earlyaccess
 */


@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 100;
    font-style: normal;

    src: url(../font/NotoSans_Thin.woff2) format("woff2"), url(../font/NotoSans_Thin.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Thin.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 200;
    font-style: normal;

    src: url(../font/NotoSans_Light.woff2) format("woff2"), url(../font/NotoSans_Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Light.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 300;
    font-style: normal;

    src: url(../font/NotoSans_DemiLight.woff2) format("woff2"), url(../font/NotoSans_DemiLight.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-DemiLight.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 400;
    font-style: normal;

    src: url(../font/NotoSans_Regular.woff2) format("woff2"), url(../font/NotoSans_Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Regular.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 500;
    font-style: normal;

    src: url(../font/NotoSans_Medium.woff2) format("woff2"), url(../font/NotoSans_Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Medium.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 700;
    font-style: normal;

    src: url(../font/NotoSans_Bold.woff2) format("woff2"), url(../font/NotoSans_Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Bold.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans Japanese";
    font-weight: 900;
    font-style: normal;

    src: url(../font/NotoSans_Black.woff2) format("woff2"), url(../font/NotoSans_Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v5/NotoSansJP-Black.otf) format("opentype");
}

@font-face {
    font-family: "Bebas Neue";
    font-weight: 400;
    font-style: normal;

    src: url(../font/BebasNeue.woff2) format("woff2"), url(../font/BebasNeue.woff) format("woff"), url(../font/BebasNeue.otf) format("opentype");
}



/*
    base
=========================================*/

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    /* スマホの基準サイズ */
    font-size: 62.5%;
}

/* PCの基準サイズ */
@media screen and (min-width: 750px) {
    html {
        font-size: 125%;
    }
}

html,
body {
    height: 100%;
    overscroll-behavior-x: none;
}

body {
    /* font-family: Avenir,'Noto Sans Japanese', "Avenir Next", "Hiragino Kaku Gothic ProN", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; */
    /* font-family: -apple-system, BlinkMacSystemFont, Verdana, Roboto, "Droid Sans", Avenir, 'Noto Sans Japanese', "Avenir Next", "Hiragino Kaku Gothic ProN", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; */
    font-family: "Noto Sans Japanese",
        "Avenir Next",
        Verdana,
        Roboto,
        "Droid Sans",
        Avenir,
        "Hiragino Kaku Gothic ProN",
        "メイリオ",
        "ＭＳ Ｐゴシック",
        sans-serif;
    letter-spacing: normal;
    /* アンチエイリアスを指定する */
    -moz-osx-font-smoothing: auto;
    /* メトリクスカーニングを指定する */
    -webkit-font-kerning: normal;
    font-kerning: normal;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";

    font-size: 1.5rem;
    line-height: 1.66;
    color: #666;
    text-align: center;
    /* background-color: #fff; */
    background-color: #F0F4F0;
    background-position: center center;
    background-repeat: repeat;
    background-size: 25rem auto;
    /* background-attachment: fixed; */

}

a {
    cursor: pointer;
}

a[onclick]:not([class*="button"]),
a[href]:not([class*="button"]) {
    color: #666;
    text-decoration: underline;
}

strong {
    font-weight: bold;
}

em {
    font-weight: bold;
}

#page-name {
    display: none;
}

img {
    zoom: .5;
}

@media screen and (min-width: 750px) {
    img {
        zoom: 1;
    }
}


/*
	media
=========================================*/

.media_pc {
    display: inline-block;
}

.media_sp {
    display: none;
}

@media screen and (max-width: 750px) {
    .media_pc {
        display: none;
    }

    .media_sp {
        display: inline-block;
    }
}

/*
	button
=========================================*/
.button {
    margin: 2.5rem auto 0;
    border-radius: 1rem;
    padding: 0.7rem 1rem;
    display: block;
    min-width: 30rem;
    max-width: 27rem;
    background: #6ac264;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    border: none;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px .5rem 0.25rem 0 rgba(0, 0, 0, 0.1);
}


/*
	area-wrapper
=========================================*/
.area-wrapper {
    /* width: 37.5rem; */
    /* margin: 0 auto 3rem; */
}


/*
    xAlign
=========================================*/
.x-left {
    text-align: left !important;
}

.x-center {
    text-align: center !important;
}

.x-right {
    text-align: right !important;
}

.x-top {
    vertical-align: top !important;
}

.x-middle {
    vertical-align: middle !important;
}

.x-bottom {
    vertical-align: bottom !important;
}

.x-baseline {
    vertical-align: baseline !important;
}


/*
    xDisplay
=========================================*/
.x-hide {
    display: none;
}


/*
    xColor
=========================================*/
.x-red {
    color: #d00;
}

.x-black {
    color: #000;
}


.x-bold {
    font-weight: bold;
}


/*
    .x-through
=========================================*/
.x-through {
    text-decoration: line-through !important;
}