@charset "UTF-8";

/* //////////////////////////////////////////////////
[LAYOUT]
////////////////////////////////////////////////// */

body {
    overflow: hidden;
    position: relative;
}
#container {
    position: relative;
    width: 100%;
    height: 5000px;
}
#content {
    overflow: hidden;
    position: fixed;
    top: 0;
    left 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg/mokume.jpg);
    background-size: cover;
}
#content .message {
    opacity: 0;
}
#content.loadend .message {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 300px;
    margin: -150px 0 0 -225px;
    background-image: url(../img/pic/message.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 50%;
    opacity: 1;
}
.contentBlock {
}
.pageBlock {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1280px;
    height: 900px;
    margin:  -450px 0 0 -640px;
    padding: 50px;
    background-size: 94px auto;
    background-position: right 30px top 55px;
    opacity: 0;
}
.pageBlock .pageTitle {
    font-size: 40px;
}
.pageBlock .pageNum {
    position: absolute;
    bottom: 50px;
    right: 50px;
    margin: 0;
    font-size: 24px;
}
.pageBlock.titleBlock {
    height: 900px;
}
.pageBlock.titleBlock h1 {
    font-size: 60px;
    line-height: 800px;
}

/* //////////////////////////////////////////////////
[MODULE]
////////////////////////////////////////////////// */

br.sp {
    display: none;
}
.profileLinks {
    position: absolute;
    left: 457px;
    bottom: 42px;
}
.profileLinks li {
    height: 34px;
}
.profileLinks li a {
    display: inline-block;
    padding-left: 46px;
    color: #0eb2e8;
    font-size: 16px;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 500;
    line-height: 34px;
    text-decoration: underline;
    background-position: 13px 50%;
}
.profileLinks li a:hover {
    text-decoration: none;
}
.profileLinks .twitter a {
    background-size: 18px auto;
}
.profileLinks .instagram a {
    background-size: 17px auto;
}
.profileLinks .mail a {
    background-size: 18px auto;
} 
.linkButtons li a {
    display: block;
    font-size: 18px;
    height: 60px;
    line-height: 54px;
    border: solid 3px black;
    border-radius: 5px;
}
.linkButtons li.external a {
    background-size: 13px auto;
    background-position: right 10px top 50%;
}
.linkButtons li a:hover {
    background-color: #eee;
}
.linkTexts li {
    margin-top: 10px;
}
.linkTexts li:first-child {
    margin-top: 0;
}
.linkTexts li a {
    padding-left: 30px;
    font-size: 15px;
    line-height: 30px;
    background-size: 13px auto;
    background-position: 0 10px;
}

/* //////////////////////////////////////////////////
[OUTLINE]
////////////////////////////////////////////////// */

/* --------------------------------------------------
    pageHome
-------------------------------------------------- */
.pageHome {
    padding-top: 120px;
    padding-bottom: 45px;
}
.pageHome .tagline {
    font-size: 32px;
}
.pageHome .logoMark {
}
.pageHome .logoMark a {
    width: 500px;
    height: 360px;
    margin: 0 auto;
}
.pageHome h1 a {
    width: 500px;
    cursor: pointer;
}
.pageHome h1 a img {
    width: 500px;
    height: auto;
    cursor: pointer;
}
.pageHome .credit {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 100%;
}
.pageHome .credit .job {
    font-size: 16px;
    margin-bottom: 17px;
}
.pageHome .credit .name {
    font-size: 28px;
    margin-bottom: 16px;
}
.pageHome .credit .id {
    font-size: 24px;
}

/* --------------------------------------------------
    pageOutline
-------------------------------------------------- */
.pageOutline {
}
.pageOutline h2 {
    margin-bottom: 90px;
}
.pageOutline .sentence {
    margin-bottom: 60px;
}
.pageOutline .sentence p {
    font-size: 22px;
}
.pageOutline .photo {
    position: absolute;
    left: 50px;
    bottom: 50px;
}
.pageOutline .photo img {
    width: 380px;
    height: auto;
}

/* //////////////////////////////////////////////////
[WORKS]
////////////////////////////////////////////////// */

