@charset "utf-8";

/*==========================================

common

==========================================

1.margin
2.padding
3.font-size
4.font-weight
5.font-family
6.align
7.float
8.list-style
9.flex
10.button-style(opacity)

==========================================*/

/* 1.margin 
------------------------------------------*/
.mt-0{
  margin-top:0!important;
}
.mb-0{
  margin-bottom:0!important;
}
.mr-0{
  margin-right:0!important;
}
.ml-0{
  margin-left:0!important;
}
.mt-5{
  margin-top:5px!important;
}
.mb-5{
  margin-bottom:5px!important;
}
.mr-5{
  margin-right:5px!important;
}
.ml-5{
  margin-left:5px!important;
}
.mt-10{
  margin-top:10px!important;
}
.mb-10{
  margin-bottom:10px!important;
}
.mr-10{
  margin-right:10px!important;
}
.ml-10{
  margin-left:10px!important;
}
.mt-15{
  margin-top:15px!important;
}
.mb-15{
  margin-bottom:15px!important;
}
.mr-15{
  margin-right:15px!important;
}
.ml-15{
  margin-left:15px!important;
}
.mt-20{
  margin-top:20px!important;
}
.mb-20{
  margin-bottom:20px!important;
}
.mr-20{
  margin-right:20px!important;
}
.ml-20{
  margin-left:20px!important;
}
.mt-25{
  margin-top:25px!important;
}
.mb-25{
  margin-bottom:25px!important;
}
.mr-25{
  margin-right:25px!important;
}
.ml-25{
  margin-left:25px!important;
}
.mt-30{
  margin-top:30px!important;
}
.mb-30{
  margin-bottom:30px!important;
}
.mr-30{
  margin-right:30px!important;
}
.ml-30{
  margin-left:30px!important;
}
.mt-35{
  margin-top:35px!important;
}
.mb-35{
  margin-bottom:35px!important;
}
.mr-35{
  margin-right:35px!important;
}
.ml-35{
  margin-left:35px!important;
}
.mt-40{
  margin-top:40px!important;
}
.mb-40{
  margin-bottom:40px!important;
}
.mr-40{
  margin-right:40px!important;
}
.ml-40{
  margin-left:40px!important;
}
.mt-45{
  margin-top:45px!important;
}
.mb-45{
  margin-bottom:45px!important;
}
.mr-45{
  margin-right:45px!important;
}
.ml-45{
  margin-left:45px!important;
}
.mt-50{
  margin-top:50px!important;
}
.mb-50{
  margin-bottom:50px!important;
}
.mr-50{
  margin-right:50px!important;
}
.ml-50{
  margin-left:50px!important;
}
.mt-55{
  margin-top:55px!important;
}
.mb-55{
  margin-bottom:55px!important;
}
.mr-55{
  margin-right:55px!important;
}
.ml-55{
  margin-left:55px!important;
}
.mt-60{
  margin-top:60px!important;
}
.mb-60{
  margin-bottom:60px!important;
}
.mr-60{
  margin-right:60px!important;
}
.ml-60{
  margin-left:60px!important;
}
.mt-65{
  margin-top:65px!important;
}
.mb-65{
  margin-bottom:65px!important;
}
.mr-65{
  margin-right:65px!important;
}
.ml-65{
  margin-left:65px!important;
}
.mt-70{
  margin-top:70px!important;
}
.mb-70{
  margin-bottom:70px!important;
}
.mr-70{
  margin-right:70px!important;
}
.ml-70{
  margin-left:70px!important;
}
.mt-75{
  margin-top:75px!important;
}
.mb-75{
  margin-bottom:75px!important;
}
.mr-75{
  margin-right:75px!important;
}
.ml-75{
  margin-left:75px!important;
}
.mt-80{
  margin-top:80px!important;
}
.mb-80{
  margin-bottom:80px!important;
}
.mr-80{
  margin-right:80px!important;
}
.ml-80{
  margin-left:80px!important;
}
.mt-85{
  margin-top:85px!important;
}
.mb-85{
  margin-bottom:85px!important;
}
.mr-85{
  margin-right:85px!important;
}
.ml-85{
  margin-left:85px!important;
}
.mt-90{
  margin-top:90px!important;
}
.mb-90{
  margin-bottom:90px!important;
}
.mr-90{
  margin-right:90px!important;
}
.ml-90{
  margin-left:90px!important;
}
.mt-95{
  margin-top:95px!important;
}
.mb-95{
  margin-bottom:95px!important;
}
.mr-95{
  margin-right:95px!important;
}
.ml-95{
  margin-left:95px!important;
}
.mt-100{
  margin-top:100px!important;
}
.mb-100{
  margin-bottom:100px!important;
}
.mr-100{
  margin-right:100px!important;
}
.ml-100{
  margin-left:100px!important;
}


