@charset "Shift_JIS";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
Q & A

*/
#mainContents
{
    line-height: 1;
}
#mainContents div,
#mainContents span,
#mainContents object,
#mainContents iframe,
#mainContents h1,
#mainContents h2,
#mainContents h3,
#mainContents h4,
#mainContents h5,
#mainContents h6,
#mainContents p,
#mainContents blockquote,
#mainContents pre,
#mainContents abbr,
#mainContents address,
#mainContents cite,
#mainContents code,
#mainContents del,
#mainContents dfn,
#mainContents em,
#mainContents img,
#mainContents ins,
#mainContents kbd,
#mainContents q,
#mainContents samp,
#mainContents small,
#mainContents strong,
#mainContents sub,
#mainContents sup,
#mainContents var,
#mainContents b,
#mainContents i,
#mainContents dl,
#mainContents dt,
#mainContents dd,
#mainContents ol,
#mainContents ul,
#mainContents li,
#mainContents fieldset,
#mainContents form,
#mainContents label,
#mainContents legend,
#mainContents table,
#mainContents caption,
#mainContents tbody,
#mainContents tfoot,
#mainContents thead,
#mainContents tr,
#mainContents th,
#mainContents td,
#mainContents article,
#mainContents aside,
#mainContents canvas,
#mainContents details,
#mainContents figcaption,
#mainContents figure,
#mainContents footer,
#mainContents header,
#mainContents hgroup,
#mainContents menu,
#mainContents nav,
#mainContents section,
#mainContents summary,
#mainContents time,
#mainContents mark,
#mainContents audio,
#mainContents video
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    list-style: none; 

    vertical-align: baseline;

    border: 0;
    outline: 0;
    background: transparent;
}
#mainContents article,
#mainContents aside,
#mainContents details,
#mainContents figcaption,
#mainContents figure,
#mainContents footer,
#mainContents header,
#mainContents hgroup,
#mainContents menu,
#mainContents nav,
#mainContents section
{
    display: block;
}
#mainContents nav ul
{
    list-style: none;
}
#mainContents blockquote,
#mainContents q
{
    quotes: none;
}
#mainContents blockquote:before,
#mainContents blockquote:after,
#mainContents q:before,
#mainContents q:after
{
    content: '';
    content: none;
}
#mainContents a
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;
    text-decoration: none; 

    background: transparent;
}
#mainContents ins
{
    text-decoration: none; 

    color: #000;
    background-color: #ff9;
}
#mainContents mark
{
    font-weight: bold; 
    font-style: italic;

    color: #000;
    background-color: #ff9;
}
#mainContents del
{
    text-decoration: line-through;
}
#mainContents abbr[title],
#mainContents dfn[title]
{
    cursor: help; 

    border-bottom: 1px dotted;
}
#mainContents table
{
    border-spacing: 0; 
    border-collapse: collapse;
}
#mainContents hr
{
    display: block;

    height: 1px;
    margin: 1em 0;
    padding: 0; 

    border: 0;
    border-top: 1px solid #ccc;
}
#mainContents input,
#mainContents select
{
    vertical-align: middle;
}
#mainContents img,
#mainContents video
{
    font-size: 0; 
    line-height: 0;
}

/*------------------------------

  開発環境の初期化

------------------------------*/
*
{
    margin: 0;
    padding: 0;
}

#header-area #header #header-nav #header-nav-area #global-nav #global_sd_logo img
{
    vertical-align: top;
}

body
{
    background-color: #000;
}
@media screen and (min-width: 641px)
{
    body
    {
        min-width: 1024px;
    }
}

/*------------------------------

  コンテンツスタイル指定

------------------------------*/
#mainContents
{
    font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
		background-color:#000;
		padding-bottom:100px;
}
#mainContents img {
	width:100%;
	vertical-align:top;
}
#mainContents .sp {
	display:none;
}
#mainContents .pc {
	display:block;
}
#mainContents strong {
	font-weight: bold;
}
@media screen and (max-width: 640px) {
#mainContents {
		padding-bottom:50px;
}
#mainContents .sp {
	display:block;
}
#mainContents .pc {
	display:none;
}
}


