@charset "UTF-8";

/* ===================================================================
CSS information

common.css
全メディア共通


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




/*=====================================
	FONT YELLOWTAIL
=====================================*/
@import url('https://fonts.googleapis.com/css?family=Yellowtail&display=swap');


/*=====================================
	FONT NOTO SANS
	font-family: 'Noto Sans JP', sans-serif;

=====================================*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&subset=japanese');



/*=====================================
	FONT NOTO SANS
=====================================*/

/*
* Noto Sans Japanese (japanese) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format('woff2'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format('woff'),
        url(http://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format('opentype');
 }
 



body {
-webkit-text-size-adjust : 100% ;
}
 


/*=====================================
	img
=====================================*/
img {
max-width: 100%;
height: auto;
}


/*=====================================
	a:
=====================================*/
a:link {
text-decoration : none ;
}
a:visited {
text-decoration : none ;
}
a:hover {
text-decoration : none ;
}
a {
outline: none;
}


/*=====================================
	MARGIN
=====================================*/

.mt10 {
margin-top : 10px !important;
}
.mt20 {
margin-top : 20px !important;
}
.mt30 {
margin-top : 30px !important;
}
.mt40 {
margin-top : 40px !important;
}
.mt50 {
margin-top : 40px !important;
}
.mt60 {
margin-top : 60px !important;
}
.mt70 {
margin-top : 70px !important;
}
.mt80 {
margin-top : 80px !important;
}
.mt90 {
margin-top : 90px !important;
}
.mt100 {
margin-top : 100px !important;
}
.mt110 {
margin-top : 110px !important;
}
.mt120 {
margin-top : 120px !important;
}
.mt130 {
margin-top : 130px !important;
}
.mt140 {
margin-top : 140px !important;
}
.mt150 {
margin-top : 150px !important;
}
.mt160 {
margin-top : 160px !important;
}
.mt170 {
margin-top : 170px !important;
}
.mt180 {
margin-top : 180px !important;
}
.mt190 {
margin-top : 190px !important;
}
.mt200 {
margin-top : 200px !important;
}
.mt210 {
margin-top : 210px !important;
}
.mt220 {
margin-top : 220px !important;
}
.mt230 {
margin-top : 230px !important;
}
.mt240 {
margin-top : 240px !important;
}
.mt250 {
margin-top : 250px !important;
}


.mb10 {
margin-bottom : 10px !important;
}
.mb20 {
margin-bottom : 20px !important;
}
.mb30 {
margin-bottom : 30px !important;
}
.mb40 {
margin-bottom : 40px !important;
}
.mb50 {
margin-bottom : 40px !important;
}
.mb60 {
margin-bottom : 60px !important;
}
.mb70 {
margin-bottom : 70px !important;
}
.mb80 {
margin-bottom : 80px !important;
}
.mb90 {
margin-bottom : 90px !important;
}
.mb100 {
margin-bottom : 100px !important;
}
.mb110 {
margin-bottom : 110px !important;
}
.mb120 {
margin-bottom : 120px !important;
}
.mb130 {
margin-bottom : 130px !important;
}
.mb140 {
margin-bottom : 140px !important;
}
.mb150 {
margin-bottom : 150px !important;
}
.mb160 {
margin-bottom : 160px !important;
}
.mb170 {
margin-bottom : 170px !important;
}
.mb180 {
margin-bottom : 180px !important;
}
.mb190 {
margin-bottom : 190px !important;
}
.mb200 {
margin-bottom : 200px !important;
}


/*=====================================
	PADDING
=====================================*/

.pt10 {
padding-top : 10px !important;
}
.pt20 {
padding-top : 20px !important;
}
.pt30 {
padding-top : 30px !important;
}
.pt40 {
padding-top : 40px !important;
}
.pt50 {
padding-top : 40px !important;
}
.pt60 {
padding-top : 60px !important;
}
.pt70 {
padding-top : 70px !important;
}
.pt80 {
padding-top : 80px !important;
}
.pt90 {
padding-top : 90px !important;
}
.pt100 {
padding-top : 100px !important;
}
.pt110 {
padding-top : 110px !important;
}
.pt120 {
padding-top : 120px !important;
}
.pt130 {
padding-top : 130px !important;
}
.pt140 {
padding-top : 140px !important;
}
.pt150 {
padding-top : 150px !important;
}
.pt160 {
padding-top : 160px !important;
}
.pt170 {
padding-top : 170px !important;
}
.pt180 {
padding-top : 180px !important;
}
.pt190 {
padding-top : 190px !important;
}
.pt200 {
padding-top : 200px !important;
}
.pt210 {
padding-top : 210px !important;
}
.pt220 {
padding-top : 220px !important;
}
.pt230 {
padding-top : 230px !important;
}
.pt240 {
padding-top : 240px !important;
}
.pt250 {
padding-top : 250px !important;
}

.pb10 {
padding-bottom : 10px !important;
}
.pb20 {
padding-bottom : 20px !important;
}
.pb30 {
padding-bottom : 30px !important;
}
.pb40 {
padding-bottom : 40px !important;
}
.pb50 {
padding-bottom : 40px !important;
}
.pb60 {
padding-bottom : 60px !important;
}
.pb70 {
padding-bottom : 70px !important;
}
.pb80 {
padding-bottom : 80px !important;
}
.pb90 {
padding-bottom : 90px !important;
}
.pb100 {
padding-bottom : 100px !important;
}
.pb110 {
padding-bottom : 110px !important;
}
.pb120 {
padding-bottom : 120px !important;
}
.pb130 {
padding-bottom : 130px !important;
}
.pb140 {
padding-bottom : 140px !important;
}
.pb150 {
padding-bottom : 150px !important;
}
.pb160 {
padding-bottom : 160px !important;
}
.pb170 {
padding-bottom : 170px !important;
}
.pb180 {
padding-bottom : 180px !important;
}
.pb190 {
padding-bottom : 190px !important;
}
.pb200 {
padding-bottom : 200px !important;
}




/*=====================================
	opacity
=====================================*/
.grayout {
opacity:0.2; 
}

/*=====================================
	CLEARFIX
=====================================*/
.clfx:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clfx {
display: inline-block;
}
* html .clfx {
height: 1%;
}
.clfx {
display: block;
}


/*=====================================
	SELECTION
=====================================*/
::selection {
background : #444 ; /* Safari */
color:#FFF ;
}
::-moz-selection {
background : #444 ; /* Firefox */
color:#FFF ;
}