@charset "UTF-8";

/* ---------------------------------------------
	WORKSページ
--------------------------------------------- */


/* ---------------------------------------------
	アナウンサー密着ページ
--------------------------------------------- */

/*------------------トップビジュアル------------------*/
#topVisual{ position: relative; margin-bottom: 60px;}
.contents #topVisual{ height: 36vw;}
.contents #topVisual.vw44{ height: 500px;}
#topVisual.w_full{ height: 50vw; overflow: hidden;}
.works #topVisual.w_full{ height: auto;}
#topVisual::before{
    content: "";
    display: block;
    width: 100%;
    height: 200px;
    background-color: #00aabe;
    position: absolute;
    background-image: url("../img/bg01.png");
    background-repeat: repeat-x;
    background-position: left 0;
    background-size: auto;
    background-attachment: fixed;
    z-index: 100;
}
#topVisual .photoWrap{
    background-color: #eee;
    width: 70%;
    height: auto;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 300;
}
#topVisual.w_full .photoWrap{
    width: 96%;
    position: relative;
    right: auto;
    margin: 0 auto 0;
    overflow: hidden;
}
#topVisual .photoWrap img{ width: 100%; height: auto;}
#topVisual.w_full .photoWrap img{ margin-top: -7vw;}
.works #topVisual.w_full .photoWrap img{ margin-top: 0;}
@media screen and (min-width:1400px) {
    .contents #topVisual{ height: 500px;}
    #topVisual .photoWrap{
        width: 960px;
    }
    #topVisual.w_full{
        height: auto;
    }
    #topVisual.w_full .photoWrap{ width: 1200px;}
    #topVisual.w_full .photoWrap img{ margin-top: -70px;}
    .works #topVisual.w_full .photoWrap img{ margin-top:0;}
}
#topVisual .txtWrap{
    position: relative;
    z-index: 500;
    padding: 0 0 30px;
}
#topVisual h2{
    font-size: 260%;
    font-weight: normal;
    font-weight: 200;
    color: #fff;
    line-height: 1.0;
    position: relative;
    text-indent: 2.5%;
    margin-bottom: 20px;
    z-index: 500;
    padding: 36px 0 0;
}

#topVisual h2::after{
    content: "";
    display: block;
    width: 40%;
    height: 5px;
    background-color: #ffde48;
    position: absolute;
    bottom: 0px;
}
#topVisual #subTtl{
    margin: 0 0 10px 2.5%;
    background-color: rgba(255,255,255,0.9);
    display: inline-block;
    padding: 8px 16px;
    line-height: 1.0;
    font-size: 124%;
    color: #00a0e9;
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
}
#topVisual h3{
    padding-left: 3%;
    font-size: 148%;
    font-weight: 500;
    color: #fff;
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
    margin-bottom: 36px;
    text-shadow: 1px 1px 15px #00aabe;
}
@media screen\0 {
    #topVisual h3{
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    #topVisual h3{
        font-weight: bold;
    }
}
#topVisual h3 span{ font-size: 80%;}
.contents #topVisual h3{ margin-bottom: 76px;}
#topVisual #topCatch,
.contents #topVisual .topCatch{
    margin: 0 2.5% 30px 2.5%;
    background-color: rgba(225, 252, 255, 0.8);
    display: inline-block;
    padding: 8px 16px;
    line-height: 1.0;
    font-size: 124%;
    color: #555;
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
}
.contents #topVisual .topCatch{
    margin: 0 2.5% 10px 2.5%;
}

.contents #topVisual .lead{
    margin: 0 2.5% 10px 2.5%;
    line-height: 1.6;
    color: #555;
    background-color: rgba(255,255,255,0.9);
    display: inline-block;
    padding: 1em;
}
#topVisual #profWrap{
    margin: 0 2.5% 0;
    padding: 0 1.2% 0;
}
#topVisual #profWrap > dl,
#introWrap #profWrap > dl{
    padding: 0 0 30px;
    position: relative;
}
#introWrap #profWrap dl{
    width: 50%;
    float: left;
}
#topVisual #profWrap > dl > dt,
#introWrap #profWrap > dl > dt{
    background-color: #00a0e9;
    color: #fff;
    display: inline-block;
    line-height: 1.0;
    padding: 4px 4px 4px 8px;
    font-weight: bold;
    font-weight: 500;
    margin-bottom: 6px;
    position: relative;
}
@media screen\0 {
    #topVisual #profWrap > dl > dt,
    #introWrap #profWrap > dl > dt{
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    #topVisual #profWrap > dl > dt,
    #introWrap #profWrap > dl > dt{
        font-weight: bold;
    }
}
#topVisual #profWrap > dl > dt::after,
#introWrap #profWrap > dl > dt::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0; right: -14px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 24px 0 0px 14px;
	border-color: transparent transparent transparent #00a0e9;
}

