@charset "UTF-8";

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


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

/*------------------トップビジュアル------------------*/
#topVisual{ position: relative; margin-bottom: 60px;}
.contents #topVisual{ height: 40vw;}
.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 3em 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.9);
    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%;
}
#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%;*/
        padding-top: 72%;
    }
    #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::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;
    }
}


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

#mainWrap > div{ margin-bottom: 60px;}
#mainWrap > div > div,
#processWrap{
    width: 1000px;
    margin: 0 auto;
}

#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,
    #processWrap{ width: 96%;}
}

/*------------------プロセス------------------*/
#processWrap > li{ padding-bottom: 60px;}
#processWrap .ttl .imgWrap{
    width: 100%;
    height: 0;
    padding-top:23.5%; 
    position: relative;
    background: url("../photo/technique_sp01_illu01.png") no-repeat center bottom;
    background-size: contain;
}
#processWrap .ttl.p02 .imgWrap{
    padding-top:24.95%; 
    background: url("../photo/technique_sp01_illu02.png") no-repeat center bottom;
    background-size: contain;
}
#processWrap .ttl.p03 .imgWrap{
    padding-top:24.95%; 
    background: url("../photo/technique_sp01_illu03.png") no-repeat center bottom;
    background-size: contain;
}
/*@media screen and (max-width: 640px) {
    #processWrap .ttl .imgWrap{
        padding-top: 29%;
        background-size: cover;
    }
}*/
#processWrap .ttl h3{
    color: #00a0e9;
    font-size: 180%;
    line-height: 1.0;
    font-weight: 100;
    -ms-transform: translate3d(0, 0, 0) skew(-10deg,0);
    -webkit-transform: translate3d(0, 0, 0) skew(-10deg,0);
    -moz-transform: translate3d(0, 0, 0) skew(-10deg,0);
    transform: translate3d(0, 0, 0) skew(-10deg,0);
    -ms-transition: opacity 0.4s, -ms-transform 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s;
    -webkit-transition: opacity 0.4s, -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s;
    transition: opacity 0.4s, transform 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s;
}
@media screen\0 {
    #processWrap .ttl h3{
        font-weight: normal;
    }
}
@supports (-ms-ime-align: auto) {
    #processWrap .ttl h3{
        font-weight: normal;
    }
}
#processWrap .ttl h3 span{
    font-size: 220%;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    font-weight: bold;
}
@media screen\0 {
    #processWrap .ttl h3 span{
        font-weight: bold;
    }
}
@supports (-ms-ime-align: auto) {
    #processWrap .ttl h3 span{
        font-weight: bold;
    }
}
#processWrap .ttl p{
    line-height: 1.4;
}

#processWrap .interviewWrap h4{
    background-color: #ff7f18;
    margin-bottom: 2px;
}
#processWrap .interviewWrap h4 a{
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
    display: block;
    font-weight: normal;
    color: #fff;
    line-height: 1.2;
    padding: 1.0em;
    font-size: 110%;
    cursor: pointer;
}
#processWrap .interviewWrap h4 a::after{
    content: "+";
    color: #fff;
    position: absolute;
    top: 50%;
    right: 1em;
    margin: -0.7em 0 0;
    font-size: 140%;
}
#processWrap .interviewWrap h4:hover{ background-color: #ff9418;}

/*------------------インタビュー------------------*/
.interview{ padding: 1em 0 5em; display: none;}
.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 ul{
    width: 96%;
    margin: 0 auto;
}
#profListWrap ul.len2{
    width: 644px;
}
#profListWrap li{
    float: left;
    width: 30.33%;
    margin: 0 1.5%;
}
#profListWrap .len2 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 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.len2{ 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 .len2 li .photoWrap{ height: 272px;}
    #profListWrap .len2 li .photoWrap::before{ height: 218px;}
}
@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{ width: 96%;}
    #profListWrap li,
    #profListWrap .len2 li{
        float: none;
        width: 60%;
        margin: 0 auto 20px;
    }
    #profListWrap li .photoWrap,
    #profListWrap .len2 li .photoWrap{ height: 51.6vw;}
    #profListWrap li .photoWrap::before,
    #profListWrap .len2 li .photoWrap::before{ height: 46vw;}
}


#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;}
}

/*------------------下部ボタン------------------*/
#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%;
    }
}