/* 2.padding
------------------------------------------*/

.pt-0{
  padding-top:0!important;
}
.pb-0{
  padding-bottom:0!important;
}
.pr-0{
  padding-right:0!important;
}
.pl-0{
  padding-left:0!important;
}
.pt-5{
  padding-top:5px!important;
}
.pb-5{
  padding-bottom:5px!important;
}
.pr-5{
  padding-right:5px!important;
}
.pl-5{
  padding-left:5px!important;
}
.pt-10{
  padding-top:10px!important;
}
.pb-10{
  padding-bottom:10px!important;
}
.pr-10{
  padding-right:10px!important;
}
.pl-10{
  padding-left:10px!important;
}
.pt-15{
  padding-top:15px!important;
}
.pb-15{
  padding-bottom:15px!important;
}
.pr-15{
  padding-right:15px!important;
}
.pl-15{
  padding-left:15px!important;
}
.pt-20{
  padding-top:20px!important;
}
.pb-20{
  padding-bottom:20px!important;
}
.pr-20{
  padding-right:20px!important;
}
.pl-20{
  padding-left:20px!important;
}
.pt-25{
  padding-top:25px!important;
}
.pb-25{
  padding-bottom:25px!important;
}
.pr-25{
  padding-right:25px!important;
}
.pl-25{
  padding-left:25px!important;
}
.pt-30{
  padding-top:30px!important;
}
.pb-30{
  padding-bottom:30px!important;
}
.pr-30{
  padding-right:30px!important;
}
.pl-30{
  padding-left:30px!important;
}
.pt-35{
  padding-top:35px!important;
}
.pb-35{
  padding-bottom:35px!important;
}
.pr-35{
  padding-right:35px!important;
}
.pl-35{
  padding-left:35px!important;
}
.pt-40{
  padding-top:40px!important;
}
.pb-40{
  padding-bottom:40px!important;
}
.pr-40{
  padding-right:40px!important;
}
.pl-40{
  padding-left:40px!important;
}
.pt-45{
  padding-top:45px!important;
}
.pb-45{
  padding-bottom:45px!important;
}
.pr-45{
  padding-right:45px!important;
}
.pl-45{
  padding-left:45px!important;
}
.pt-50{
  padding-top:50px!important;
}
.pb-50{
  padding-bottom:50px!important;
}
.pr-50{
  padding-right:50px!important;
}
.pl-50{
  padding-left:50px!important;
}
.pt-55{
  padding-top:55px!important;
}
.pb-55{
  padding-bottom:55px!important;
}
.pr-55{
  padding-right:55px!important;
}
.pl-55{
  padding-left:55px!important;
}
.pt-60{
  padding-top:60px!important;
}
.pb-60{
  padding-bottom:60px!important;
}
.pr-60{
  padding-right:60px!important;
}
.pl-60{
  padding-left:60px!important;
}
.pt-65{
  padding-top:65px!important;
}
.pb-65{
  padding-bottom:65px!important;
}
.pr-65{
  padding-right:65px!important;
}
.pl-65{
  padding-left:65px!important;
}
.pt-70{
  padding-top:70px!important;
}
.pb-70{
  padding-bottom:70px!important;
}
.pr-70{
  padding-right:70px!important;
}
.pl-70{
  padding-left:70px!important;
}
.pt-75{
  padding-top:75px!important;
}
.pb-75{
  padding-bottom:75px!important;
}
.pr-75{
  padding-right:75px!important;
}
.pl-75{
  padding-left:75px!important;
}
.pt-80{
  padding-top:80px!important;
}
.pb-80{
  padding-bottom:80px!important;
}
.pr-80{
  padding-right:80px!important;
}
.pl-80{
  padding-left:80px!important;
}
.pt-85{
  padding-top:85px!important;
}
.pb-85{
  padding-bottom:85px!important;
}
.pr-85{
  padding-right:85px!important;
}
.pl-85{
  padding-left:85px!important;
}
.pt-90{
  padding-top:90px!important;
}
.pb-90{
  padding-bottom:90px!important;
}
.pr-90{
  padding-right:90px!important;
}
.pl-90{
  padding-left:90px!important;
}
.pt-95{
  padding-top:95px!important;
}
.pb-95{
  padding-bottom:95px!important;
}
.pr-95{
  padding-right:95px!important;
}
.pl-95{
  padding-left:95px!important;
}
.pt-100{
  padding-top:100px!important;
}
.pb-100{
  padding-bottom:100px!important;
}
.pr-100{
  padding-right:100px!important;
}
.pl-100{
  padding-left:100px!important;
}