#topVisual #profWrap > dl > dd > dl,
#introWrap #profWrap > dl > dd > dl{ margin-bottom: 10px;}
#topVisual #profWrap > dl > dd > dl > dt,
#introWrap #profWrap > dl > dd > dl > dt{
    float: left;
    font-weight: 500;
}
#topVisual #profWrap > dl > dd > dl > dd,
#introWrap #profWrap > dl > dd > dl > dd{ padding-left: 3.5em;}

#topVisual #profWrap dd.attention,
#introWrap #profWrap dd.attention{
    position: absolute;
    top: 3px;
    left: 7em;
    font-size: 80%;
}
#topVisual #profWrap dd,
#introWrap #profWrap dd{
    font-size: 94%;
    color: #333;
    line-height: 1.6;
    text-shadow: 2px 2px 10px #fff,-2px 2px 10px #fff,2px -2px 10px #fff,-2px -2px 10px #fff;
}
#topVisual::after{
    content: "";
    display: block;
    position: absolute;
    background: url("../img/bg01.png") no-repeat center 0;
    width: 80%;
    height: 270px;
    z-index: 50;
    bottom: 0;
    left: 2.5%;
}

@media screen and (max-width: 1000px) {
    .contents #topVisual,
    .contents #topVisual.vw44{ height: auto;}
    #topVisual::before{
        height: 400px;
        height: 0;
        padding-top: 81%;
    }
    .contents #topVisual::before{
        height: 400px;
        height: 0;
        padding-top: 100%;
    }
    .contents #topVisual.vw44::before{
        padding-top: 90%;
    }
    #topVisual.w_full{
        margin-bottom: 30px;
        height: 60vw;
    }
    .works #topVisual.w_full{
        height: 67vw;
    }
    #topVisual .photoWrap{
        width: 96%;
        top: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
        position: relative;
    }
    #topVisual.w_full .photoWrap{ position: absolute; right: 0;}
    #topVisual h2{
        margin-bottom: 0;
        padding-top: 15px;
    }
    #topVisual h2.narrowsp{
        letter-spacing: -0.1em; font-size: 200%;
    }
    #topVisual h2.narrowsp2{
        letter-spacing: -0.15em; font-size: 200%;
    }
    #topVisual h2::after{ width: 90%;}
    #topVisual .txtWrap{
        margin-top: -10px;
        padding-bottom: 0;
    }
    #topVisual h2 span.displaysp{ display: inline;}
    .contents #topVisual .txtWrap{ margin-top: 20px;}
    #topVisual #subTtl{ margin-bottom: 5px;}
    #topVisual h3{ margin-bottom: 10px;}
    .contents #topVisual h3{
        margin-bottom: 10px;
        font-size: 120%;
        padding: 0 5%;
    }
    #topVisual #topCatch{ margin-bottom: 20px;}
    .contents #topVisual .topCatch{
        margin-bottom: 3px;
        font-size: 108%;
    }
    #topVisual::after{ width: 95%; height: 200px}
    #topVisual #profWrap > dl{ padding-bottom: 20px;}
    #introWrap #profWrap > dl{
        width: 100%;
        float: none;
    }
}

/*------------------イントロ------------------*/
#introWrap{
    width: 90%;
    margin: 0 auto 50px;
    position: relative;
    z-index: 300;
}
#introWrap p{
    color: #555;
    line-height: 2.0;
}
@media screen and (min-width: 1400px) {
    #topVisual.w_full + #introWrap{
        width: 1200px;
    }
}