/*------------------------------
	タイトル
------------------------------*/
#mainContents .mainTitle {
	width:100%;
	background-image:url(../images/pc_ttl_bg.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:cover;
	min-height:239px;
}
#mainContents h1 {
	width:100%;
	max-width:1000px;
	margin:0 auto;
}
@media screen and (max-width: 640px) {
#mainContents .mainTitle {
	background-image:none;
	min-height:0;
}
}

/*------------------------------
	コンテンツ囲み
------------------------------*/
#mainContents .con_in {
	width:100%;
	max-width:1000px;
	margin:20px auto 0;
}
@media screen and (max-width: 640px) {
#mainContents .con_in {
	width:88%;
	margin:15px auto 0;
}
}
#mainContents p.rec_h {
	text-align:center;
	color:#fff;
	font-style:italic;
	font-weight:bold;
	font-size:40px;
}
@media screen and (max-width: 640px) {
#mainContents p.rec_h {
	font-size:7.6vw;
}
}

#mainContents .rec_c {
	background-color:#fff;
	border-radius:10px;
	padding:20px;
	margin-top:40px;
}
#mainContents .rec_c p {
	color:#000;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	line-height:1.4;
}
#mainContents .rec_c p span {
	color:#df0428;
}
@media screen and (max-width: 640px) {
#mainContents .rec_c {
	padding:8px;
	margin-top:20px;
}
#mainContents .rec_c p {
	font-size:4.4vw;
	text-align:left;
}
}
#mainContents h2.h_01 {
	margin-top:40px;
	width:100%;
}
@media screen and (max-width: 640px) {
#mainContents h2.h_01 {
	margin-top:20px;
}
}
#mainContents .q_txt {
	color:#fff;
	text-align:left;
	line-height:1.6;
	padding:15px;
	margin-top:10px;
	border-bottom:1px solid #fff;
}
#mainContents .q_txt h3{
	color: #fcea12;
	font-size: 24px;
	margin: 0 0 10px 0;
}
#mainContents .q_txt h4{
	font-size: 18px;
	font-weight: bold;
	margin: 1.5em 0 5px 0;
}
#mainContents .q_txt h4:nth-of-type(1){
	margin: 0 0 5px 0;
}
#mainContents .q_txt p {
	font-size:18px;
}
#mainContents .q_txt p.indent1 {
	padding-left: 1em;
	text-indent: -1em;
}
@media screen and (max-width: 640px) {
	#mainContents .q_txt h3{
		font-size: 5vw;
	}
	#mainContents .q_txt h4{
		font-size: 4.2vw;
	}
	#mainContents .q_txt p {
	font-size:4.2vw;
}




}
#mainContents p.cold,
#mainContents .cold {
	color:#fcea12;
}


#mainContents .btn_link {
	text-align:center;
	margin:40px auto 0;
	width:340px;
	font-size:16px;
	line-height:2.8;
}
#mainContents .btn_link a {
	display:block;
	color:#fff;
	background-color:#df0428;
	background-image:url(../images/y.gif);
	background-position:96% center;
	background-repeat:no-repeat;
	background-size:10px auto;
	transition:.2s;
	border:1px solid #df0428;
}
#mainContents .btn_link.cont a {
	color:#fff;
	background-color:#000;
	border:1px solid #fff;
}
#mainContents .btn_link a:hover {
	opacity:.7;
}
@media screen and (max-width: 640px) {
#mainContents .btn_link {
	margin-top:60px;
	font-size:4.2vw;
	width:90%;
}
}

/*------------------------------
	動画
------------------------------*/

#mainContents .p-howto-lead{
	color: #fff;
	font-size: 28px;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	width: 100%;
	margin: 100px 0 0 0;
}
@media screen and (max-width: 640px){
    #mainContents .p-howto-lead{
        font-size: 6vw;
        line-height: 1.5em;
        margin: 15vw 0 0 0;
    }
}

