@charset "UTF-8";
/* CSS Document */

/*-----------------
共通パーツ
-----------------*/
*{margin:0;padding:0;}
html{font-size:62.5%;}
body{font-size:14px;font-size:1.4rem;font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
img{vertical-align:middle;max-width:100%;height:auto;border: 0;}
a{text-decoration:none;color:#0066c2;transition: background-color .1s ease-out,color .1s ease-out;}
a:hover{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)";-moz-opacity:0.7;-khtml-opacity:0.7;}

/*-----------------
ヘッダー
-----------------*/
#container {
    width: 100%;
}
#logo{
    width: 980px;
    margin: 5px auto;
}
#title {
    color: #fff;
    background: #076544;
    line-height: 1.5;
    padding: 0.5em 0;
}
#title a {
    color: #fff;
}
#title h1 {
    width: 980px;
    margin: 0 auto;
    font-size: 26px;
    font-size: 2.6rem;
}
#pnkz-back{
    background: #e2e100;
    font-size: 14px;
    font-size: 1.4rem;
}
#pnkz-back #pnkz {
    width: 980px;
    margin: 0 auto;
    padding: 5px 0;
}
.eyecatch {
    width: 980px;
    text-align: center;
    margin: 30px auto;
}
.comment {
    width: 640px;
    margin: 30px auto 0;
    font-size: 16px;
    font-size: 1.6rem;
    border: 1px dotted #ccc;
    border-radius: 20px;
    padding: 40px;
    line-height: 1.75;
}
.comment span {
    background: linear-gradient(transparent 40%, #ffff66 60%);
}
@media screen and (max-width: 640px) {
    #container {
        width: auto;
        overflow: hidden;
    }
    .comment {
        width: auto;
        font-size: 14px;
        font-size: 1.4rem;
        padding: 1em;
        margin: 1em 1em 0;
    }
    .eyecatch,
    #title h1,
    #pnkz-back #pnkz {
        width: auto;
    }
    #pnkz-back #pnkz {font-size: 12px;font-size: 1.2rem;}
    #logo, #pnkz-back {width: auto;padding:0 0.5em;}
    #title {padding:1em 0.5em;}
    #logo img {width: 100px;}
    #title h1 {font-size:20px;font-size:2.0rem;}
}

/*-----------------
メイン
-----------------*/
article div {
    margin: 0 auto;
    width: 854px;
    text-align: center;
    padding: 40px 0;
}
#video_wrap {
    position: relative;
    width: 100%;
    padding-top: 55%;
}
#video_wrap > video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
article div h2 {
    font-size: 30px;
    font-size: 3.0rem;
    margin: 0 0 30px;
}
article div h2 span {
    border-bottom: solid 2px #e2e100;
    position: relative;
    padding: 0 40px 5px;
    display: inline-block;
}
article div h2 span:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #076544;
    bottom: -3px;
    width: 50px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
article div p {
    text-align: center;
    padding: 5px 15px;
    background: #efefef;
    display: inline-block;
    border-radius: 15px;
    margin: 0 0 15px;
}
article.bg {
    background: #F4F4F4;
}
article.bg div h2 span {
    border-bottom: solid 2px #e2e100;
}
article.bg div p {
    background: #fff;
}
@media screen and (max-width: 640px) {
    article div {
        max-width: 640px;
        width: auto;
    }
}

/*-----------------
フッター
-----------------*/
#pagetop {
    text-align: center;
}
footer {
    background: #333;
    color: #fff;
    padding: 50px 0;
}
footer>p {
    width: 980px;
    margin: 0 auto;
    font-size: 12px;
    font-size: 1.2rem;
}
footer ul {
    width: 980px;
    font-size: 0;
    text-align: center;
    margin: 0 auto;
    padding: 50px 0;
}
footer ul li {
    display: inline-block;
    vertical-align: middle;
    width: 32%;
}
footer ul li a {
    background: #fff url(img/arrow.png) 95% 50% no-repeat;
    padding: 16px 0;
    margin: 0 10px 10px;
    display: block;
    text-align: center;
    border-radius: 34px;
    color: #333;
    font-size: 16px;
    font-size: 1.6rem;
    border: 2px solid #fff;
    white-space: nowrap;
}
footer ul li a:hover {
    color: #fff;
    background: #333 url(img/arrow2.png) 95% 50% no-repeat;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    border: 2px solid #fff;
}
footer dl {
    width: 980px;
    margin: 0 auto;
    text-align: center;
}
footer dt {
    font-size: 36px;
    font-size: 3.6rem;
    border-right: 2px solid #fff;
    display: inline-block;
    vertical-align: middle;
    width: 26%;
    margin: 0 4% 0 0;
    text-align: left;
}
footer dd {
    display: inline-block;
    vertical-align: middle;
    width: 65%;
    text-align: left;
}
footer dd p {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 10px 0;
    width: 32.5%;
}
footer dd p a {
    background: #cee9f4;
    color: #333;
    padding: 10px 0;
    display: block;
    text-align: center;
    border-radius: 22px;
    border: 2px solid #fff;
    white-space: nowrap;
}
footer dd p a:hover {
    background: #333;
    border: 2px solid #cee9f4;
    color: #fff;
    opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
}
@media screen and (max-width: 640px) {
    footer {padding: 2em 1em;}
    footer>p,
    footer dl,
    footer ul {
        width: auto;
    }
    footer ul {
        padding: 14px 0;
    }
    footer ul li,
    footer dd,
    footer dd p,
    footer dt  {
        display: block;
        width: auto;
    }
    footer ul li a {
        margin: 0 0 1em;
        display: block;
    }
    footer dt {
        border-bottom: 2px solid #fff;
        border-right: 0;
        margin: 0 0 1em 0;
        font-size: 20px;
        font-size: 2.0rem;
        text-align: center;
        }
}

/*-----------------
コピーライト
-----------------*/
#copy-back {
    background: #ededed;
}
#copy-back #copy {
    text-align: left;
    width: 980px;
    padding :15px 0;
    margin: 0 auto;
    color: #000;
    font-size: 12px;
    font-size: 1.2rem;
}
#copy-back #copy span {
    text-align: right;
    display: inline-block;
    float: right;
    padding: 0 0 0 15px;
}
#copy-back #copy span a {
    color: #000;
}
@media screen and (max-width: 640px) {
    #copy-back #copy {width: auto;}
    #copy-back #copy {padding: 1em;}
    #copy-back #copy span {
        text-align: left;
        display: block;
        float: none;
        padding: 0;
        margin: 0.5em 0;
    }
    #copy-back #copy span a {
        border: 1px solid #333;
        padding: 1em;
        display: block;
    }
}