/* 3.font-size
------------------------------------------*/
.f-10{
  font-size:10px!important;
}
.f-11{
  font-size:11px!important;
}
.f-12{
  font-size:12px!important;
}
.f-13{
  font-size:13px!important;
}
.f-14{
  font-size:14px!important;
}
.f-15{
  font-size:15px!important;
}
.f-16{
  font-size:16px!important;
}
.f-17{
  font-size:17px!important;
}
.f-18{
  font-size:18px!important;
}
.f-19{
  font-size:19px!important;
}
.f-20{
  font-size:20px!important;
}
.f-21{
  font-size:21px!important;
}
.f-22{
  font-size:22px!important;
}
.f-23{
  font-size:23px!important;
}
.f-24{
  font-size:24px!important;
}
.f-25{
  font-size:25px!important;
}
.f-26{
  font-size:26px!important;
}
.f-27{
  font-size:27px!important;
}
.f-28{
  font-size:28px!important;
}
.f-29{
  font-size:29px!important;
}
.f-30{
  font-size:30px!important;
}
.f-31{
  font-size:31px!important;
}
.f-32{
  font-size:32px!important;
}
.f-33{
  font-size:33px!important;
}
.f-34{
  font-size:34px!important;
}
.f-35{
  font-size:35px!important;
}
.f-36{
  font-size:36px!important;
}
.f-37{
  font-size:37px!important;
}
.f-38{
  font-size:38px!important;
}
.f-40{
  font-size:40px!important;
}
.f-46{
  font-size:46px!important;
}
.f-50{
  font-size:50px!important;
}


/* 4.font-weight
------------------------------------------*/

.f-light{
  font-weight:300!important;
}
.f-base{
  font-weight:400!important;
}
.f-medium{
  font-weight:500!important;
}
.f-bold{
  font-weight:700!important;
}
.f-black{
  font-weight:900!important;
}
.f-b{
  font-weight:bold!important;
}
.f-normal{
  font-weight:normal!important;
}
em{
  font-style: normal;
}


/* 5.font-family
------------------------------------------*/
/* ゴシック */
.f-gothic{
  font-family:
  "Noto Sans JP",
  "Helvetica Neue",Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,sans-serif !important;
}

/* 明朝 */
.f-serif{
  font-family:
  "Noto Serif JP",
  "Times New Roman",
  "YuMincho",
  "Hiragino Mincho ProN",
  "Yu Mincho",
  "MS PMincho",serif !important;
}


/* 6.align
------------------------------------------*/
.t-right{
  text-align:right !important;
}
.t-center{
  text-align:center !important;
}
.t-left{
  text-align:left !important;
}
.mx-auto{
  margin: auto auto !important;
}


/* 7.float
------------------------------------------*/
.f-left{
  float: left;
}
.f-right{
  float: right;
}


/* 8.list-style
------------------------------------------*/
/* indent */
.indent,
ul.list-indent li{
  text-indent:-1em;
  margin-left:1em;
}

/* disc */
ul.list-disc li {
  margin-left:15px;
  list-style-type:disc;
}

/* number */
ol.list-num li{
  list-style-type: decimal;
  margin-left: 15px;
}


/* 9.flex
------------------------------------------*/
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.flex-between{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex-top{
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex_justify-center{
  justify-content: center;
}
.flex_justify-left{
  justify-content: left;
}
.flex_align-center{
  align-items: center;
}


/* 10.button-style(opacity)
------------------------------------------*/
/* Button */
#contents a.hover:hover,
#contents .sns a:hover,
#contents a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
}



