@charset "utf-8";
/* CSS Document */

/* コンテンツ */
body {
	margin:0 0;
	line-height:1.7em;
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings : "palt";
    letter-spacing: 0.1em;
}
#loader{
            width: 80px;
            height: 80px;
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -40px;       /* heightの半分のマイナス値 */
            margin-left: -40px;      /* widthの半分のマイナス値 */
            z-index: 10;             /* #fadeより多い値を入れて下さい */
}
#fade{
            width: 100%;
            height: 100%;
            display: none;
            background-color: #fff;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 5;              /* #loaderより少ない値を入れて下さい */
}
.english {
    font-size:80%;
    margin-top:10vh;
}
.float-l{
    float:left;
}
.float-r{
    float:right;
}
#wrapper {
	width:100%;
	position:relative;
}
.small {
    font-size:60%;
}
.big {
    font-size:300%;
}

.margin-left1em {
    margin-left:1em;
}
a.anchor{
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}
#pc-menu {
	display: block;
}
#sp-menu {
    display: none;
}
@media screen and (max-width: 768px) {
#pc-menu {
	display: none;
}
#sp-menu {
    display: block;
}
}
h2 {
    width:100%;
    display: block;
    text-align: center;
    color:#000;
    font-family: 'Raleway', sans-serif;
    font-size:2vw;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
h2 {
    width:100%;
    display: block;
    text-align: center;
    font-size:6.5vw;
    line-height:8vw;
}
}
h3 {
    display: block;
    text-align: left;
    color:#000;
    font-family: 'Noto Sans JP', sans-serif;
    font-size:1.6vw;
    font-weight: normal;
    padding:0 0 0.5vw 0;
    margin:0 auto 2vw;
}
@media screen and (max-width: 768px) {
h3 {
    font-size:5.5vw;
    display: block;
    margin:0 auto 6vw;
}
}
.title-underline-b {
    margin:0 auto;
    width:30px;
    border-top: solid 2px #666;
}
.title-underline-w {
    margin:0 auto;
    width:30px;
    border-top: solid 2px #fff;
}
@media screen and (max-width: 768px) {
.title-underline-b {
    margin:0 auto 30vw;
    width:30px;
    border-top: solid 4px #666;
}
}

.caution, .caution02{
    font-size:50%;
    color:#000;
    display: inline-block;
    margin-left:5px;
    vertical-align:bottom;
}
@media screen and (max-width: 768px) {
.caution{
    font-size:80%;
    color:#000;
    display:inline;
    margin-left:5px;
    vertical-align:bottom;
    width:100%;
}
.caution02{
    font-size:80%;
    color:#000;
    display:block;
    vertical-align:bottom;
    width:100%;
    margin-bottom:4vw;
}
}
.sub-header {
    width:100%;
}
.sub-header img{
    width:100%;
    height:auto;
}
.sub-header-sp {
    display: none;
}
@media screen and (max-width: 768px) {
.sub-header {
    display: none;
}
.sub-header-sp {
    display: block;
    width:100%;
    padding-top:40px;
}
.sub-header-sp img{
    width:100%;
    height:auto;
}
}

/*===================================
hero
===================================*/
/* wrap */
.hero {
  position: relative;
}

/* video */
.video-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
.video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* overlay */

.overlay::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0);
}

/* text */