/*------------------メイン------------------*/
#mainWrap{
    background: url("../img/bg01.png") repeat-y 0 40px;
    background-attachment: fixed;
}
@media screen\0 {
    #mainWrap{
        background-attachment: scroll;
    }
}
@supports (-ms-ime-align: auto) {
    #mainWrap{
        background-attachment: scroll;
    }
}

#mainWrap > div{ margin-bottom: 60px;}
#mainWrap > div > div{
    width: 1000px;
    margin: 0 auto;
}
#mainWrap h4{
    text-align: center;
    font-size: 250%;
    color: #94ddff;
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
    line-height: 1.0;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    font-weight: bold;
    font-weight: 900;
}
#mainWrap h4.jpn{
    font-weight: 800;
    letter-spacing: -0.08em;
    margin-bottom: 10px;
}
@media screen\0 {
    #mainWrap h4,
    #mainWrap h4.jpn{
        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','メイリオ', Meiryo,YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    #mainWrap h4,
    #mainWrap h4.jpn{
        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','メイリオ', Meiryo,YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
        font-weight: bold;
    }
}
#mainWrap h4::after{
    content: "";
    display: block;
    width: 65%;
    height: 5px;
    background-color: #ffde48;
    position: absolute;
    bottom: 3px;
    right: 0;
}
#mainWrap h4.jpn::after{ bottom: 0;}
#mainWrap h4 + p{
    text-align: center;
    font-size: 110%;
    color: #555;
    line-height: 1.2;
    margin-bottom: 10px;
}
#mainWrap h5{
    text-align: center;
    font-size: 136%;
    font-weight: bold;
    color: rgba(0, 170, 190, 1);
    line-height: 1.3;
    -webkit-transform: skew(-10deg,0);
    -ms-transform: skew(-10deg,0);
    transform: skew(-10deg,0);
    margin: 35px 0 20px;
}
@media screen and (max-width: 1000px) {
    #mainWrap > div > div{ width: 96%;}
}
@media screen and (max-width: 880px) {
    #mainWrap h4.jpn{ font-size: 190%;}
}

/*------------------タイムライン------------------*/
.timeline li{
    position: relative;
    padding: 10px 0;
}
.timeline li:before{
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    background-color: #00a0e9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 250;
}
.timeline .photoWrap{
    width: 470px;
    height: 280px;
    background-color: #eee;
    float: left;
    margin: 0 60px 0 0;
    position: relative;
    z-index: 200;
    box-shadow: 4px 4px 0px 0px #00a0e9;
}
.timeline .photoWrap img{  width: 100%; height: auto;}
.timeline li:nth-child(even) .photoWrap{
    float: right;
    margin: 0 0 0 60px;
    box-shadow: -4px 4px 0px 0px #00a0e9;
    
}
.timeline .photoWrap p.cap{
    font-size: 88%;
    line-height: 1.4;
    padding: 0.3em 0.6em;
}
.timeline .txtWrap.nophoto{
    width: 470px;
    float: left;
    margin: 0 60px 0 0;
    position: relative;
    z-index: 200;
}
.timeline .txtWrap.mt2em{ margin-top: 2em;}
.timeline .time,
.timeline .ttl{
    background-color: rgba(0, 170, 190, 0.45);
    color: #fff;
    font-size: 220%;
    font-weight: bold;
    line-height: 1.0;
    display: inline-block;
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
    padding: 15px 30px 25px;
    margin-top: 20px;
    position: relative;
    z-index: 50;
     margin-left: 20px;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    font-weight: 900;
}
/*.timeline li:nth-child(even) .time{ margin-left: 20px;}*/
.timeline .ttl{
    font-weight: 600;
    font-size: 180%;
}
.timeline .detail{
    background-color: rgba(225, 252, 255, 0.7);
    padding: 40px 30px;
    font-size: 94%;
    color: #333;
    line-height: 1.9;
    margin: -20px 10px 0 0;
    position: relative;
    z-index: 100;
}
.timeline .detail .strong{ font-size: 108%; font-weight: bold;}
.timeline .txtWrap:after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #00a0e9;
    position: absolute;
    bottom: 35px;
    z-index: 150;
}
.timeline .txtWrap.nophoto:after{ display: none;}
.timeline .txtWrap.z-i250:after{ z-index: 250;}
.timeline .timePoint{
    width: 22px;
    height: 22px;
    position: absolute;
    border: solid 2px #00a0e9;
    bottom: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 160;
    border-radius: 50%;
}
.timeline .timePoint span{
    display: block;
    width: 16px;
    height: 16px;
    margin: 3px;
    background-color: #00a0e9;
    border-radius: 50%;
}

