@charset "utf-8";
/*------------------------------------------------------------------------------------------
*
*
    index_sp.css
*
*
------------------------------------------------------------------------------------------ */
/*------------------------------------------------------------------------------------------
*
*
    max-width: 640px
*
*
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 640px) {

#contents_area{
    margin: 0 auto;
    overflow: hidden;
}

#wrap .head{
    width: 100%;
    padding: 10px 0;
    background-color: #463320;
    text-align: center;
    line-height: 0;
}

#wrap .head img{
    width: 40%;
    min-width: 225px;
    line-height: 0;
}

#wrap .head{
    border-bottom: 10px solid #868067;
}

/* --------------------------------------------------
*
    #mv
*
-------------------------------------------------- */
#mv{
    width: 100%;
    background-color: #ecedec;
    text-align: center;
}

#mv img{
    width: 100%;
}

#wrap .date{
    padding: 20px 30px;
    margin: 0 auto 30px auto;
    box-sizing: border-box;
    line-height: 0;
    background-color: #463320;
    text-align: center;
    overflow: hidden;
}

#wrap .date img{
    width: 100%;
    max-width: 400px;
}

#sec_yodogawa{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

#sec_yodogawa .col_l{
    vertical-align: top;
    margin: 0 0 30px 0;
}

#sec_yodogawa .col_r{
    vertical-align: top;
}

#sec_yodogawa p{
    font-size: 16px;
    font-weight: bold;
    letter-spacing: .02em;
    line-height: 2.3em;
}

#sec_yodogawa .btn_profile{
    width: 100%;
    max-width: 320px;
    height: 55px;
    margin: 30px auto;
    text-align: center;
}

#sec_yodogawa .btn_profile a{
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    line-height: 58px;
    display: block;
    font-size: 14px;
    letter-spacing: .14em;
    color: #dadada;
    background-color: #604313;
    box-shadow: 0 8px 0 #463320;
    border-radius: 5px;
    position: relative;
    top: 0;
    left: 0;
    white-space: nowrap;
    transition: box-shadow .15s ease .0s, top .15s ease .0s, left .15s ease .0s, color .15s ease .0s;
}

.is_sp #sec_yodogawa .btn_profile a.touch,
.is_pc #sec_yodogawa .btn_profile a:hover{
    color: #cc9d15;
    top: 6px;
    left: 0;
    box-shadow: 0 2px 0 #463320;
    transition: box-shadow .2s ease .05s, top .2s ease .05s, left .2s ease .05s, color .2s ease .05s;
}

/* --------------------------------------------------
*
    #sec_body_wrap
*
-------------------------------------------------- */
#sec_body_wrap{
    padding: 15px;
    background-color: #463320;
}

#sec_body_wrap h2{
    margin: 0 0 40px 0;
    text-align: center;
}

#sec_body_wrap h2 img{
    width: 90%;
    max-width: 469px;
}

#sec_body_top{
    padding: 45px 15px 10px 15px;
    background-color: #e6e6e6;
    text-align: center;
}

#sec_body_top p{
    margin: 0 0 25px 0;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    letter-spacing: .06em;
    line-height: 2.3em;
}

#sec_body_top p.img{
    width: 100%;
    margin: 10px 0 15px 0;
    text-align: left;
    display: inline-block;
    padding: 0;
}

#sec_body_top p.img.v{
    max-width: 420px;
}

#sec_body_top p.img .caption{
    margin: 0 0 10px 0;
    display: block;
    font-size: 12px;
    line-height: 1.7em;
    font-weight: normal;
    color: #534741;
}

#sec_body_top p.img a{
    display: block;
    color: #534741;
}

#sec_body_top p.img img{
    width: 100%;
}

#sec_body_top a{ transition: color .1s ease .0s;}
#sec_body_top a:hover,
#sec_body_top a.touch{
    color: #e4ae61;
    transition: color .15s ease .05s;
}

#sec_body_top .btn_about{
    margin: -10px 0 20px 0;
}

#sec_body_top .btn_about img{
    width: 100%;
    max-width: 509px;
}

#sec_body_wrap h3{
    margin: 20px 0;
    text-align: center;
}

#sec_body_wrap h3 img{
    width: 100%;
    max-width: 420px;
}

#sec_body{
    padding: 30px 0 0 0;
    background-color: #e6e6e6;
    overflow: hidden;
}

#sec_body section{
    margin: 0 0 35px 0;
}