/*
    #mainContents .p-howto-movie{
    -webkit-transition: opacity .5s cubic-bezier(.645, .045, .355, 1), -webkit-transform .5s cubic-bezier(.645, .045, .355, 1);
    transition: opacity .5s cubic-bezier(.645, .045, .355, 1), -webkit-transform .5s cubic-bezier(.645, .045, .355, 1);
    transition: transform .5s cubic-bezier(.645, .045, .355, 1), opacity .5s cubic-bezier(.645, .045, .355, 1);
    transition: transform .5s cubic-bezier(.645, .045, .355, 1), opacity .5s cubic-bezier(.645, .045, .355, 1), -webkit-transform .5s cubic-bezier(.645, .045, .355, 1);    
}
*/
@media screen and (min-width: 641px){
    #mainContents .p-howto-movie{
        width: 800px;
        margin: 100px auto 100px auto;
    }
}
@media screen and (max-width: 640px){
    #mainContents .p-howto-movie{
        margin: 15vw auto 10vw auto;
    }
}
/*
#mainContents .p-howto-movie.is-inview{
    opacity: 1;
}
*/
#mainContents .p-howto-movie.is-inview .p-howto-movie-thum{
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
#mainContents .p-howto-movie-area{
    position: relative;
    text-align: center;
}
@media screen and (max-width: 640px){
    #mainContents .p-howto-movie-area{
        margin-top: -4vw;
    }
}
#mainContents .p-howto-movie-thum{
    position: relative;
    z-index: 0;
    display: block;
    overflow: hidden;
    /*
    -webkit-transition: opacity .3s cubic-bezier(.645, .045, .355, 1) .5s, -webkit-transform .3s cubic-bezier(.645, .045, .355, 1) .5s;
    transition: opacity .3s cubic-bezier(.645, .045, .355, 1) .5s, -webkit-transform .3s cubic-bezier(.645, .045, .355, 1) .5s;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1) .5s, opacity .3s cubic-bezier(.645, .045, .355, 1) .5s;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1) .5s, opacity .3s cubic-bezier(.645, .045, .355, 1) .5s, -webkit-transform .3s cubic-bezier(.645, .045, .355, 1) .5s; 
    */
    border-radius: 16px;
}
@media screen and (max-width: 640px){
    #mainContents .p-howto-movie-thum{
        border: 4px solid #fff;
    }
}
@media screen and (min-width: 641px){
    #mainContents .p-howto-movie-thum{
        border: 8px solid #fff;
    }
    #mainContents .p-howto-movie-thum:hover .p-howto-movie-img{
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    #mainContents .p-howto-movie-thum:hover .p-howto-movie-play{
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
}
#mainContents .p-howto-movie-img{
    -webkit-transition: -webkit-transform .24s ease-out;
    transition: -webkit-transform .24s ease-out;
    transition: transform .24s ease-out;
    transition: transform .24s ease-out, -webkit-transform .24s ease-out;
}
#mainContents .p-howto-movie-play{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: block;
    -webkit-transition: -webkit-transform .24s ease-out;
    transition: -webkit-transform .24s ease-out;
    transition: transform .24s ease-out;
    transition: transform .24s ease-out, -webkit-transform .24s ease-out; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
    /*border: 3px solid #fcea12;*/
    border: 3px solid #fff;
    border-radius: 100%;
    filter: drop-shadow(0 0 6px #000);

}
@media screen and (max-width: 640px){
    #mainContents .p-howto-movie-play{
        width: 13.33333vw;
        height: 13.33333vw;
    }
}
@media screen and (min-width: 641px){
    #mainContents .p-howto-movie-play{
        width: 70px;
        height: 70px;
    }
}
#mainContents .p-howto-movie-play::before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: auto;
    content: '';
    -webkit-transition: border-color .24s ease-out;
    transition: border-color .24s ease-out; 
    -webkit-transform: translateX(2px); 
    transform: translateX(2px);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #fff;
    /*border-left: 15px solid #fcea12;*/
}
#mainContents .p-howto-movie .p-howto-movie-notes{
margin: 10px auto 60px auto;
width: 100%;
color: #fff;
}
#mainContents .p-howto-movie .p-howto-movie-notes p{
font-size:15px;}