@media screen and (max-width: 1000px) {
    .timeline li:before{ left: 11px; right: auto;}
    .timeline .photoWrap,
    .timeline li:nth-child(even) .photoWrap,
    .timeline .txtWrap.nophoto{
        float: none;
        margin: 0 0 0 6%;
        width: 94%;
        height: auto;
    }
    .timeline .txtWrap.nophoto{ width: auto;}
    .timeline .txtWrap{
        margin: -90px 0 0 2%;
    }
    .timeline .txtWrap.mt0,
    .timeline .txtWrap.mt2em{
        margin: 0 0 0 2%;
    }
    .timeline .time{ z-index: 210;}
    .timeline .detail{ z-index: 220;}
    .timeline .txtWrap:after{ z-index: 230;}
    .timeline .timePoint{ left: 0; right: auto; z-index: 240;}
}

/*------------------インタビュー------------------*/
.interview .photoWrap{
    width: 486px;
    height: auto;
    margin: 10px 0 20px 0;
    position: relative;
}
.interview .photoWrap.w100{ width: 100%;}
.interview .photoWrap img{ width: 100%; height: auto;}

.cx_smartphoneview .interview .photoWrap.zoom::after{
    content: "";
    display: block;
    width: 42px;
    height: 40px;
    background: url("../img/icn_zoom.svg") no-repeat 0 0;
    background-size: contain;
    position: absolute;
    bottom: 7px;
    right: 7px;
}

.interview .photoWrap p{
    font-size: 118%;
    font-weight: bold;
    color: rgba(0, 170, 190, 1);
    line-height: 1.3;
    -webkit-transform: skew(-10deg,0);
    -ms-transform: skew(-10deg,0);
    transform: skew(-10deg,0);
    margin: 0 0 10px;
}
.interview .photoWrap img + p{
    font-weight: normal;
    font-size: 88%;
    margin: 5px 0 0;
}
.interview .qaWrap{ margin: 10px 0 25px;}
.interview .qaWrap.fLeft{ margin: 0 20px 25px 0;}
.interview .qaWrap.mt-50{ margin-top: -50px;}
.interview .qaWrap.mt-60{ margin-top: -60px;}
.interview .qaWrap.mt-70{ margin-top: -70px;}
.interview .qaWrap.mt-80{ margin-top: -80px;}