/* --------------------------------------------------
    pageWork
-------------------------------------------------- */
.pageWork {
}
.pageWork h1 {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1;
}
.pageWork h1 a:hover {
    color: #0eb2e8;
}
.pageWork .info {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 60px;
}
.pageWork .leftBlock {
    float: left;
    width: 498px;
}
.pageWork .leftBlock p {
    margin-top: 10px;
}
.pageWork .leftBlock p:first-child {
    margin: 0;
}
.pageWork .leftBlock a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
}
.pageWork .leftBlock a:hover:after {
    opacity: 1;
}
.pageWork .leftBlock img {
    width: 498px;
    height: auto;
}
.pageWork .rightBlock {
    margin-left: 538px;
    padding-bottom: 32px;
}
.pageWork .rightBlock h2 {
    margin-bottom: 20px;
    font-size: 22px;
}
.pageWork .rightBlock .sentence {
}
.pageWork .rightBlock .sentence p {
    font-size: 18px;
    margin-top: 10px;
} 
.pageWork .rightBlock .sentence p:first-child {
    margin-top: 0;
}
.pageWork .rightBlock .linkTexts {
    margin-top: 15px;
}
.pageWork .rightBlock .linkButtons {
    width: 700px;
    margin-top: 115px;
} 
.pageWork .rightBlock .linkButtons li {
    float: left;
    width: 209px;
    margin-left: 8px;
    margin-bottom: 8px;
} 
.pageWork .rightBlock .linkButtons li:nth-child(1),
.pageWork .rightBlock .linkButtons li:nth-child(4),
.pageWork .rightBlock .linkButtons li:nth-child(7),
.pageWork .rightBlock .linkButtons li:nth-child(10),
.pageWork .rightBlock .linkButtons li:nth-child(13),
.pageWork .rightBlock .linkButtons li:nth-child(16),
.pageWork .rightBlock .linkButtons li:nth-child(19) {
    margin-left: 0;
}

/* --------------------------------------------------
    pageOtherWork
-------------------------------------------------- */
.pageOtherWork {
    padding-bottom: 120px;
}
.pageOtherWork h1 {
    margin-bottom: 155px;
}
.pageOtherWork .unitOtherWork {
    margin-top: 80px;
    width: 570px;
}
.pageOtherWork .unitOtherWork:nth-child(2),
.pageOtherWork .unitOtherWork:nth-child(3) {
}
.pageOtherWork .unitOtherWork:nth-child(odd) {
    float: left;
}
.pageOtherWork .unitOtherWork:nth-child(even) {
    float: right;
}
.pageOtherWork .unitOtherWork .image {
    margin-bottom: 28px;
}
.pageOtherWork .unitOtherWork .image a {
    display: block;
    position: relative;
}
.pageOtherWork .unitOtherWork .image a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
}
.pageOtherWork .unitOtherWork .image a:hover:after {
    opacity: 1;
}
.pageOtherWork .unitOtherWork .image img {
    width: 570px;
    height: auto;
}
.pageOtherWork .unitOtherWork h2 {
    font-size: 24px;
    line-height: 1;
} 
.pageOtherWork .unitOtherWork h2 a:hover {
    color: #0eb2e8;
}
.pageOtherWork .unitOtherWork .info {
    margin-top: 15px;
    font-size: 14px;
}
.pageOtherWork .unitOtherWork .sentence {
    margin-top: 23px;
}
.pageOtherWork .unitOtherWork .sentence p {
    font-size: 16px;
}
.pageOtherWork .unitOtherWork .links {
    margin-top: 10px;
}
.pageOtherWork .unitOtherWork .links li {
    display: inline-block;
    margin-right: 10px;
}
.pageOtherWork .unitOtherWork .links li a {
    font-size: 16px;
    border-bottom: solid 1px #0eb2e8;
}
.pageOtherWork .unitOtherWork .links li a:hover {
    border-bottom: none;
}

/* --------------------------------------------------
    pageMoreWorks
-------------------------------------------------- */
.pageMoreWorks {
}
.pageMoreWorks h1 {
    margin-bottom: 100px;
}
.pageMoreWorks .leftBlock {
    float: left;
    width: 498px;
}
.pageMoreWorks .leftBlock .blank {
    height: 660px;
    border: solid 2px black;
}
.pageMoreWorks .rightBlock {
    margin-left: 538px;
} 
.pageMoreWorks .rightBlock h2 {
    margin-bottom: 20px;
    font-size: 22px;
}
.pageMoreWorks .rightBlock h2:after {
    width: 2px;
    height: 32px;
    margin-left: 10px;
}
.pageMoreWorks .rightBlock .sentence p {
    font-size: 18px;
}

/* //////////////////////////////////////////////////
[PROFILE]
////////////////////////////////////////////////// */

/* --------------------------------------------------
    pageAbility
-------------------------------------------------- */
.pageAbility {
    padding-bottom: 250px;
}
.pageAbility h1 {
    margin-bottom: 200px;
}
.pageAbility .ability {
    position: relative;
    left: -100px;
    width: 1380px;
    text-align: center;
}
.pageAbility .ability li {
    display: inline-block;
    width: 365px;
    margin: 0 15px;
    vertical-align: top;
}
.pageAbility .ability li .pic {
    margin-bottom: 38px;
}
.pageAbility .ability li .pic img {
    width: 190px;
    height: auto;
}
.pageAbility .ability li .name {
    margin-bottom: 25px;
    font-size: 28px;
}
.pageAbility .ability li .sentence {
    font-size: 18px;
}