/*------------------------------
    テーブル
------------------------------*/

#mainContents .p-detail-info-table-wrapper
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table-wrapper
    {
        margin-top: 1.07143vw;
        margin-bottom: 1.07143vw;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table-wrapper
    {
        margin-top: 11.57143px;
        margin-bottom: 11.57143px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table-wrapper
    {
        margin-top: 4vw;
        margin-bottom: 4vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table-wrapper:after
    {
        position: absolute;
        top: 0;
        right: 0;

        display: block;

        width: 5.33333vw;
        height: 100%;

        content: '';

        background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(black));

        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), black);

        background: linear-gradient(to right, rgba(0, 0, 0, 0), black);
    }
}

@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table-wrapper .p-detail-info-table-inner
    {
        overflow: scroll;
    }
}
#mainContents .p-detail-info-table
{
    width: 100%;

    table-layout: fixed; 

    text-align: left;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table tr + tr
    {
        border-top: .14286vw solid #000;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table tr + tr
    {
        border-top: 1.54286px solid #000;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table tr + tr
    {
        border-top: .53333vw solid #000;
    }
}
#mainContents .p-detail-info-table th,
#mainContents .p-detail-info-table td
{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    vertical-align: middle; 

    color: #fff;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table th,
    #mainContents .p-detail-info-table td
    {
        font-weight: 900; 
        line-height: 1.4;

        letter-spacing: 0;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table th,
    #mainContents .p-detail-info-table td
    {
        line-height: 1.08;

        letter-spacing: 0;
    }
}
@media screen and (min-width: 1600px)
{
    #mainContents .p-detail-info-table th,
    #mainContents .p-detail-info-table td
    {
        line-height: 1.6;

        letter-spacing: 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table th,
    #mainContents .p-detail-info-table td
    {
        font-weight: 900; 
        line-height: 1.4;

        letter-spacing: 0;
    }
}
#mainContents .p-detail-info-table th.p-detail-info-table-cel
{
    background-color: #4e4e4e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table th.p-detail-info-table-cel
    {
        padding: 1.35714vw .71429vw 1.42857vw 1.71429vw;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table th.p-detail-info-table-cel
    {
        padding: 14.65714px 7.71429px 15.42857px 18.51429px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table th.p-detail-info-table-cel
    {
        padding: 5.06667vw 2.66667vw 5.33333vw 6.4vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table th.p-detail-info-table-cel + th
    {
        border-left: .14286vw solid #000;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table th.p-detail-info-table-cel + th
    {
        border-left: 1.54286px solid #000;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table th.p-detail-info-table-cel + th
    {
        border-left: .53333vw solid #000;
    }
}
#mainContents .p-detail-info-table td.p-detail-info-table-cel
{
    background-color: #2e2e2e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table td.p-detail-info-table-cel
    {
        padding: .92857vw .71429vw 1vw 1.71429vw;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table td.p-detail-info-table-cel
    {
        padding: 10.02857px 7.71429px 10.8px 18.51429px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table td.p-detail-info-table-cel
    {
        padding: 3.46667vw 2.66667vw 3.73333vw 6.4vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table td.p-detail-info-table-cel + td
    {
        border-left: .14286vw solid #000;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table td.p-detail-info-table-cel + td
    {
        border-left: 1.54286px solid #000;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table td.p-detail-info-table-cel + td
    {
        border-left: .53333vw solid #000;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table .p-detail-info-table-empty
    {
        display: none;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table .p-detail-info-table-empty
    {
        width: 5.33333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table .col-L
    {
        width: 30.07143vw;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table .col-L
    {
        width: 324.77143px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table .col-L
    {
        width: 52.8vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table .col-S1
    {
        width: 19.14286vw;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table .col-S1
    {
        width: 206.74286px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table .col-S1
    {
        width: 52.8vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-detail-info-table .col-S2
    {
        width: 18.85714vw;
    }
}
@media screen and (max-width: 1080px) and (min-width: 769px)
{
    #mainContents .p-detail-info-table .col-S2
    {
        width: 203.65714px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-detail-info-table .col-S2
    {
        width: 52.8vw;
    }
}