.interview .question{
    font-size: 116%;
    color: #1da1f2;
    line-height: 1.3;
    -webkit-transform: skew(-10deg,0);
    -ms-transform: skew(-10deg,0);
    transform: skew(-10deg,0);
    margin: 0 0 10px;
    font-weight: bold;
    font-weight: 600;
}
@media screen\0 {
    .interview .question{
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    .interview .question{
        font-weight: bold;
    }
}
.interview .question::before{
    content: "Q.";
    font-size: 150%;
    line-height: 1.0;
    margin-right: 5px;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    font-weight: bold;
}
.interview .question.hyphen::before{ content: "−"; font-size: 116%;}
.interview .qaWrap .ansWrap:nth-of-type(1)~.ansWrap{
    margin-top: 20px;
}
.interview .ansWrap .icn{
    float: left;
    margin-right: 20px;
    text-align: center;
}
.interview .ansWrap .icn div{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 5px 4px 0 0 rgba(0, 170, 190, 0.45);
}
.interview .ansWrap .icn div img{ width: 100%; height: auto;}
.interview .ansWrap .icn p{
    background-color: #1da1f2;
    color: #fff;
    font-size: 88%;
    display: inline-block;
    line-height: 1.2;
    padding: 3px 6px;
    -webkit-transform: skew(-10deg,0);
    -ms-transform: skew(-10deg,0);
    transform: skew(-10deg,0);
    font-weight: 500;
}
@media screen\0 {
    .interview .ansWrap .icn p{
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    .interview .ansWrap .icn p{
        font-weight: bold;
    }
}
.interview .ansWrap .icn p.sizeS{
    letter-spacing: -0.1em;
    font-size: 70%;
    padding: 3px 0;
}
.interview .ansWrap .icn p.sizeS span{
    -webkit-transform: scale(0.78, 1);
    -ms-transform: scale(0.78, 1);
    transform: scale(0.78, 1);
    display: inline-block;
    white-space: nowrap;
    margin-left: 0;
}

.interview .ansWrap .answer{
    float: left;
    width: 368px;
    background-color: #fff;
    box-shadow: -6px 6px 0 6px rgba(0, 170, 190, 0.45);
    padding: 22px;
    font-size: 94%;
    line-height: 1.9;
    position: relative;
    color: #555;
}
.interview .w100 .ansWrap .answer{ width: 874px;}
.interview .ansWrap .answer::before{
    content: "";
    display: block;
    position: absolute;
    top: 30px; left: -12px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 12px 10px 0;
	border-color: transparent #fff transparent transparent;
}
.interview .bs01{
    background-color: rgba(0, 170, 190, 0.45);
    width: 490px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 94%;
    line-height: 1.6;
    color: #333;
}
.interview .bs01 dt{ font-weight: bold;}
.interview .bs01 dd{ margin-bottom: 10px;}
.interview .bs01 dd:nth-last-of-type(1){ margin-bottom: 0;}
.interview .bs01 dd.point{
    background-color: rgba(255,255,255,0.8);
    padding: 0.6em 1em;
    text-indent: -4.5em;
    margin-left: 3.5em;
    font-size: 94%;
}
.interview .bs01 dd.point::before{
    content: "point!";
    background-color: #ff9a34;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 20px;
    margin-right: 0.5em;
}

.interview .intro{
    margin: 15px auto;
    line-height: 1.8;
    text-align: center;
}

@media screen and (max-width: 1000px) {
    .interview .fLeft,
    .interview .fRight{ float: none;}
    .interview .photoWrap{ width: 100%; height: auto;}
    .interview .qaWrap.fLeft{ margin-right: 0;}
    .interview .qaWrap.mt-50,
    .interview .qaWrap.mt-60,
    .interview .qaWrap.mt-70,
    .interview .qaWrap.mt-80{ margin-top: 0;}
    .interview .ansWrap .icn{ width: 10%; height: auto; margin-right:3%;}
    .interview .ansWrap .icn div{ width: 100%;}
    .interview .ansWrap .icn p.sizeS{
        font-size: 54%;
    }
    .interview .ansWrap .icn p.sizeS_sp{
        letter-spacing: -0.16em;
        font-size: 86%;
        padding: 3px;
    }
    .interview .ansWrap .answer,
    .interview .w100 .ansWrap .answer{ width: 87%; box-sizing: border-box;}
    .interview .bs01{ width: 100%;}
    .interview .intro{ text-align: left; padding: 0 20px;}
}


/*------------------プロフィール------------------*/
#profListWrap{
    position: relative; z-index: 500;
    margin-bottom: 60px;
}
#profListWrap h4{
    text-align: center;
    font-weight: normal;
    font-size: 130%;
    line-height: 1.2;
    color: #00aabe;
}
#profListWrap h4 + p{
    text-align: center;
    margin: 0 0 2em;
}
#profListWrap ul{
    width: 96%;
    margin: 0 auto;
}
#profListWrap ul.len2,
#profListWrap ul.len2n{
    width: 644px;
}
#profListWrap li{
    float: left;
    width: 30.33%;
    margin: 0 1.5%;
    position: relative;
}
#profListWrap .len2 li,
#profListWrap .len2n li{
    float: left;
    width: 302px;
    margin: 0 10px 20px;
}
#profListWrap li dl{ position: relative;}
#profListWrap li .photoWrap{
    width: 90%;
    height: 26.2vw;
    background-color: #eee;
    border-radius: 50%;
    position: relative;
}
#profListWrap li .photoWrap::before{
    content: "";
    display: block;
    width: 80%;
    height: 20.96vw;
    background-color: rgba(0, 170, 190, 0.45);
    border-radius: 50%;
    position: absolute;
    bottom: -20px;
    right: -5%;
}
#profListWrap li .photoWrap div{
    width: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
