﻿@charset "UTF-8";
/* ▼600px以上の場合に適用
--------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {
    body {
        font-size: 16px;
        line-height: 1.6em;
    }
    
    .scroll-nav {
      display: none;
   }
    
    #Sp_Logo {
        display: none;
    }
    #Pc_Kodawari {
        float: right;
        width: 17%;
        margin-right: 10px;
    }
    #Sp_Kodawari {
        display: none;
    }
    #Sp_Footer_Logo {
        display: none;
    }
}

/* ▼599px以下の場合に適用
---------------------------------------------------------------------- */
@media only screen and (max-width: 599px) {
    body {
        font-size: 14px;
        line-height: 1.6em;
    }
    header {
        position: relative;
        min-height: 380px;
        width: 100%;
        background-size: cover !important;
        -webkit-background-size: cover !important;
        text-align: center;
        overflow: hidden;
    }
    
    #Navi_Wrap {
      display: none;
   }
    
       
    .scroll-nav {
	/* スクロールバーを見えなくするため */
	height: 90px; /* 実際に表示する高さ */
	overflow-y: hidden;
	background-color: rgba(55,16,31,0.76);
    }

    /* 中身がスクロールするビュー */
    .scroll-nav__view {
      -webkit-overflow-scrolling: touch;
      overflow-x: scroll;
    }

    /* 実際にスクロールするオブジェクト */
    .scroll-nav__list {
      /* tableにすることで、横幅指定をすることなくmargin: autoによる中央寄せが可能になる */
      display: table;
      list-style: none;
      margin: 0 auto;
      /* 下方向に余分なpadding部分を持たせ、そこにスクロールバーが表示される */
      padding: 0 0 24px 0;
    }

    .scroll-nav__item {
      /* itemを横並びに、かつ親要素がその親要素の横幅からはみだすことが可能になる */
      display: table-cell;
    }

    .scroll-nav a {
      display: block;
      padding: 12px;
      /* 文字列の自動改行を禁止 */
      white-space: nowrap;
      color: rgb(224, 224, 224);
      font-family: sans-serif;
      font-size: 14px;
      /* 行高が24pxになるように調整 24/14 */
      line-height: 1.71428;
      text-decoration: none;
    }
    
    #Message {
        position: fixed;
        z-index: 0;
        top: 120px;
        left: 0;
        width: 100%;
    }
    
    #Sp_Logo {
	    margin-top: 20px;
        width: 40%;
        align-items: center;
    }
    
    #Pc_Kodawari {
        display: none;
    }
    
    #Sp_Kodawari {
        float: right;
        width: 20%;
        margin-right: 10px;
        margin-top: 20px;
    }
    #Logo {
        display: none;
    }
    #Footer_Logo {
        display: none;
    }
    #Slid_Area {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }
    h2 {
        font-size: 34px;
        font-weight: bold;
        padding: 20px 0;
    }

    #back-top a {
        display: none;
    }
    #Footer_Wrap {
        height: 420px;
    }
    #Sp_Footer_Logo {
        width: 160px;
    }
    /* !Fonts -------------------------------------------------------------- */
    .fz34 {
        font-size: 24px;
        line-height: 1.4em;
    }
    .fz60 {
        font-size: 28px;
        line-height: 1.4em;
    }
    /* !Margin ------------------------------------------------------------------ */
    .mt10 {
        margin-top: 10px !important;
    }
    .mt20 {
        margin-top: 20px !important;
    }
    .mt30 {
        margin-top: 20px !important;
    }
    .mt40 {
        margin-top: 20px !important;
    }
    .mt50 {
        margin-top: 20px !important;
    }
    .mt60 {
        margin-top: 30px !important;
    }
    .mt80 {
        margin-top: 40px !important;
    }
    .mt120 {
        margin-top: 40px !important;
    }
    /* !Padding ------------------------------------------------------------------ */
    .pt60 {
        padding-top: 30px !important;
    }
    /* !Width ------------------------------------------------------------------- */
    .w7per {
        width: 24% !important;
    }
    .w10per {
        width: 24% !important;
    }
    /* !Inline Align ------------------------------------------------------------ */
    .taR {
        text-align: left !important;
    }
    /* !line-height ------------------------------------------------------------------ */
    .lh24 {
        line-height: 1.8em;
    }
}