@charset "UTF-8";



/* ----------------------------
	Reset
---------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,main,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}



/* ----------------------------
	Fonts
---------------------------- */
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 400;
	src: url('../font/NotoSans/NotoSans-Regular.woff') format('woff'),
		 url('../font/NotoSans/NotoSans-Regular.otf') format('truetype');
}
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 700;
	src: url('../font/NotoSans/NotoSans-Bold.woff') format('woff'),
		 url('../font/NotoSans/NotoSans-Bold.otf') format('truetype');
}
@font-face {
  font-family: 'WinYuGothic';
  font-weight: normal;
  src: local('YuGothic-Medium'), local('Yu Gothic Medium'), local('YuGothic-Regular');
}
@font-face {
	font-family: 'WinYuGothic';
	font-weight: bold;
	src: local('YuGothic-Bold'), local('Yu Gothic');
}



/* ----------------------------
  Base
---------------------------- */
body {
  min-width: 1024px;
  line-height: 2;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  font-family: "WinYuGothic", "YuGothic", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: #000;
  position: relative;
}

@media screen and (max-width: 812px) {
  body {
    min-width: 0px;
    line-height: 1.692307692;
    font-size: 13px;
    font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  }
}

@media screen and (max-width: 375px) {
  body {
    font-size: 3.4666667vw;
  }
}


/* Anchor
---------------------------- */
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
  text-decoration: none;
  color: #000;
  outline: none;
}


/* Image
---------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
}


/* Button
---------------------------- */
button {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
  font: inherit;
}



/* ----------------------------
  Utils
---------------------------- */

/* Break Line
---------------------------- */
.pc { display: block; }
span.pc { display: inline; }
.sp { display: none; }
span.sp { display: none; }

@media screen and (max-width: 812px) {
  .pc { display: none; }
  span.pc { display: none; }
  .sp { display: block; }
  span.sp { display: inline; }
}

br.xs-none {
  display: block;
}

@media screen and (max-width: 320px) {
  br.xs-none {
    display: none;
  }
}



/* ----------------------------
  Layout
---------------------------- */
html, body {
  height: 100%;
}
.wrapper {
  height: 100%;
}



/* ----------------------------
  header
---------------------------- */
.header {
  min-width: 1024px;
  height: 80px;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

/* Black */
.header.header-black {
  background: #fff;
}

@media screen and (max-width: 812px) {
  .header {
    min-width: 0px;
    height: auto;
    position: static;
  }
  .header.header-black {
    background: transparent;
  }
}


/* Header Logo
---------------------------- */
.header-logo {
  padding-top: 24px;
  position: absolute;
  top: 0;
  left: 24px;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
.header-init .header-logo {
  -webkit-transition-delay: 1.6s;
  transition-delay: 1.6s;
}
.loaded .header-logo {
  opacity: 1;
}
.header-logo a {
  display: block;
  width: 70px;
  height: 30px;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.header-logo a:before {
  content: "";
  display: block;
  background: url(../img/logo-wwd-black.png) no-repeat top left;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.header-logo a:hover {
  opacity: 0.6;
}
.header-logo img {
  display: block;
  max-width: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

/* Black */
.header-black .header-logo a:before {
  opacity: 1;
}
.header-black .header-logo img {
  opacity: 0;
}

@media screen and (max-width: 812px) {
  .header-logo {
    padding-top: 10px;
    position: absolute;
    left: 10px;
  }
  .header-logo a {
    width: 75px;
    height: 32px;
  }
}


/* Header Menu
---------------------------- */
.header-menu {
  padding-top: 12px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
}
.header-menu li {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
}
.header-menu a {
  display: block;
  padding: 7px 0 2px;
  letter-spacing: -0.02em;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.header-menu a:before {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.header-menu .current a:before,
.header-menu a:hover:before {
  width: 100%;
}

/* Black */
.header-black .header-menu a {
  color: #000;
}
.header-black .header-menu a:before {
  background: #000;
}

/* Init */
.header-init .header-menu {
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 1080px) {
  .header-menu li {
    margin: 0 10px;
  }
}

@media screen and (max-width: 812px) {
  .header-menu {
    display: none;
  }
}


/* Header Share
---------------------------- */
.header-share {
  display: -webkit-box; /* Less than android 4.3 */
  display: -webkit-flex; /* Less than iOS8 */
  -webkit-box-align: center; /* Less than android 4.3 */
  -webkit-align-items: center; /* Less than iOS8 */
  align-items: center;
  display: flex;
  padding-top: 28px;
  line-height: 1;
  font-size: 10px;
  color: #fff;
  position: absolute;
  top: 0;
  right: 24px;
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
}
.header-share dt {
  margin-right: 10px;
  letter-spacing: -0.02em;
  font-weight: bold;
  font-size: 15px;
}
.header-share dd a {
  display: block;
  padding: 0 10px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.header-share dd a:hover {
  opacity: 0.6;
}
.header-share dd svg {
  fill: #fff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

/* Black */
.header-black .header-share {
  color: #000;
}
.header-black .header-share dd svg {
  fill: #000;
}

/* Initial */
.header-init .header-share {
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 812px) {
  .header-share {
    display: none;
  }
}



/* ----------------------------
	Footer
---------------------------- */
.footer {
  padding: 40px 0 24px;
  background: #303030;
  text-align: center;
  font-size: 10px;
  color: #fff;
}
.footer a {
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.footer a:hover {
  opacity: 0.6;
}
.footer-logo {
  margin-bottom: 26px;
}
.footer-sns li {
  display: inline-block;
  vertical-align: top;
}
.footer-sns a {
  display: block;
  padding: 8px;
}
.footer-sns img {
  margin-top: 1px;
}
.footer-sns svg {
  fill: #fff;
}
.footer-follow {
  display: none;
}
.footer-copy {
  margin-top: 40px;
}

@media screen and (max-width: 812px) {
  .footer {
    padding: 30px 6.6666667% 18px;
  }
  .footer-logo {
    margin-bottom: 24px;
  }
  .footer-logo img {
    width: 123.5px;
  }
  .footer-sns a {
    padding: 8px 32px;
  }
  .footer-follow {
    display: block;
    font-size: 12px;
  }
  .footer-copy {
    margin-top: 12px;
  }
}