@charset "UTF-8";
@import "base.css";
@import "fonts.css";

/*==========================================================================*/
/*//////////////////////////////////////////////////////////////////////////*/
/*//////                                                              //////*/
/*//////  株式会社アートピース //////*/
/*//////                                                              //////*/
/*//////////////////////////////////////////////////////////////////////////*/
/*                                                                          */
/*    base.css  --> スタイルの初期設定を行うため、変更しないで下さい。      */
/*    fonts.css --> フォントの初期設定を行うため、変更しないで下さい。      *
/*                                                                          */
/*==========================================================================*/

/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/

/* 基本タグのフォントサイズを指定（12px -> 120% or 1.2em ） */
.index01 .container03 .box_content h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
textarea,
select,
p,
blockquote,
th,
td,
pre,
address,
li,
dt,
dd {
    font-size: 140%;
}



p,
dt,
dd,
td,
li {
    line-height: 1.7em;
}

p {
    line-height: 1.7em;
}


/* common_reset
------------------------------------------------------------------------*/

img {
    border: 0;
    vertical-align: bottom;
    width: 100%;
}

.center {
    text-align: center
}

.fLeft {
    float: left !important
}

.fRight {
    float: right !important
}

.clearBoth {
    clear: both
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}


/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/

html {
    background: none;
    max-width: 100%;
}

body {
    text-align: center;
    max-width: 100%;
    color: #241800;
    overflow-x: hidden;
    font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

}

#main {
    overflow: hidden;
    position: relative;
    max-width: 1170px;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

#index #main {
    max-width: 100%;
    padding-top: 80px;
}

#wrapper {
    text-align: left;
}

.inner {
    max-width: 1220px;
    margin: 0 auto;
}

/*==========================================================================*/
/*                             Contents                                     */
/*==========================================================================*/

/* contents
------------------------------------------------------------------------*/

#content {
    width: 745px;
    float: right;
    min-height: 700px;
    padding-top: 7px;
}

@font-face {
    font-family: 'NotoSansCJKjp';
    src: url('../fonts/NotoSansCJKjp-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansCJKjp_bold';
    src: url('../fonts/NotoSansCJKjp-Bold.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-Italic.ttf');
    font-weight: normal;
    font-style: normal;
}


/* ------------------------------------------------------------------- base */


.pb0 {
    padding-bottom: 0 !important
}

.mb0 {
    margin-bottom: 0 !important
}

.mb20 {
    margin-bottom: 20px
}

.mb25 {
    margin-bottom: 25px
}

.mb30 {
    margin-bottom: 30px
}

.mb45 {
    margin-bottom: 45px
}

.pb20 {
    padding-bottom: 20px
}

.pb25 {
    padding-bottom: 25px
}

.pb30 {
    padding-bottom: 30px
}

.pb35 {
    padding-bottom: 35px
}

.w20 {
    width: 20%;
}

.w25 {
    width: 25%;
}

.w30 {
    width: 30%;
}

.w33 {
    width: 33%;
}

.w50 {
    width: 50%;
}

.mr15 {
    margin-right: 15px;
}

.mr30 {
    margin-right: 30px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb45 {
    margin-bottom: 45px;
}

.mb50 {
    margin-bottom: 50px;
}

.sp_mb10 {
    margin-bottom: 10px;
}

.w14 {
    width: 14%;
}

.w16 {
    width: 16%;
}

.w25 {
    width: 30%;
}

/*==========================================================================*/
/*                               contents                                     */
/*==========================================================================*/


.mainvisual {
    background-image: url("../images/2020_newyear_main_pc.jpg");
  background-size: cover;
  height: 900px;
}

.main_contents {
    max-width: 1200px;
    margin: 0 auto;
}

.fast_sentence {
font-size: 1.6rem;
width: 90%;
margin:0 auto;

}

.brank_top {
    margin-top: 2em;
    font-size: 2rem;
}

.line_friend {
    width: 800px;
}

.deco {
    color: #c30d1a;
    font-size: 2rem;
    position: relative;
  padding: 0 .5em .5em 1.7em;
  text-align: left;
}

.deco::after {
    position: absolute;
  top: .2em;
  left: .4em;
  z-index: 2;
  content: '';
  width: 20px;
  height: 20px;
  background-color: #c30d1a;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.lprizes_lead {
    position: relative;
    padding: .5em .75em;
    background-color: #fadbd9;
    border-radius: 6px;
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 0.7em;
}

.enter_block {
    text-align: left;
}

.topics {
    text-align: left;
    margin-left: 3em;
    font-size: 1.1rem;
}

.topics dl {
    padding: 15px 0;
    }
    
    .topics dt {
    padding-bottom: 5px;
    }

.lprizes {
    width: 50%;
}

.anchor {
    font-size: 1.1rem;
    color:#241800;
    margin-bottom: 2em;
    text-align: right;
}


.appearance {
    color:#241800;
    font-size: 0.85rem;
    width: 100%;
    text-align: left;
}

.table.table-borderless.appearance th {
    vertical-align: middle;
}

@media screen and (max-width: 768px) {

    body {
    text-align: center;
    max-width: 100%;
    color: #241800;
    overflow-x: hidden;
    }

    img {
        width: 100%;
    }

    .topics dt {
        clear: left;
        float: left;
        width: 10%;
        }
        .topics dd {
        margin-left: 11%;
        }

}