@charset "utf-8";

/*------------------------------
	Loadign
------------------------------*/
/* pc */
#loader-bg {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10000;
    background-color: #FFFFFF;
}
#loader-bg img {	
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}
/* tablet */
@media screen and (max-width: 1024px) {
    #loader-bg img {	
        width: 10%;
    }
} 

/*------------------------------
LINK COLOR
------------------------------*/

a:link { 
    color: #6E7175;
    text-decoration: none;
}
a:visited {
    color: #6E7175;
    text-decoration: none;
}
a:hover { 
    color: #6E7175;
    text-decoration: none;
}
a:active {
    color: #6E7175;
    text-decoration: none;
}

a{
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
}
a img:hover { opacity: .85; transition: .3s; }
/*------------------------------
	共通スタイル
------------------------------*/
html {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
}
body { 
	font-size: 1.1rem;
	line-height: 1.6;
    width:100%;
    height:100vh;
	font-family: Gothic Medium BBB,sans-serif;
    color: #6E7175;
	/*	viewport
	------------------------------*/
	-webkit-text-size-adjust: 100%;
}
/*------------------------------
	PC
------------------------------*/
@media screen and (min-width: 641px) {
.spOnly{
	display: none !important;
    }
.inner{
    max-width: 625px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}  
}
/*------------------------------
	TABLET
------------------------------*/
@media screen and (max-width: 1024px) {
    img{
	width: 100%;
	height: auto;
    }
    .inner{
        width: 90%;
    }
}
/*------------------------------
	SP
------------------------------*/
@media screen and (max-width: 640px) {
    img{
	width: 100%;
	height: auto;
    }
    .pcOnly{
	display: none !important;
    }
    .inner{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

}
/*------------------------------
	clearfix
------------------------------*/
.cf:after {
	content: ".";
	display: block;
	font-size:0;
	height: 0;
	visibility:hidden;
	clear: both;
}
.cf {display: inline-block;}
* html .cf {height: 1%;}
.cf {display:block;}
/*------------------------------
	hader
------------------------------*/
/*---PC---*/
#header{
	background-color: rgba(255,255,255,1);
	width: 100%;
	height: 70px;
	top: 0;
	left: 0;
	position: fixed;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	z-index: 100;
}
.header__body{
	position: relative;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
}
#header .header__body h1{
	padding-top: 20px;
	font-size: 2.4rem;
	color: #6E7175;
	position: absolute;
	left: 0;
}
#header .header__body ul{
	position: absolute;
	right: 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	padding-top: 25px;

}
#header .header__body ul li{
	margin-left: 30px;
	font-size: 1.7rem;
}
#header .header__body ul li a{
	color: rgba(110,113,117,1);
	transition: .4s;
}
#header .header__body ul li a:hover{
	color: rgba(110,113,117,0.8);
}

/*---TABLET---*/
@media screen and (max-width: 1024px) {
	#header .header__body h1{
		font-size: 2.4vw;
	}
	#header .header__body ul li{
		font-size: 1.7vw;
	}
}
/*---SP---*/
@media screen and (max-width: 640px) {
	#header{
		height: 50px;
	}
	#header .header__body h1{
		font-size: 4.5vw;
		padding-top: 13px;
	}
	#header .header__body ul{
		padding-top: 15px;
	}
	#header .header__body ul li{
		font-size: 3.2vw;
	}
}

/*------------------------------
	portfolio
------------------------------*/
/*---PC---*/
.folio { 
  opacity: 0;
}
#portfolioWrap{
	padding-top: 70px;
}
#portfolioWrap p{
	padding: 0;
	margin: 0;
	font-size: 0;
}

#portfolioWrap img{
	width: 100%;
	height: auto;
}
/*---SP---*/
@media screen and (max-width: 640px) {
	#portfolioWrap{
		padding-top: 60px;
	}
}

