/* Scss Document */

$color:#a08f1a; //サイトで良く使う色
$text:#000; //基本的なテキストの色

//hoverアニメーションを使いたい場合に使用
//呼び出し方法(cssに指定)　→　@include ani;
@mixin ani {
	transition: 0.3s ease-in-out;
}

//display:flex;を使用した場合等に使用（widthが30%から70%まで）画面幅が740pxで100%に変わる
//呼び出し方法(htmlに指定)　→　.flex_30　～　.flex_70
@for $i from 30 through 70 {
  .flex_#{$i} { width: 1% * $i; }
}

//padding-topとpadding-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.padding100　～　.padding300
$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: $p + px;
        padding-bottom: $p + px;
    }
    $p: $p + 10;
}

//margin-topとmargin-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.margin100　～　.margin300
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: $m + px;
        margin-bottom: $m + px;
    }
    $m: $m + 10;
}

//padding-top（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.pt-120　～　.pt-300
$pt: 110;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: $pt + px;
    }
    $pt: $pt + 10;
}

//padding-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.pb-120　～　.pb-300
$pb: 110;
@while $pb < 310{
    .pb-#{$pb}{
        padding-bottom: $pb + px;
    }
    $pb: $pb + 10;
}

//margin-top（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.mt-120　～　.mt-300
$mt: 110;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: $mt + px;
    }
    $mt: $mt + 10;
}

//margin-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.mb-120　～　.mb-300
$mb: 110;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: $mb + px;
    }
    $mb: $mb + 10;
}

* {
    text-decoration: none !important;
}

body {
    min-width: 1200px;
}


/************************/

/* PC用
------------------------------------------------------------*/
@media only screen and (max-width: 1699px) {

}

@media only screen and (max-width: 1400px) {

}

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 1024px) {
$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    $p: $p + 10;
}
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: 80px;
        margin-bottom: 80px;
    }
    $m: $m + 10;
}
$pt: 120;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: 80px;
    }
    $pt: $pt + 10;
}
$pb: 120;
@while $pb < 310{
    .pb-#{$pb}{
        padding-bottom: 80px;
    }
    $pb: $pb + 10;
}
$mt: 120;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: 80px;
    }
    $mt: $mt + 10;
}
$mb: 120;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: 80px;
    }
    $mb: $mb + 10;
}

body {
    min-width: 1024px;
}

/******************/


}

@media only screen and (max-width: 740px) {
@for $i from 30 through 70 {
  .flex_#{$i} { width: 100%; }
}

$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    $p: $p + 10;
}
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    $m: $m + 10;
}
$pt: 110;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: 60px;
    }
    $pt: $pt + 10;
}
$pb: 110;
@while $pb < 300{
    .pb-#{$pb}{
        padding-bottom: 60px;
    }
    $pb: $pb + 10;
}
$mt: 110;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: 60px;
    }
    $mt: $mt + 10;
}
$mb: 110;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: 60px;
    }
    $mb: $mb + 10;
}

body {
    min-width: auto;
}
/*****************/
    
    
}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width: 480px) {

}