/* --------------------------------------------------
    pageInfo
-------------------------------------------------- */
.pageInfo {
    padding-bottom: 210px;
}
.pageInfo h1 {
    margin-bottom: 150px;
} 
.pageInfo .unitInfoWrap {
    position: relative;
    left: -100px;
    width: 1380px;
    text-align: center;
}
.pageInfo .unitInfoWrap li {
    display: inline-block;
    width: 590px;
    vertical-align: top;
}
.pageInfo .unitInfoWrap li a {
    display: block;
    width: 400px;
    height: 450px;
    margin: 0 auto;
    padding-top: 50px;
    background-color: #fff;
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;    
}
.pageInfo .unitInfoWrap li a:hover {
    background-color: #eee;
}
.pageInfo .unitInfoWrap li a .pic {
    margin-bottom: 42px;
    text-align: center;
}
.pageInfo .unitInfoWrap li a .pic img {
    width: 190px;
    height: auto;
} 
.pageInfo .unitInfoWrap li a .name {
    margin-bottom: 25px;
    font-size: 28px;
}
.pageInfo .unitInfoWrap li a .sentence {
    font-size: 18px;
}

/* --------------------------------------------------
    pageProfile
-------------------------------------------------- */
.pageProfile {
}
.pageProfile h1 {
    margin-bottom: 95px;
}
.pageProfile h2 {
    margin-bottom: 35px;
}
.pageProfile h2 em {
    font-size: 32px;
    margin-right: 34px;
}
.pageProfile h2 span {
    font-size: 16px;
}
.pageProfile .sentence {
}
.pageProfile .sentence p {
    font-size: 22px;
}
.pageProfile .photo {
    position: absolute;
    left: 50px;
    bottom: 50px;
}
.pageProfile .photo img {
    width: 268px;
    height: auto;
}
.pageProfile .profileLinks {
    display: none;
}

/* --------------------------------------------------
    pageMedia
-------------------------------------------------- */
.pageMedia {
    padding-bottom: 105px;
} 
.pageMedia h1 {
    margin-bottom: 100px;
}
.pageMedia .unitMediaWrap {
    position: relative;
    left: -100px;
    width: 1380px;
    text-align: center;
}
.pageMedia .unitMedia {
    display: inline-block;
    width: 366px;
    height: 612px;
    margin: 0 20px;
    padding-top: 40px;
    text-align: left;
    vertical-align: top;
    border-bottom: solid 6px black;
    border-top: solid 6px black;
}
.pageMedia .unitMedia h2 {
    margin-bottom: 31px;
    font-size: 32px;
}
.pageMedia .unitMedia ul {
}
.pageMedia .unitMedia ul li {
    font-size: 18px;
}
.pageMedia .unitMedia p {
    font-size: 18px;
}

/* --------------------------------------------------
    pageCompany
-------------------------------------------------- */
.pageCompany {
    padding-bottom: 340px;
}
.pageCompany h1 {
    margin-bottom: 275px;
}
.pageCompany dl dt { 
    width: 132px;
    font-size: 22px;
    line-height: 2.2;
}
.pageCompany dl dd {
    font-size: 22px;
    line-height: 2.2;
}

/* --------------------------------------------------
    pageSnsShare
-------------------------------------------------- */
.pageSnsShare {
    padding-bottom: 65px;
    display: block !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.4) !important;
}
.pageSnsShare .block {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: center;
}
.pageSnsShare .block p {
    font-size: 22px;
    margin-bottom: 30px;
} 
.pageSnsShare .block .shareButtons li {
    margin: 0 7px;
}
.pageSnsShare .block .shareButtons li a {
} 
.pageSnsShare .block .shareButtons li a:hover {
    opacity: 0.8;
}
.pageSnsShare .block .shareButtons li a img {
    width: 90px;
    height: auto;
}
.pageSnsShare .copyright {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    font-size: 18px;
}

/* //////////////////////////////////////////////////
[MENU]
////////////////////////////////////////////////// */

/* --------------------------------------------------
    navInternal
-------------------------------------------------- */
#navInternal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
} 
#navInternal h2 {
    display: none;
}
#navInternal ul {
    width: 1000px;
} 
#navInternal ul li {
    cursor: pointer;
    position: relative;
    float: left;
    color: white;
    font-size: 18px;
    font-family: 'Maven Pro', sans-serif;    
    font-weight: 500;    
    padding: 10px 20px;
    letter-spacing: 0.1em;
}
#navInternal ul li:after {
    content:"";
    position: absolute;
    left: -1px;
    top: 17px;
    width: 2px;
    height: 15px;
    background-color: white;
} 
#navInternal ul li:first-child:after {
    display: none;
}
#navInternal ul li:hover {
    opacity: 0.9;
}
#navInternalCover { 
    display: none;
}
#btnMenuOpen {
    display: none;
}