#sec_body h3{
    margin: 0 0 20px 0;
    font-size: 22px;
    letter-spacing: .06em;
    font-weight: bold;
    color: #2e130b;
    text-align: center;
    white-space: nowrap;
}

#sec_body h3.s{
    font-size: 18px;
}

#sec_body h3 img{
    width: 60px;
}

#sec_body h3 span.t{
    margin: 15px 0 0 0;
    text-indent: .5em;
    display: block;
    line-height: 1.6em;
}

#sec_body h3 span.ti{
    display: block;
}

#sec_body h3 span.ti_sp{
    display: block;
}

#sec_body .section_inner{
    padding: 20px 0 10px 0;
    margin: 0 10px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #b6aea2;
    border-radius: 10px;
    color: #1a1a1a;
}

#sec_body .section_inner p{
    margin: 0 0 20px 0;
    padding: 0 15px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .06em;
    line-height: 2em;
}

#sec_body .section_inner p.caution{
    margin-left: 15px;
    text-indent: -1em;
    padding: 0 15px 0 1em;
    color: #933100;
    position: relative;
    font-size: 12px;
}

#sec_body .section_inner p.img{
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    text-align: left;
    line-height: 1em;
}

#sec_body .section_inner p.img.v{
}

#sec_body .section_inner p.img img{
    width: 100%;
}

#sec_body .section_inner p.img.sep img{
    width: 100%;
    vertical-align: top;
}

#sec_body .section_inner p.img .caption{
    margin: 10px 0 0 0;
    text-indent: -1em;
    padding-left: 1em;
    display: block;
    font-size: 12px;
    line-height: 1.7em;
    font-weight: normal;
    color: #534741;
    letter-spacing: .05em;
}

#sec_body .section_inner p a:hover,
#sec_body .section_inner p a.touch{
    text-decoration: underline;
    transition: border .15s ease .05s;
}

#sec_body .section_inner p .caution{
    font-size: 85%;
}

#sec_body .section_inner p.notes{
    text-indent: -1em;
    padding-left: 1em;
}

#sec_body .section_inner p.notes.k{
    margin-left: 15px;
    margin-right: 0px;
    text-indent: -1.5em;
    padding-left: 1.5em;
    font-size: 13px;
}

#sec_body .btm_date{
    margin: 35px 0;
    text-align: center;
    font-size: 12px;
    color: #604313 ;
    letter-spacing: .33em;
}

/* --------------------------------------------------
*
    #foot_share
*
-------------------------------------------------- */
#foot_share{
    margin: 0 auto;
    padding: 40px 0 0 0;
    box-sizing: border-box;
}

#foot_share ul{
    max-width: 420px;
    padding: 0 5px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: -.40em;
}

#foot_share li{
    width: 25%;
    display: inline-block;
    letter-spacing: normal;
    text-align: center;
}

#foot_share li.home.switch_sp{
    display: inline-block;
}

#foot_share li.home.switch_pc{
    display: none;
}

#foot_share .col_hobo{
    margin: 20px 0 0 0;
}

#foot_share .col_hobo li{
    width: 100%;
    display: block;
    letter-spacing: normal;
    text-align: center;
}

#foot_share li img{
    width: auto;
    height: 68px;
}

#foot_share .copyright{
    clear: both;
    padding: 30px 0 15px 0;
    text-align: center;
}

#foot_share .copyright img{
    width: 253px;
}



/* --------------------------------------------------
*
    #modal_profile
*
-------------------------------------------------- */
.modal_wrap{
    display: none;
}

.modal_profile{
    text-align: left;
}

.modal_profile section{
    margin: 0 0 60px 0;
}

.modal_profile section:last-child{
    margin: 0;
}

.modal_profile .section:last-child{
    margin: 0;
}

.modal_profile h3{
    margin: 0 0 30px 0;
    font-size: 20px;
    letter-spacing: .08em;
}

.modal_profile a{
    display: inline-block;
    text-indent: -.5em;
    border-bottom: 1px solid transparent;
    color: #e0701a;
}

.is_pc .modal_profile a:hover,
.is_sp .modal_profile a.touch{
    text-decoration: underline;
}

.modal_profile h3 .en{
    margin: 10px 0 0 0;
    display: block;
    font-size: 12px;
    position: relative;
    letter-spacing: .02em;
}

.modal_profile p{
    margin: 0 0 25px 0;
    font-size: 14px;
    line-height: 2em;
}

.modal_profile p:last-child{
    margin: 0;
}

.modal_profile .pic{
    text-align: center;
}

.modal_profile .pic img{
    width: 450px;
}


} /* ----- min-width : 641px ----- */