@charset "utf-8";

/* ----------------------------------------------------------------------
 reset css
---------------------------------------------------------------------- */
* {margin: 0;padding: 0;list-style:none;outline:0;vertical-align: baseline;background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
 { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
audio, canvas, video { display:inline-block; max-width:100%; }
html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
ul, ol { list-style:none; }
blockquote , q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; }
a:focus { outline:none; }
ins { text-decoration:none; }
i{font-style: normal;}
mark { font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; width:100%; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:100%; }
input, textarea { background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); -webkit-appearance: none; border-radius:0; /* Removing the inner shadow, rounded corners on iOS inputs */ }
input[type="checkbox"]{ -webkit-appearance: checkbox; }
input[type="radio"]{ -webkit-appearance: radio; }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }
img { border: 0; vertical-align: top; -ms-interpolation-mode:bicubic; }
a img {border: 0;vertical-align: top;}
img {max-width: 100%;height:auto;}
/* clearfix */
.clearfix:after { content: "."; display:block; clear:both; height:0; font-size:0.1em; line-height:0; visibility:hidden; overflow:hidden; }
.clearfix { display:inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height:1% }
.clearfix { display:block;}
/* end MacIE5 */
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
.sup,
sup{
	font-size: 1.3rem;
	line-height: 1.5;
	display: inline-block;
	font-weight: 500;
}
.sup,
sup{
	transform: translateY(-5px);
}
/*--------------cmn--------------*/

.colorkit{
  color:#22b4d8;
  color:#45bdcf;
  color:#fdd000;
}
html{font-size: 62.5%;}
body {
	line-height: 1.8;
  font-size: 1.6em;
  font-family:  'Noto Sans JP', sans-serif;
	color: #353c42;
  background: #e8ecf0;
	-webkit-text-size-adjust: 100%;
  letter-spacing: 0.2rem;
	overflow: hidden;
}
.min{font-family: 'Noto Serif JP', serif;}
.en1{font-family: 'Roboto', sans-serif;letter-spacing: 0rem;}
.en2{font-family: 'EB Garamond', serif;}

/*----------------------------VW font-----------------------------------*/
@font-face {
  font-family: 'vwfont1';
  src: url('../fonts/VW_Head/VWHeadWeb-Light.eot?v=1.0');
  src: url('../fonts/VW_Head/VWHeadWeb-Light.eot?v=1.0#iefix') format('embedded-opentype'),
       url('../fonts/VW_Head/VWHeadWeb-Light.woff?v=1.0') format('woff'),
       url('../fonts/VW_Head/VWHeadWeb-Light.ttf?v=1.0') format('truetype'),
       url('../fonts/VW_Head/VWHeadWeb-Light.svg?v=1.0#vwfont1') format('svg');
	font-weight: bold;
}
@font-face {
  font-family: 'vwfont2';
  src: url('../fonts/VW_Head/VWHeadWeb-ExtraBold.eot?v=1.0');
  src: url('../fonts/VW_Head/VWHeadWeb-ExtraBold.eot?v=1.0#iefix') format('embedded-opentype'),
       url('../fonts/VW_Head/VWHeadWeb-ExtraBold.woff?v=1.0') format('woff'),
       url('../fonts/VW_Head/VWHeadWeb-ExtraBold.ttf?v=1.0') format('truetype'),
       url('../fonts/VW_Head/VWHeadWeb-ExtraBold.svg?v=1.0#vwfont2') format('svg');
}
@font-face {
  font-family: 'vwfont3';
  font-weight: 600;
  src: url('../fonts/VW_Head/VWHeadWeb-Regular.eot?v=1.0');
  src: url('../fonts/VW_Head/VWHeadWeb-Regular.eot?v=1.0#iefix') format('embedded-opentype'),
       url('../fonts/VW_Head/VWHeadWeb-Regular.woff?v=1.0') format('woff'),
       url('../fonts/VW_Head/VWHeadWeb-Regular.ttf?v=1.0') format('truetype'),
       url('../fonts/VW_Head/VWHeadWeb-Regular.svg?v=1.0#vwfont2') format('svg');
}
.vf1{font-family: 'vwfont1';letter-spacing: 0rem;}
.vf2{font-family: 'vwfont2';letter-spacing: 0rem;}
.vf3{font-family: 'vwfont3';letter-spacing: 0rem;}

a {text-decoration: none;}
em{
  font-style: normal;
}


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

div, ul, li, ol, p, span, a, a:hover, table, tr, th, td, dl, dt, dd, nav, i, section, article, header, footer, input, textarea{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}

svg{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}
i{
  font-style: normal;
}
.radius3{-moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px;}
.radius5{-moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}

@media screen and (max-width: 860px){
.brspnon{display:none;}
}
/* ----------------------------------------------------------------------
Youtube responsive - Youtube動画のレスポンシブ表示
---------------------------------------------------------------------- */
.ytube { position:relative; height:0; margin-top:20px; margin-bottom:20px; padding-bottom:56.25%; padding-top:30px; overflow:hidden; }
.ytube iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; }