/*------------------------------
	PROFILE
------------------------------*/
/*---PC---*/
.profile { 
  opacity: 0;
}
#profile_wrap{
    max-width: 750px;
    width: 75%;
	background-color: #F7F6F5;
	padding-top: 25px;
	padding-bottom: 50px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 135px;
    margin-bottom: 50px;
}
h2.section_title{
    font-size: 1.46991rem;
    letter-spacing: .15em;
    border-bottom: solid #6E7175 1.5px;
    padding-bottom: 1em;
    margin-bottom: 20px;
}
#profile_wrap dl{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
    letter-spacing: .1em;
    width: 100%;
    font-size: 1.10243rem;
    line-height: 2em;
    letter-spacing: 0;
}
#profile_wrap dl dt{
    width: 11%;
    border-right: solid #6E7175 1.5px;
    padding-bottom: 1em;
    text-align: right;
    padding-right: 3%;
    display: inline-block;
}
#profile_wrap dl dd{
    width: 81%;
    padding-bottom: 1em;
    padding-left: 3%;
    display: inline-block;
}
#profile_wrap dl dt:last-of-type,#profile_wrap dl dd:last-of-type{
    padding-top: 2em;
    padding-bottom: 0;
}
#profile_wrap dl dd ol li{
	list-style-type: none;
	counter-increment: cnt;
}
#profile_wrap dl dd ol li::before {
	content:  counter(cnt) ". ";
}

/*---TABLET---*/
@media screen and (max-width: 1024px) {
    #profile_wrap{
        margin-top: 10vw;
        margin-bottom: 5vw;
    }
}
/*---SP---*/
@media screen and (max-width: 640px) {
	.folio { 
		opacity: 1;
	}
    #profile_wrap{
        margin-bottom: 20vw;
        margin-top: 10vw;
		padding-top: 0;
		padding-bottom: 0;
        width: 90%;
		background-color: #FFFFFF;
    }
    h2.section_title{
        font-size: 3.6vw;
        border-bottom: solid #6E7175 1px;
        margin-bottom: 2vw;
    }
    #profile_wrap dl{
        font-size: 3.0vw;
        line-height: 1.5em;
        letter-spacing: .1em;
    }
    #profile_wrap dl dt{
        width: 17%;
        border-right: solid #6E7175 1px;
        padding-bottom: 2em;
        text-align: right;
        padding-right: 3%;
    }
    #profile_wrap dl dd{
        width: 76%;
        padding-bottom: 2em;
        padding-left: 3%;
    }
    #profile_wrap dl dd ol li{
        padding-left: 1.8em;
        text-indent: -1.8em;
        padding-bottom: 0.5em;
    }
    #profile_wrap dl dd ol li:last-child{
        padding-bottom: 0;
    }
}


/*------------------------------
	works
------------------------------*/
/*---PC---*/
.iv { 
  opacity: 0;
}
.works_block{
    max-width: 750px;
    width: 75%;
	background-color: #F7F6F5;
	padding-top: 25px;
	padding-bottom: 50px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
}
.works_block p{
    font-size: 1.10243rem;
    line-height: 2em;
    letter-spacing: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}
#award{
    margin-bottom: 200px;
}
/*---SP---*/
@media screen and (max-width: 640px) {
    .works_block{
        width: 90%;
        margin-bottom: 5vw;
		background-color: #FFFFFF;
		padding-top: 0;
    }
    .works_block p{
        font-size: 3.0vw;
        line-height: 2em;
        letter-spacing: .1em;
    }
    #award{
        margin-bottom: 20vw;
    }
}

/*------------------------------
	footer
------------------------------*/

/*---PC---*/
#footer{
    background-color: #C8D0D6;
    padding-top: 65px;
    padding-bottom: 25px;
    color: #FFFFFF;
    font-size: 1.0rem;
    line-height: 2.5em;
}
#footer .inner{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
}
#footer .inner a{
    color: #FFFFFF;
    text-decoration: none;
}
#footer .copyright{
    margin-left: auto;
}
/*---TABLET---*/
@media screen and (max-width: 1024px) {

}
/*---SP---*/
@media screen and (max-width: 640px) {
    #footer{
        padding-top: 7vw;
        padding-bottom: 3vw;
        font-size: 10px;;
        line-height:2.5;
        text-align: center;
    }
    #footer .inner{
        display: block;
    }
    #footer .copyright{
        padding-top: 5vw;
    }
}