/* //////////////////////////////////////////////////
[DETAIL]
////////////////////////////////////////////////// */

#contentDetail section {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1280px;
    height: 900px;
    margin:  -450px 0 0 -640px;
    padding: 50px;
    background-size: 94px auto;
    background-position: right 30px top 55px;
    opacity: 0;
}
#contentDetail section h2 {
    font-size: 40px;
    line-height: 1;
}
#contentDetail section .pageNum {
    position: absolute;
    bottom: 50px;
    right: 50px;
    margin: 0;
    font-size: 24px;
}

/* --------------------------------------------------
    pageDetailTop
-------------------------------------------------- */ 
.pageDetailTop {
    position: relative;
}
.pageDetailTop .block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    margin-left: -45%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: center;
}
.pageDetailTop h1 {
    margin-bottom: 32px;
    font-size: 60px;
    line-height: 1;
}
.pageDetailTop .info {
    line-height: 1;
    font-size: 18px;
}
.pageDetailTop .linkButtons {
    position: absolute;
    width: 100%;
    bottom: 40px;
    left: 0;;
    text-align: center;
}
.pageDetailTop .linkButtons li {
    display: inline-block;
    width: 209px;
    margin: 0 2px;
}

/* --------------------------------------------------
    pageTypeImages
-------------------------------------------------- */ 
.pageTypeImages {
    position: relative;
}
.pageTypeImages .block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1500px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    text-align: center;
}
.pageTypeImages p {
    display: inline-block;
    margin: 18px;
} 

/* --------------------------------------------------
    pageTypeVideo
-------------------------------------------------- */ 
.pageTypeVideo {
    position: relative;
}
.pageTypeVideo .block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1500px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    text-align: center;
}
.pageTypeVideo p {
    display: inline-block;
    margin: 18px;
} 



/* --------------------------------------------------
    pageTypeWithCaption
-------------------------------------------------- */
.pageTypeWithCaption {
}
.pageTypeWithCaption h2 {
    margin-bottom: 100px;
    font-size: 40px;
}
.pageTypeWithCaption .leftBlock {
    float: left;
    width: 498px;
}
.pageTypeWithCaption .leftBlock p {
    margin-top: 10px;
}
.pageTypeWithCaption .leftBlock p:first-child {
    margin: 0;
}
.pageTypeWithCaption .leftBlock img {
    width: 498px;
    height: auto;
}
.pageTypeWithCaption .rightBlock {
    margin-left: 538px;
    padding-bottom: 32px;
}
.pageTypeWithCaption .rightBlock h3 {
    margin-bottom: 20px;
    font-size: 22px;
}
.pageTypeWithCaption .rightBlock .sentence {
}
.pageTypeWithCaption .rightBlock .sentence p {
    font-size: 18px;
    margin-top: 10px;
} 
.pageTypeWithCaption .rightBlock .sentence p:first-child {
    margin-top: 0;
}
.pageTypeWithCaption .rightBlock .linkTexts {
    margin-top: 15px;
}
.pageTypeWithCaption .rightBlock .linkButtons {
    width: 700px;
    margin-top: 115px;
} 
.pageTypeWithCaption .rightBlock .linkButtons li {
    float: left;
    width: 209px;
    margin-left: 8px;
    margin-bottom: 8px;
} 
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(1),
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(4),
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(7),
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(10),
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(13),
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(16),
.pageTypeWithCaption .rightBlock .linkButtons li:nth-child(19) {
    margin-left: 0;
}

/* --------------------------------------------------
    pageTypeSentence
-------------------------------------------------- */
.pageTypeSentence {
}
.pageTypeSentence h2 {
    margin-bottom: 84px;
}
.pageTypeSentence .sentence {
}
.pageTypeSentence .sentence p {
    font-size: 22px;
    margin-top: 25px;
}
.pageTypeSentence .sentence p:first-child {
    margin-top: 0;
}

/* --------------------------------------------------
    pageTypeSentenceCenter
-------------------------------------------------- */
.pageTypeSentenceCenter {
} 
.pageTypeSentenceCenter .block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1500px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    text-align: center;
}
.pageTypeSentenceCenter h2 {
    margin-bottom: 84px;
}
.pageTypeSentenceCenter .linkTexts { 
    display: inline-block;
    max-width: 600px;
    text-align: left;
}
.pageTypeSentenceCenter .sentence {
} 
.pageTypeSentenceCenter .sentence p {
    font-size: 22px;
    margin-top: 25px;
} 
.pageTypeSentenceCenter .sentence p:first-child {
    margin-top: 0;
}
.pageTypeSentenceCenter .credit dl dt { 
    font-size: 22px;
    padding-right: 55px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pageTypeSentenceCenter .credit dl dd {
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pageTypeSentenceCenter .credit dd span { 
    font-size: 16px;
}