/* ----------------------------------------------------------------------
 Googlemap - グーグルマップ
---------------------------------------------------------------------- */
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap2 {
position: relative;
padding-bottom: 90.35%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 860px){
.ggmap2 {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
}
/* ----------------------------------------------------------------------
 font-color - フォントカラー
---------------------------------------------------------------------- */
.red{color:red}     /* 赤色 */
.blue{color:#2ca9e1}    /* 青色 */
.green{color:#145d03}   /* 緑色 */
.orange{color:#ff7d00}    /* 橙色 */
.yellow{color:#fff000}    /* 黄色 */
.pink{color:#ff0084}    /* ピンク */
.gray{color:#999999}    /* グレー */

/* ----------------------------------------------------------------------
 background-color - 背景色
---------------------------------------------------------------------- */
.bg-yellow{padding:2px;background-color:#ff0} /* 黄色の文字背景 */
.bg-blue{padding:2px;background-color:#4ab0f5}  /* 青色の文字背景 */
.bg-red{padding:2px;background-color:red} /* 赤色の文字背景 */

/* ----------------------------------------------------------------------
 float - 回り込み
---------------------------------------------------------------------- */
.r-flo{float:right;margin:10px} /* 右に回り込み */
.l-flo{float:left;margin:10px}  /* 左に回り込み */
.f-clear{clear:both}      /* 回り込みの解除 */

/* ----------------------------------------------------------------------
 margin - 要素の外側の余白
---------------------------------------------------------------------- */
.m0{margin:0 !important}    /* margin 0px を指定するクラス */
.mt0{margin-top:0 !important}   /* margin-top0px を指定するクラス */
.mr0{margin-right:0 !important}   /* margin-right0px を指定するクラス*/
.mb0{margin-bottom:0 !important}  /* margin-bottom0px を指定するクラス*/
.ml0{margin-left:0 !important}    /* margin-left0px を指定するクラス*/

.m5{margin:5px !important}
.mt5{margin-top:5px !important}
.mr5{margin-right:5px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}

.m10{margin:10px !important}
.mt10{margin-top:10px !important}
.mr10{margin-right:10px !important}
.mb10{margin-bottom:10px !important}
.ml10{margin-left:10px !important}

.m15{margin:15px !important}
.mt15{margin-top:15px !important}
.mr15{margin-right:15px !important}
.mb15{margin-bottom:15px !important}
.ml15{margin-left:15px !important}

.m20{margin:20px !important}
.mt20{margin-top:20px !important}
.mr20{margin-right:20px !important}
.mb20{margin-bottom:20px !important}
.ml20{margin-left:20px !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.m35{margin:35px !important}
.mt35{margin-top:35px !important}
.mr35{margin-right:35px !important}
.mb35{margin-bottom:35px !important}
.ml35{margin-left:35px !important}

.m40{margin:40px !important}
.mt40{margin-top:40px !important}
.mr40{margin-right:40px !important}
.mb40{margin-bottom:40px !important}
.ml40{margin-left:40px !important}

.m45{margin:45px !important}
.mt45{margin-top:45px !important}
.mr45{margin-right:45px !important}
.mb45{margin-bottom:45px !important}
.ml45{margin-left:45px !important}

.m50{margin:50px !important}
.mt50{margin-top:50px !important}
.mr50{margin-right:50px !important}
.mb50{margin-bottom:50px !important}
.ml50{margin-left:50px !important}

.m55{margin:55px !important}
.mt55{margin-top:55px !important}
.mr55{margin-right:55px !important}
.mb55{margin-bottom:55px !important}

.ml55{margin-left:55px !important}
.m60{margin:60px !important}
.mt60{margin-top:60px !important}
.mr60{margin-right:60px !important}
.mb60{margin-bottom:60px !important}
.ml60{margin-left:60px !important}

.m65{margin:65px !important}
.mt65{margin-top:65px !important}
.mr65{margin-right:65px !important}
.mb65{margin-bottom:65px !important}
.ml65{margin-left:65px !important}

.m70{margin:70px !important}
.mr70{margin-right:70px !important}
.mb70{margin-bottom:70px !important}
.ml70{margin-left:70px !important}

.m75{margin:75px !important}
.mt75{margin-top:75px !important}
.mr75{margin-right:75px !important}
.mb75{margin-bottom:75px !important}
.ml75{margin-left:75px !important}

.m80{margin:80px !important}
.mt80{margin-top:80px !important}
.mr80{margin-right:80px !important}
.mb80{margin-bottom:80px !important}
.ml80{margin-left:80px !important}


/* ----------------------------------------------------------------------
 padding - 要素の内側の余白
---------------------------------------------------------------------- */
.p0{padding:0 !important}   /* padding-0px を指定するクラス */
.pt0{padding-top:0 !important}    /* padding-top0px を指定するクラス */
.pr0{padding-right:0 !important}  /* padding-right0px を指定するクラス */
.pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */
.pl0{padding-left:0 !important}   /* padding-left0px を指定するクラス */

.p5{padding:5px !important}
.pt5{padding-top:5px !important}
.pr5{padding-right:5px !important}
.pb5{padding-bottom:5px !important}
.pl5{padding-left:5px !important}

.p10{padding:10px !important}
.pt10{padding-top:10px !important}
.pr10{padding-right:10px !important}
.pb10{padding-bottom:10px !important}
.pl10{padding-left:10px !important}