@charset 'UTF-8';
/* contents */
/* color */
/* text color */
/* link color */
/* 背景 */
.txtcolor-pr{
    color: #333 !important;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    list-style: none;

}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
img{
    max-width: 100%;
}
/*===================================================================
------------------
Table Of Contents
------------------
    01) box
    02) text
    03) margin
===================================================================*/
/*-------------------------------------------------------------------
 01) box
-------------------------------------------------------------------*/
.pc-none{
    display: none;
}
.cf:before, .cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
.grid {
    overflow: hidden;
    *zoom:1;
}
.grid > *{
    float: left;
    box-sizing: border-box;
}
.grid:after, .grid:before {
    content: "";
    display: table;
    clear: both;
}
.grid__col01 {
    width: 4.16666666667%;
}
.grid__col02 {
    width: 8.33333333333%;
}
.grid__col03 {
    width:12.5%;
}
.grid__col04 {
    width: 16.6666666667%;
}
.grid__col048 {
    width: 20%;
}
.grid__col05 {
    width: 20.8333333333%;
}
.grid__col06 {
    width: 25%;
}
.grid__col07 {
    width: 29.1666666667%;
}
.grid__col08 {
    width: 33.3333333333%;
}
.grid__col09 {
    width: 37.5%;
}
.grid__col10 {
    width: 41.6666666667%;
}
.grid__col11 {
    width: 45.8333333333%;
}
.grid__col12 {
    width: 50%;
}
.grid__col13 {
    width: 54.1666666667%;
}
.grid__col14 {
    width: 58.3333333333%;
}
.grid__col15 {
    width: 62.5%;
}
.grid__col16 {
    width: 66.6666666667%;
}
.grid__col17 {
    width: 70.8333333333%;
}
.grid__col18 {
    width: 75%;
}
.grid__col19 {
    width: 79.1666666667%;
}
.grid__col20 {
    width: 83.3333333333%;
}
.grid__col21 {
    width: 87.5%;
}
.grid__col22 {
    width: 91.6666666667%;
}
.grid__col23 {
    width: 95.8333333333%;
}
.grid__col24 {
    width: 100%;
}
.grid--gutter{
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -20px;
}
.grid--gutter > *{
    padding-left:   10px;
    padding-right:  10px;
    margin-top: 20px;
}
.grid--gutter-w{
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -40px;
}
.grid--gutter-w > *{
    padding-left:   20px;
    padding-right:  20px;
    margin-top: 40px;
}
.yt-wrap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}
.yt-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*-------------------------------------------------------------------
 02) text