#profListWrap li .photoWrap img{ width: 100%; height: auto;}
#profListWrap li .subTtl{
    font-size: 94%;
    display: inline-block;
    padding: 4px 6px;
    line-height: 1.0;
    background-color: #00a0e9;
    color: #fff;
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
    font-weight: 500;
    position: absolute;
    bottom: 30px;
}
@media screen\0 {
    #profListWrap li .subTtl{
        font-weight: bold;
        letter-spacing: -0.03em;
    }
}
@supports (-ms-ime-align: auto) {
    #profListWrap li .subTtl{
        font-weight: bold;
        letter-spacing: -0.03em;
    }
}
#profListWrap li .category{
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
    line-height: 1.0;
    color: #00a0e9;
    font-size: 110%;
    position: absolute;
    top: 0;
    left: -0.6em;
    z-index: 500;
}
#profListWrap li dt{
    transform: skew(-15deg,0);
    -webkit-transform: skew(-15deg,0);
	-moz-transform: skew(-15deg,0);
	-ms-transform: skew(-15deg,0);
    font-size: 114%;
    font-weight: bold;
    font-weight: 600;
    color: #555;
    position: absolute;
    bottom: 0px;
    left: 2.4em;
    background-color: rgba(255,255,255,0.73);
    line-height: 1.2;
    padding: 3px 8px;
}
@media screen\0 {
    #profListWrap li dt{
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    #profListWrap li dt{
        font-weight: bold;
    }
}
#profListWrap li dt span{ font-size: 80%;}
#profListWrap p{
    color: #555;
    font-size: 84%;
    margin: 5px 0 0 0;
    line-height: 1.6;
    letter-spacing: -0.05em;
}

@media screen and (min-width:1288px) {
    #profListWrap ul.len2n{ width: 1288px;}
}
@media screen and (min-width:1000px) {
    #profListWrap ul{ width: 1000px;}
    #profListWrap li .photoWrap{ height: 272px;}
    #profListWrap li .photoWrap::before{ height: 218px;}
}
@media screen and (max-width:1288px) {
    #profListWrap .len2n li .photoWrap{ height: 272px;}
    #profListWrap .len2n li .photoWrap::before{ height: 218px;}
}
@media screen and (max-width:1000px) {
    #profListWrap ul.len2{ width: 96%;}
    #profListWrap .len2 li{ width: 30.33%; margin: 0 1.5%;}
    #profListWrap .len2 li:nth-of-type(1){ margin-left: 18.165%;}
    #profListWrap .len2 li .photoWrap{
        width: 90%;
        height: 26.2vw;
    }
    #profListWrap .len2 li .photoWrap::before{
        width: 80%;
        height: 20.96vw;
    }
}
@media screen and (max-width:880px) {
    #profListWrap li .subTtl{
        position: relative;
        bottom: auto;
    }
    #profListWrap li dt{
        position: relative;
        bottom: auto;
        left: 0;
    }
    #profListWrap p{ margin-left: 0;}
}
@media screen and (max-width:640px) {
    #profListWrap ul,
    #profListWrap ul.len2,
    #profListWrap ul.len2n{ width: 96%;}
    #profListWrap li,
    #profListWrap .len2 li,
    #profListWrap .len2n li{
        float: none;
        width: 60%;
        margin: 0 auto 30px;
    }
    #profListWrap li .photoWrap,
    #profListWrap .len2 li .photoWrap,
    #profListWrap .len2n li .photoWrap{ height: 51.6vw;}
    #profListWrap li .photoWrap::before,
    #profListWrap .len2 li .photoWrap::before,
    #profListWrap .len2n li .photoWrap::before{ height: 46vw;}
    #profListWrap li .category{ left: -1.8em;}
}


#endTxtWrap p,
.interTxtWrap p{
    line-height: 1.8;
    margin-bottom: 15px;
    color: #555;
}
#endTxtWrap p.credit{
    font-size: 80%;
    text-align: right;
    margin: 80px auto 0;
}
@media screen and (max-width: 1000px) {
    #endTxtWrap p,
    .interTxtWrap p{ padding: 0 20px;}
}