.text-box {
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
}
h1 {
    font-size: 6vw;
    line-height: 1;
    padding: 0 50px;
    text-align: left;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    padding-left: 5vw;
    padding-bottom: 1vw;
}
@media screen and (max-width: 768px) {
.text-box {
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
}
    h1{
        font-size:10vw;
    }
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.hero-title img{
    width:60%;
    height:auto;
    image-rendering: -webkit-optimize-contrast;
}
.sp-hero{
    display: none;    
}
.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #FB9A5B;
}
@media screen and (max-width: 768px) {
.pc-hero{
    display: none;    
}
.sp-hero{
    position: relative;
    display: block; 
    height:100vh;
    background-image: url("../img/kv-top-sp.jpg");
    background-position: top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.hero-title {
    position: relative;
    width: 90%;
    top:75vh;
    left:0;
}
.hero-title img{
    width:50%;
    height:auto;
    image-rendering: crisp-edges;
}
}

/*===================================
introduction
===================================*/
.introduction-wrapper{
    background-color:rgba(255,255,255,1);
    width:80%;
    padding:10vh 10% 5vh;
}
.introduction {
    max-width:800px;
    color:#000;
    line-height:1.5em;
    margin:0 auto;
}
.introduction-txt {
    max-width:800px;
    color:#000;
    font-size:1vw;
    line-height:200%;
    margin:10vh auto;
}

@media screen and (max-width: 768px) {
.introduction-wrapper{
    background-color:rgba(255,255,255,1);
    width:100%;
    padding:80px 0;
    color:#666;
}
.introduction {
    width:90%;
    margin:0 5%;
}
.introduction-txt {
    width:100%;
    font-size:4.5vw;
    margin:0 0 24vw;
    line-height:8vw;
}

.introduction-txt a{
    color:#000;
}
}

/*===================================
portfolio01
===================================*/
#portfolio01{
    position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
    width: 100%;
    height:70vh;
    overflow: hidden;/*はみ出しているところを隠す*/
}
.portfolio01 {
    position: fixed;/*背景を固定するためfixedをかける*/
    z-index: -100;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
    /*以下画面で背景画像を表示させるための指定*/
    width: 100%;
    height:100vh;
    background: url("../img/portfolio02.jpg");/*背景画像の設定※オリジナルの画像に設定してください*/
    background-size:cover;
    transform-origin:bottom;/*変化する基点を中心からに設定*/
    background-position: center center;
    background-repeat: repeat-y;
}


/*===================================
profile
===================================*/
.profile-wrapper{
    background-color:#fff;
    width:100%;
    padding:10vh 0 5vh;
}
.profile {
    max-width:1020px;
    color:#000;
    line-height:1.5em;
    margin:0 auto;
}

.profile-txt {
    max-width:1020px;
    color:#000;
    font-size:1vw;
    line-height:200%;
    margin:10vh auto;
}
.message {
    text-align: center;
    margin-bottom:15vh;
    width:100%;
    display: block;
    line-height:300%;
}

@media screen and (max-width: 768px) {
.profile-wrapper{
    background-color:rgba(255,255,255,1);
    width:100%;
    padding:80px 0;
    color:#fff;
}
.profile {
    width:90%;
    margin:0 5%;
}
.profile-txt {
    width:100%;
    font-size:4.5vw;
    margin:0 0 24vw;
    line-height:8vw;
}

.profile-txt a{
    color:#000;
}
.profile-name {
    width:100%;
    margin:5vh auto;
}
.name{
    font-size:10vw;
    letter-spacing: 0.2vw;
    line-height:13vw;
}
.small-title {
    font-size:25%;
    border-top:solid 1px #333;
    padding-top:3vh;
    margin-top:3vh;
    line-height: 160%;
}
}

/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}
/* 画像のサイズ調整 */
.swiper-slide img {
    height: auto;
    width: 100%;
    vertical-align: bottom;
}



/* お問い合わせ */
.contact-wrapper {
    background-color:#eee;
    width:80%;
    padding:80px 10% 80px;
}
.contact {
    max-width:980px;
    margin:0 auto;
}
@media screen and (max-width: 768px) {
.contact-wrapper {
    background-color:#eee;
    width:100%;
    padding:80px 0 80px;
}
.contact {
    width:90%;
    margin:0 auto; 
}
}


/* フッター */
footer {
	background-color: #000;
	width:100%;
	padding:40px 0;
    font-size:0.8vw;
    color:#ECECEC;
    text-align: center;
}
footer #wrap{
	margin:0 auto;
    
}
@media screen and (max-width: 768px) {
footer{
	font-size:3vw;
}
}