-------------------------------------------------------------------*/
.bold{ font-weight: bold;}
.normal{ font-weight: normal}
.txtc{ text-align: center; }
.txtl{ text-align: left; }
.txtr{ text-align: right; }
.txtj{ text-align: justify;}
.left{ float: left}
.right{ float: right}
.fs12{ font-size: 1.2rem;}
.fs14{ font-size: 1.4rem;}
.fs16{ font-size: 1.6rem;}
.fs18{ font-size: 1.8rem;}
.fs20{ font-size: 2rem;}
.fs24{ font-size: 2.4rem;}
/*-------------------------------------------------------------------
 03) margin
-------------------------------------------------------------------*/
.mb0{ margin-bottom: 0 !important;}
.mb05{ margin-bottom: 5px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb30{ margin-bottom: 30px !important;}
.mb40{ margin-bottom: 40px !important;}
.mb50{ margin-bottom: 50px !important;}
.mb60{ margin-bottom: 60px !important;}
.mt10{ margin-top: 10px !important;}
.mt20{ margin-top: 20px !important;}
.mt30{ margin-top: 30px !important;}
.mt40{ margin-top: 40px !important;}
.mt50{ margin-top: 50px !important;}
.mt60{ margin-top: 60px !important;}
@media only screen and (max-width: 767px){

.pc-none{
    display: block;
}
.sp-none{
    display: none;
}

.grid >*{
        width: auto;
        float: none;
    }

.grid--gutter{
        margin-left: 0;
        margin-right: 0;
        margin-top: -20px;
    }

.grid--gutter >*{
        padding-left: 0;
        padding-right: 0;
        margin-top: 20px;
    }

.grid--gutter-w{
        margin-left: 0;
        margin-right: 0;
        margin-top: -20px;
    }

.grid--gutter-w >*{
        padding-left: 0;
        padding-right: 0;
        margin-top: 20px;
    }

}
/*===================================================================
------------------
Table Of Contents
------------------
    01) base
    02) layout
    03) header
    04) footer

===================================================================*/
/*-------------------------------------------------------------------
 01) base
-------------------------------------------------------------------*/
html{
    font-size: 62.5%;
}
body{
    font-family:  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", YuGothic, sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #333;
    word-break : break-all;
}
a{
    color: #006cff;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
#wrapper{
    min-width: 1040px;
}
.main{
    width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 0;
}
.hd__btn, .btn{
    position: relative;
    border-radius: 4px;
    border-bottom: 3px solid #aa000c;
    background: rgb(242,130,132);
    background: linear-gradient(to bottom, rgba(240,100,100,1) 0%,rgba(230,16,0,1) 100%);
}
.hd__btn:active, .btn:active{
    margin-top: 2px;
    border-bottom-width: 1px;
}
.hd__btn:hover, .btn:hover{
    opacity: .8;
}
/*-------------------------------------------------------------------
 02) header
-------------------------------------------------------------------*/
.hd{
    position: relative;
    height: 54px;
}
.hd__inr{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFF;
    border-bottom: 1px solid #CCC;
}
.hd__cont{
    overflow: hidden;
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 7px 20px 8px;
}
.hd__logo{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    width: 150px;
    height: 38px;
    background: url(../img/logo_asahi.svg) center center / 100% no-repeat;
}
.hd__link{
    position: absolute;
    right: 20px;
    top: 7px;
}
.hd__txt{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    float: left;
    width: 250px;
    height: 38px;
    margin-right: 20px;
    background: url(../img/hd_txt.png) center center no-repeat;
}
.hd__btn{
    display: block;
    float: left;
    width: 220px;
    height: 38px;
}
.hd__btn span{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    width: 220px;
    height: 38px;
    background: url(../img/hd_btn.png) center center no-repeat;
}
.hl{
    position: relative;
    padding: 0 20px;
    height: 310px;
    background: url(../img/hl_bg.jpg) center 0 repeat-x;
}
.hl__ttl{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    position: relative;
    top: 30px;
    width: 1000px;
    margin: 0 auto;
    padding-top: 21.8%;
    background: url(../img/hl_ttl.png) center 0 no-repeat;
}
/*-------------------------------------------------------------------
 03) footer
-------------------------------------------------------------------*/
.ft{
    background: #FFF;
}
.ft__inr{
    overflow: hidden;
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}
.copy{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    width: 670px;
    height: 15px;
    margin: 0 auto;
    background: url(../img/txt_copyright.png) center center no-repeat;
}
/*===================================================================
------------------
Table Of Contents
------------------
    01) area
    02) button
    03) text, list
===================================================================*/
/*-------------------------------------------------------------------
 01) area
-------------------------------------------------------------------*/
.link-unit{
    background: url(../img/bg01.png) center 0 repeat;
}
.link-unit__inr{
    width: 1000px;
    margin: 0 auto;
    padding: 20px 20px;
}
.bnr-wrap{
    padding: 20px;
    background: #FFF;
    border-radius: 8px;
}
.bnr{
    overflow: hidden;
    position: relative;
}
.bnr ul{
    position: relative;
    left: 50%;
    float: left;
    margin-bottom: 20px;
}
.bnr li{
    position: relative;
    left: -50%;
    float: left;
    margin: 0 20px ;
}
.bnr li a, .bnr li span{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    height: 50px;
    background-position: 0 0;
}
.bnr__as{
    width: 120px;
}
.bnr__as a, .bnr__as span{
    background-image: url(../img/bnr_as.png);
}
.bnr__aw{
    width: 130px;
}
.bnr__aw a, .bnr__aw span{
    background-image: url(../img/bnr_aw.png);
}
.bnr__nyt{
    width: 176px;
}
.bnr__nyt a, .bnr__nyt span{
    background-image: url(../img/bnr_nyt.png);
}
.bnr__ag{
    width: 64px;
}
.bnr__ag a, .bnr__ag span{
    background-image: url(../img/bnr_ag.png);
}
.bnr__ns{
    width: 130px;
}
.bnr__ns a, .bnr__ns span{
    background-image: url(../img/bnr_ns.png);
}
.sect{
    margin-bottom: 50px;
    padding: 20px;
    background: url(../img/bg_strip02.png) center 0 #e5e5e5 repeat;
    border-radius: 8px;
}
.sect__ttl{
    padding: 8px 10px 3px;
    margin-bottom: 20px;
    background: url(../img/bg_strip.png) center 0 #404040 repeat;
    color: #FFF;
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 8px;
}
.sect__ttl:before{
    content: "";
    display: inline-block;
    position: relative;
    top: -3px;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    background: 0 0 no-repeat;
    vertical-align: middle;
}
.sect__subttl{
    margin-bottom: 20px;
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
}
.sect__subttl span{
    padding: 0 0 6px 0;
    border-bottom: 2px solid #f7ae00;
}
.sect__cont{}
.sect01 .sect__ttl{
    color: #f7ae00;
}
.sect01 .sect__ttl:before{
    background-image: url(../img/ico_caution.png);
}
.sect02{
    background-color: #c4f3ea;
}
.sect02 .sect__ttl{
    background-color: #03c09c;
}
.sect02 .sect__ttl:before{
    background-image: url(../img/ico_note.png);
}
.sect03{
    background-color: #ffd0aa;
}
.sect03 .sect__ttl{
    background-color: #fa6c2d;
}
.sect03 .sect__ttl:before{
    background-image: url(../img/ico_comment.png);
}
.box01{
    padding: 20px;
    background: #FFF;
    border-radius: 8px;
}
.box01__ttl{
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: bold;
}
.box02__item > div{
    padding: 20px;
    background: url(../img/bg_note.png);
    border-radius: 8px;
    min-height: 170px;
}
.box02__ttl{
    position: relative;
    padding-left: 60px;
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: bold;
}
.box02__ttl:before{
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    width: 58px;
    height: 58px;
    background: url(../img/ico_number01.png) 0 0 / 100% no-repeat;
}
.box02__ttl--02:before{
    background-image: url(../img/ico_number02.png);
}
.box02__ttl--03:before{
    background-image: url(../img/ico_number03.png);
}
.box02__list, .box02__txt{
    padding-left: 60px;
}
.box02__list li{
    margin-bottom: 2px;
}
.box02__list li:before{
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: url(../img/ico_checkbox.png) 0 0 / 100% no-repeat;
    vertical-align: top;
}
.box03{
    padding: 20px;
    background: #FFF;
    border-radius: 8px;
    margin-top: 20px;
}
.box03:first-child{
    margin-top: 0px;
}
.box03__ttl{
    position: relative;
    margin-bottom: 20px;
    font-size: 2.3rem;
    font-weight: bold;
    padding-left: 65px;
    line-height: 52px;
    padding-right: 400px;
}
.box03__ttl:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    background: url(../img/ico_question.png) 0 0 / 100% no-repeat;
}
.box03__txt{
    position: relative;
    padding-left: 65px;
    padding-right: 400px;
}
.box03__txt:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    background: url(../img/ico_anser.png) 0 0 / 100% no-repeat;
}
.box03__txt--01{
    min-height: 150px;
}
.box03__txt--01:after{
    content: "";
    position: absolute;
    bottom: -10px;
    right: -20px;
    width: 420px;
    height: 233px;
    background: url(../img/fig_sect03_01.png) 0 0 / 100% no-repeat;
}
.box03__txt--02{
    min-height: 80px;
}
.box03__txt--02:after{
    content: "";
    position: absolute;
    bottom: -10px;
    right: -20px;
    width: 420px;
    height: 162px;
    background: url(../img/fig_sect03_02.png) 0 0 / 100% no-repeat;
}
.ft-bnr{
    position: relative;
    overflow: hidden;
}
.ft-bnr p{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    height: 214px;
    background: url(../img/fig_ft.png) center center no-repeat;
}
.chr{
    position: absolute;
    bottom: -10px;
    right: 240px;
    width: 120px;
    height: 182px;
    background: url(../img/chr01_body.svg) 0 0 / 100% no-repeat;
}
.chr__move{
    position: absolute;
    left: 50%;
    top: 60px;
    margin-left: -60px;
    width: 120px;
    height: 56px;
    background: url(../img/chr01_beard.svg) 0 0 / 100% no-repeat;
    -webkit-animation: chrMove 3s infinite ;
            animation: chrMove 3s infinite ;
}
.chr__nose{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 60px;
    margin-left: -9px;
    width: 15px;
    height: 12px;
    background: url(../img/chr01_nose.svg) 0 0 / 100% no-repeat;
}
@-webkit-keyframes chrMove{
    0%{
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    10%{
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
    }
    20%{
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100%{
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}
@keyframes chrMove{
    0%{
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    10%{
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
    }
    20%{
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    100%{
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}
/*-------------------------------------------------------------------
 02) button
-------------------------------------------------------------------*/
.btn{
    display: block;
    border-radius: 10px;
    border-bottom-width: 5px;
}
.btn span{
    display: block;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    height: 130px;
    background: url(../img/btn01.png) center center no-repeat;
}
.btn:active{
    margin-top: 4px;
}
/*-------------------------------------------------------------------
 03) text
-------------------------------------------------------------------*/
.ico-caution02:before{
    content: "";
    display: inline-block;
    position: relative;
    top: -3px;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: url(../img/ico_caution02.png) 0 0 / 40px 40px no-repeat;
    vertical-align: middle;
}
.lsit-circled-decimal li{
    position: relative;
    padding-left: 1.5em;
}
.lsit-circled-decimal li > span{
    position: absolute;
    left: 0;
}