/*------------------2列------------------*/
.col2Wrap{
    width: 1000px;
    margin: 0 auto 60px;
}
.col2Wrap li{
    float: left;
    width: 490px;
    margin: 0 auto 30px;
}
.col2Wrap li:nth-of-type(2n){
    margin: 0 0 30px 20px;
}
.col2Wrap dt img,
.col2Wrap dd img{
    width: 100%;
    height: auto;
}
.col2Wrap .ansWrap{ margin-top: 30px;}
@media screen and (max-width: 1000px) {
    .col2Wrap{ width: 96%;}
    .col2Wrap li{
        float: none;
        width: 100%;
        margin-bottom: 50px;
    }
    .col2Wrap li:nth-of-type(2n){
        margin: 0 0 30px 0;
    }
    .col2Wrap .ansWrap{ margin-top: 10px;}
}

/*------------------1列------------------*/
.col1Wrap{
    width: 540px;
    margin: 0 auto 0px;
}
.col1Wrap li{
    width: 540px;
    margin: 0 auto 70px;
}
.col1Wrap dt img,
.col1Wrap dd img{
    width: 100%;
    height: auto;
}
.col1Wrap .ansWrap{ margin-top: 20px;}
@media screen and (max-width: 700px) {
    .col1Wrap{ width: 96%;}
    .col1Wrap li{
        width: 100%;
    }
    .col1Wrap .ansWrap{ margin-top: 10px;}
}


/*------------------SNSリンク------------------*/
#snsLink{ text-align: center;}
#snsLink ul{ display: inline-block;}
#snsLink li{
    float: left;
    margin: 0 20px;
}
#snsLink a{
    background-position: 0 -564px;
    width: 60px;
    height: 60px;
    background-color: #1da1f2;
    border-radius: 50%;
    display: block;
    background-image: url("../img/parts_common.png");
    background-repeat: no-repeat;
    background-size: 242px;
    overflow: hidden;
    text-indent: -500%;
    white-space: nowrap;
}
#snsLink #insta a{
    background-color: #c82f9d;
    background-position: 0 -940px;
}

@media screen and (max-width: 640px) {
    #snsLink a{
        width: 100px;
        height: 100px;
        background-size: 420px;
        background-position: 0 -986px;
    }
    #snsLink #insta a{ background-position: 0 -1636px;}
}

/*------------------下部ボタン------------------*/
#btmBtn{
    background-color: #e8e8e8;
    padding: 20px 0;
    position: relative;
    z-index: 500;
}
#btmBtn > p{
    text-align: center;
    font-size: 130%;
    line-height: 1.4;
    padding: 0 0 12px;
    color: #555;
}
#btmBtn ul{
    width: 960px;
    margin: 0 auto;
}
#btmBtn li{
    float: left;
    width: 474px;
}
#btmBtn li:nth-of-type(1){ margin-right: 12px;}
#btmBtn li a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: solid 5px #ff7f18;
}
#btmBtn li:nth-of-type(1) a{ background-color: #fff;}
#btmBtn li:nth-of-type(2) a{ background-color: #ff7f18;}
#btmBtn li a:hover{ border: solid 5px #ff9418;}
#btmBtn li:nth-of-type(1) a:hover{ background-color: #fffbf2;}
#btmBtn li:nth-of-type(2) a:hover{ background-color: #ff9418;}
#btmBtn li a p{
    text-align: center;
    line-height: 60px;
    font-size: 118%;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
}
#btmBtn li:nth-of-type(1) a{ color: #ff7f18;}
#btmBtn li:nth-of-type(2) a{ color: #fff;}

#btmBtn .linkS{ margin: 20px 0;}
#btmBtn .linkS a{
    display: block;
    width: 30%;
    margin: 10px auto;
    text-align: center;
    background-color: #00aabe;
    color: #fff;
    font-size: 110%;
    line-height: 3.6em;
    border-radius: 30px;
}
#btmBtn .linkS a:hover{ background-color: #00b4c9;}

@media screen and (max-width: 960px) {
    #btmBtn ul{ width: 94%;}
    #btmBtn li{
        float: none;
        width: 100%;
    }
    #btmBtn li:nth-of-type(1){ margin: 0 0 12px;}
    #btmBtn li a p{ line-height: 72px;}
    #btmBtn .linkS a{
        width: 60%;
    }
}