@charset "utf-8";

/*
 * File       : modules/notice/style.css
 * Author     : STUDIO-JT (Sumi)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT NOTICE LIST
 * 2) RWD
 */



/* **************************************** *
 * JT NOTICE LIST
 * **************************************** */
.jt-profile-list {position:relative;font-size: 0;margin: -60rem -16rem;}
.jt-profile-list__item {display:inline-block;width: -webkit-calc(20% - 32rem);width: calc(20% - 32rem);margin: 60rem 16rem;}
.jt-profile-list__item a {display:block;}

.jt-profile-list__photo {width:90rem;height:90rem;border-radius:50%;overflow:hidden;display: inline-block;vertical-align:middle; position:relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black)}
.jt-profile-list__photo img { max-width:100%;}
.jt-profile-list__title {margin-left: 16rem;display:inline-block;vertical-align:middle;}
.jt-profile-list__position {font-size:16rem;color:#999;letter-spacing:-0.03em;}
.jt-profile-list__name { margin-top:-2rem; font-size:32rem; font-weight:700; letter-spacing:-0.03em;}



/* **************************************** *
 * JT NOTICE SINGLE
 * **************************************** */
.jt-profile-single {margin-top: 70rem;}
.jt-profile-single__inner { max-width:650rem; margin-left:auto; margin-right:auto; padding:80rem 80rem 100rem; border:1rem solid #ddd;}
.jt-profile-single__photo {width:120rem;height:120rem;border-radius:50%;overflow:hidden;display: inline-block;vertical-align:middle;  -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black)}
.jt-profile-single__photo img { max-width:100%;}
.jt-profile-single__title {margin-left: 20rem;display:inline-block;vertical-align:middle;}
.jt-profile-single__position {font-size:16rem;color:#999;letter-spacing:-0.03em;}
.jt-profile-single__name {font-size:36rem; font-weight:700; letter-spacing:-0.03em;}

.jt-profile-single__info  {font-size:18rem; margin-top:50rem;}
.jt-profile-single__info li {display:table;width: 100%;}
.jt-profile-single__info li + li {margin-top: 16rem;}
.jt-profile-single__info b {color:#999;display:table-cell;width: 15%; font-weight:500; }
.jt-profile-single__info p {display: table-cell;width: 85%; font-weight:500; word-break: break-all;}
.jt-profile-single__info-addr p a {position:relative; padding-right:15rem;}
.jt-profile-single__info-addr p a:after {font-family:'jt-font';font-weight:normal; content:'\e905'; font-size:10rem; display:inline-block; vertical-align:middle; margin-left:6rem; margin-top:-2rem;}
.jt-profile-single__info-phone p span { padding-right:8rem; margin-right:8rem; position:relative;}
.jt-profile-single__info-phone p span:after {width:1rem; height:16rem; background:#ddd; content:''; display:block; position:absolute; right:0; top:50%; margin-top:-8rem;}
.jt-profile-single__info-phone p span:last-child {padding-right:0; margin-right:0;}
.jt-profile-single__info-phone p span:last-child:after {display:none;} 

.jt-profile-single__link {margin-top: 50rem;padding-top: 50rem;border-top:1rem solid #000;}
.jt-profile-single__link ul {font-size:0;}
.jt-profile-single__link li {display:inline-block; vertical-align:top; width:25%; font-size:16rem; font-weight:500; text-align:center; }
.jt-profile-single__link li a {display:block;}
.jt-profile-single__link li p {position:relative; line-height:1;}
.jt-profile-single__link li p:before {width:28rem;height:28rem; line-height:28rem; font-family:'jt-font';font-weight:normal;display:block;margin: 0 auto 10rem;}

.jt-profile-single__link--phone p:before {font-size: 26rem;content:'\e918';}
.jt-profile-single__link--tel p:before {font-size: 27rem;content:'\e919';}
.jt-profile-single__link--email p:before {font-size: 25rem;content:'\e91b';}
.jt-profile-single__link--url p:before {font-size: 24rem;content:'\e91a';}

.jt-profile-single__link--copynote {padding: 18px 20px; max-width:270rem; width:100%; text-align:center; position: fixed;left: 50%;top: 50%; transform:translate(-50%, -50%); background: rgba(0,0,0,0.8);z-index: 501;opacity: 0;visibility: hidden;}
.jt-profile-single__link--copynote p {font-size: 14px;font-weight: 500;line-height: 1.6;letter-spacing: -0.025em;color: #fff;}

.jt-profile-single__item:last-child {display:none;}
#jt-profile__en .jt-profile-single__info b {width:18%;}
#jt-profile__en .jt-profile-single__info p {width:82%;}

.profile-lang__container {position: absolute;top: 52rem;right: 0;z-index: 2;-webkit-transition: top .3s;transition: top .3s;}
.profile-lang__tab li {display: block;font-size: 16rem;font-weight:700;padding-left: 26rem;border:none;position: relative;cursor:pointer;}
.profile-lang__tab li:before {display: block;width: 100%;height: 100%;position: absolute;top:-1rem;left: 0;font-family: 'jt-font';content: '\e909';font-size: 21rem;font-weight: normal;color: #000;-webkit-transition: color .3s;transition: color .3s;}
.profile-lang__tab li.profile-lang__item-active {display:none;}


/* **************************************** *
 * RWD
 * **************************************** */
@media (min-width: 2000px){
    /* single */
    .jt-profile-single {margin-top: 120rem;}
 }

 @media (max-width: 1800px){
    /* single */
    .profile-lang__container {right: 55rem;}
}

@media (max-width: 1480px){
    /* single */
    .jt-profile-single__inner {max-width:630rem;}
    .profile-lang__container {right: 3%; top: 45rem;}
    html.ios .jt-profile-single__info-phone p span:after {margin-top:-7rem;}
 
 }

@media (max-width: 1023px){

    /* list */
    .jt-profile-list {margin-top:-40rem; margin-bottom:-40rem;}
    .jt-profile-list__item {width: -webkit-calc(25% - 32rem);width: calc(25% - 32rem); margin-top:40rem; margin-bottom:40rem;}
    .jt-profile-list__name {font-size:28rem;}

    /* single */
    .jt-profile-single {margin-top:100rem;}
    .profile-lang__container {right: 30rem;}
   
}


@media (max-width: 860px){

    /* list */
    .jt-profile-list {margin-top:-30rem; margin-bottom:-30rem;}
    .jt-profile-list__item {width: -webkit-calc(33.33% - 32rem);width: calc(33.33% - 32rem); margin-top:30rem; margin-bottom:30rem;}
    .jt-profile-list__name {font-size:26rem; margin-top:5rem;}

    /* single */
    .jt-profile-single {margin-top:80rem;}
    .jt-profile-single__name {margin-top:5rem;}
    html.ios .jt-profile-single__info-phone p span:after {margin-top:-9rem;}

}


@media (max-width: 540px){

    /* list */
    .jt-profile-list {margin-top:-20rem; margin-bottom:-20rem;}
    .jt-profile-list__item {width: -webkit-calc(50% - 32rem);width: calc(50% - 32rem); margin-top:20rem; margin-bottom:20rem;}
    .jt-profile-list__photo {display:block; margin:auto;}
    .jt-profile-list__title {display:block; text-align:center; margin-left:0; margin-top:10rem;}
    .jt-profile-list__position {font-size:14rem;}
    .jt-profile-list__name {font-size:22rem; margin-top:3rem;}

    /* single */
    .jt-profile-single {margin-top:30rem;}
    .jt-profile-single__inner {max-width:inherit; margin:0 24rem;  padding:0; border:none;}
    .jt-profile-single__photo {width:90rem; height:90rem;}
    .jt-profile-single__title {margin-left:11rem;}
    .jt-profile-single__position {font-size:14rem;}
    .jt-profile-single__name {font-size: 26rem;margin-top: 3rem;}

    .jt-profile-single__info {font-size:15rem;letter-spacing: -0.03em;}
    .jt-profile-single__info b {width: 18%;}
    .jt-profile-single__info p {width: 82%;}
    .jt-profile-single__info-phone p span:after {height:12rem; margin-top:-6rem;}

    .jt-profile-single__link {margin-top:35rem; padding-top:35rem; border-top-color:#ddd;}
    .jt-profile-single__link li {font-size:14rem;}
    .jt-profile-single__link--phone p:before {font-size: 26rem;}

    .profile-lang__container {right: 24rem; top:42rem;}
    .profile-lang__tab li {font-size:13rem; padding-left:22rem;}
    .profile-lang__tab li:before {font-size:18rem;}
    
    html.ios .jt-profile-single__info-phone p span {padding-right:9rem;}
    html.ios .jt-profile-single__info-phone p span:after  {margin-top:-7rem;}
    html.ios .jt-profile-single__info-addr p a:after {margin-top:-3rem;}
}