@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i|Lato:300,400,700,900|Noto+Serif+JP:300,400,500,600,700,900&display=swap');

/* reset,preset
**************************************************************************************************/
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{display:block; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
ul { list-style:none; margin:0; padding:0; }
li { margin:0; padding:0; }
input, select { vertical-align:middle; }
img { vertical-align:middle; }

a { color: #000; text-decoration:none;  -webkit-transition: all 0.5s; transition: all 0.5s; }
a:visited {  color: #000;}
a:hover{ opacity:0.8; }
a.hover:hover{ opacity:1; }
a.nothov:hover{ opacity:1; }
a img { border:0; position:relative; }

.fadein {
	opacity : 0;
	transform : translate(0px, 60px);
	transition : all 600ms;
	}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
	}

.fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.fadein:nth-of-type(3) {
	-moz-transition-delay:300ms;
	-webkit-transition-delay:300ms;
	-o-transition-delay:300ms;
	-ms-transition-delay:300ms;
	}
.fadein:nth-of-type(4) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.fadein:nth-of-type(5) {
	-moz-transition-delay:500ms;
	-webkit-transition-delay:500ms;
	-o-transition-delay:500ms;
	-ms-transition-delay:500ms;
	}
.fadein:nth-of-type(6) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}

.fadein:nth-of-type(7) {
	-moz-transition-delay:700ms;
	-webkit-transition-delay:700ms;
	-o-transition-delay:700ms;
	-ms-transition-delay:700ms;
	}




/* mediaquery
**************************************************************************************************/

/* fontsize,color
**************************************************************************************************/
html {
    font-size: 62.5%;
}
body { 
         padding: 0; margin:0; 
         font-family: '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
         font-size: 15px; letter-spacing: 0.05em; line-height: 1.8; color: #000;
}

p, a, p.title {
        -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tcw { 
        color: #fff!important;
}
h1.en {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 80px;
        line-height: 1.1;
}

h1.en span {
          display: block;
         font-weight: 700;
}

h1.jp {
          display: block;
         font-family: 'Noto Serif JP', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
        font-weight: 500;
        font-size: 21px;
        padding-top: 25px;
        -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 30px;
        letter-spacing: 0.2rem;
         /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
}

h2 span {
     display: block;
         font-family: 'Noto Serif JP', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
}


a.type01 {
  position: relative;
  width: 70%;
  max-width: 135px;
  display: block;
  font-family: 'Lato', sans-serif;
        font-weight: 500;
        font-size: 16px;
   display: flex;
align-items: center;
}

a.type01:after {
border-top: 3px solid #000;
content: "";
flex-grow: 1;
}
a.type01:after {
margin-left: 1rem;
}


h2.sub,
p.sub{
        display: block;
        padding-top: 15px;
        font-family: 'Crimson Text', serif;
        font-weight: 100;
        font-style: italic;
        font-size: 23px;
        letter-spacing: 0;
        line-height: 1.3;
}

h3 {
       font-family: 'Noto Serif JP', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
        font-weight: 500;
        font-size: 25px;
        padding-bottom: 20px;
       -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3.sans {
        font-family: '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
        font-weight: bold;
        font-size: 26px;
        padding-bottom: 40px;
        letter-spacing: 0;
        color: #212121;/* 343434*/
         /*-webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;*/
}

h4 {
       /*font-family: 'Noto Serif JP', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;*/
        font-weight: 500;
        font-size: 18px;
         -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
       padding: 25px 0 0;
}

h4 span {
     display: block;
     font-size: 80%;
}


h5 {
        font-weight: bold;
        font-size: 18px;
}

@media screen and (max-width: 768px) {
body { 
         font-size: 14px; letter-spacing: 0.04em; line-height: 1.5;
}
h1.en {
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 45px;
        line-height: 1.1;
}

h1.en span {
          display: block;
         font-weight: 700;
}

h1.jp {
        font-weight: 500;
        font-size: 18px;
        padding-top: 25px;
}
h2 {
        font-size: 22px;
        line-height: 1.6;
}
a.type01 {
  position: absolute;
  width: 70%;
  max-width: 100px;
  display: block;
  font-family: 'Lato', sans-serif;
        font-weight: 500;
        font-size: 14px;
   display: flex;
align-items: center;
    right: 10px;
}
a.type01:after {
border-top: 2px solid #000;
margin-left: 5px;
}
h2.sub, p.sub{
        padding-top: 0;
        font-size: 16px;
        line-height: 1.0;
	text-align: center;
}
h3 {
        font-weight: 500;
        font-size: 20px;
        padding: 5px 0 10px;
}
h3.sans {
        font-size: 17px;
        padding-bottom: 25px;
}
h4 {
        font-weight: 400;
        font-size: 17px;
       padding: 10px 0 0;
       -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
}
h4 span {
     font-size: 75%;
}
}

/* animate
**************************************************************************************************/
.has-drifting { opacity:0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);  }


/* loading
**************************************************************************************************/
#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #F9FFFB;
 
}
#loader .loader-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 40px;
}
#loader .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes slideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

/* box
**************************************************************************************************/
.ib_wrap { letter-spacing: -1em; }



/* float-align
**************************************************************************************************/
.clear { clear:both; }
.flr { float:right; }
.fll { float:left; }
.center { text-align: center!important; } 
.center img { display:inline; }
.left { text-align: left; } 
.flrpic { float:right; display:inline; margin:0px 0px 15px 15px; }
.flrpic img { margin-bottom:5px; display:inline; }
.fllpic { float:left; margin:0px 15px 15px 0px; }
.fllpic img { margin-bottom:5px; display:inline; }
.centerpic { margin:0px auto; text-align:center; }
.centerpic img { margin-bottom:5px; display:inline; }
.flrtbl { float:right; margin:0px 0px 25px 25px; }
.flltbl { float:left; margin:0px 25px 25px 0px; }
.alr { text-align:right!important; }
.alr img { display:inline; }
.inline { display:inline; }
.all { text-align:left!important; }
.mauto { margin:0px auto!important; }

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



/* box
**************************************************************************************************/
.embed { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom:10px; }
.embed iframe,
.embed object,
.embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media screen and (min-width: 768px) {
.embed { margin-bottom:15px; }
}


/* clrfix
**************************************************************************************************/
.clrfix:after,
.section:after,
.inner:after,
.block:after,
.box:after,
.set:after { 
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

.clrfix,
.section,
.inner,
.block,
.box,
.set {  
	display:inline-table;
	min-height:1%;
}

* html .clrfix,
* html .section,
* html .inner,
* html .block,
* html .box,
* html .set { 
	height:1px;
}

.clrfix,
.section,
.inner,
.block,
.box,
.set {  
	display:block;
}

/* clearfix */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.cf:before,
.cf:after {
  content: "";
  display: block;
  overflow: hidden; 
}

.cf:after {
  clear: both; 
}

.cf {
  zoom: 1; 
}

.noscript {
  display: none; }

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

img[src$=".svg"] {
  width: 100%; }