@charset "UTF-8";

/* CSS Document */


html{
    background:#FFFFFF;
    color:#333333;
    text-align:center;
    margin:0;
    padding:0;
     background: url("img/back.jpg") fixed
}

body{
    margin:0;
    padding:0;
    font-family: "游ゴシック", YuGothic, "ヒラギノゴシック ProN W3", "Hiragino Gothic ProN", "HGゴシックE", sans-serif;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;

}

#header {
    text-align:  right;
    margin: auto;
    padding: 10px 0px 0px 0px;
    width: 100%;
    max-width: 990px;
}

#header a { color: #FFFFFF}

#wrapper {
    text-align: left;
    margin: auto;
    padding: 0px;
    width: 100%;
    max-width: 990px;
}

img {
    max-width : 100% ;
    height : auto ;}

.mt50 {
    margin-top: 50px
}

.copyright {
    text-align: center;
    margin: 50px 0px 30px 0px
}

.blank {
    background: url("img/blank.gif") no-repeat right;
    padding-right: 20px
}

a {
    color: #333333}

a:hover {
    color: #999999;
    cursor: pointer;}

/*-------------------------------------------------------
header 
-------------------------------------------------------*/

header {
    margin: 0 auto 0 auto;
    background: url("img/top_bg.png") no-repeat;
    background-size:cover;
}

h1 {
    margin: 0;
    padding: 0;
}

h1 img {
    width:60%;
    max-width: 600px;
    position: relative; top:10px; left:20%
}

h3 {
    margin: 0px 0px 20px 0px
}

#header2 {
    text-align:  right;
    margin: auto;
    padding: 10px 0px 5px 0px;
    width: 100%;
    max-width: 990px;
    background: url("img/logo_haikei.jpg") no-repeat;
}

.logo_100shunen {
   float: left
}

.logo_nihonkiin {
   margin: 60px 0px 0px 0px
}

/*-------------------------------------------------------
section
-------------------------------------------------------*/

.h3_black {
    margin-bottom: 20px;
    color: #FFFFFF;
    background: #333333;
    padding: 5px 5px 5px 15px
}

.section_box {
    clear: both;
 }

.section_item {
    width:95%;
    margin: 0px auto 0px auto;
}

.label_white {
    background: url("img/label_white.png") no-repeat;
    color: #cc0000;
    padding: 7px 0px 0px 0px;
    margin: 20px 0px 0px 0px;
    font-size: 120%;
    width: 250px;
    text-align: center;
    clear: both;
}

.box_white {
    background-color: #FFFFFF;
    margin: 0px 0px 20px 0px;
    padding: 20px
}

h2 {
    color: #FFFFFF;
    font-size: 120%;
    margin: 50px 0px 30px 0px;
    padding: 20px 0px 3px 20px
}

.attention {
    padding-left:2em;
    text-indent:-2em;
    text-shadow:5px 5px 5px #FFFFFF;
    font-size: 90%
}

.attention_red {
    padding-left:2em;
    text-indent:-1.5em;
    color: #d80c18;
    text-shadow:0px 0px 5px #FFFFFF;
}

.text_red {
    color: #cc0000;
}

.mt1 {
    margin-top: 10px
}

/*-------------------------------------------------------
navi
-------------------------------------------------------*/

#navi a {
    color: #FFFFFF}

#navi a:hover {
    color: #1e110f;
    cursor: pointer;}

#navi ul {
    margin: 1px 0px 0px 0px;
    padding: 0px;
    list-style: none;
}

#navi li {
    float: left;
    width: 197px;
    text-align: center;
    padding: 10px 0px 10px 0px;
    margin-bottom: 1px;
    background: #a57a44;
}

.navi_donations {
    background: #d80c18;
    text-align: center;
    font-size: 150%;
    padding: 10px;
    color: #ffffff;
    margin-top: 1px}

.navi_donations_black {
    background: #000000;
    text-align: center;
    font-size: 150%;
    padding: 10px;
    color: #ffffff;
    margin-top: 1px}

.navi_line {
    margin-right: 1px}

#modoru {
    text-align: right;}

#modoru a {
    color: #333333}

#modoru a:hover {
    color: #cccccc;
    cursor: pointer;}

/*-------------------------------------------------------
ライブ配信
-------------------------------------------------------*/

.h2_live {
    background: url("img/h2_text15.gif") no-repeat;
}

/*-------------------------------------------------------
挨拶
-------------------------------------------------------*/

.h2_greeting {
    background: url("img/h2_text02.gif") no-repeat;
}

.greeting_text {
    float: left;
    max-width:760px;
    min-width:375px;
    width:77%;
}

.greeting_photo {
    width: 200px;
    float:left; 
    padding: 0px 0px 20px 30px;
}

/*-------------------------------------------------------
100周年記念募金
-------------------------------------------------------*/

.h2_donations {
    background: url("img/h2_text08.gif") no-repeat;
}

#donations ol {
    color: #cc0000;
    margin: 10px 0px 10px -10px;
}

#donations ul {
    color:#333333;
    margin: 5px 0px 20px -25px;
}

#donations li {
    margin: 0px 0px 5px 0px;
}

.back_goke {
    background: url("img/back_goke.jpg") no-repeat right bottom
}

.back_goban {
    background: url("img/back_goban.jpg") no-repeat right bottom
}

.h4_red {
    background: url("img/h4_red.png") no-repeat
}

.qr_blue {
    color: #003f98;
    font-size: 120%;
    padding: 20px 20px 0px 20px;
    clear: both;
}

#donations .dl_flo {
    padding-top: 0px;
}

#donations .dl_flo dt {
    padding: 7px 0px 5px 10px;
    line-height: 1; margin-bottom: 1em;
    float: left; width: 8em; clear: left;
    text-shadow:0px 0 5px #FFFFFF;
}

#donations .dl_flo dd {
    margin:0em 0 1em 8em;
    padding:2px 0px 0px 0px;
    text-shadow:0px 0 5px #FFFFFF;
}

.youkou {
    margin:0px 0px 0px 10px;
    padding-left:2em;
    text-indent:-2.5em;
    text-shadow:0px 0 5px #FFFFFF;
}

.small {
    font-size: 90%
}

/*-------------------------------------------------------
沿革
-------------------------------------------------------*/

.h2_history {
    background: url("img/h2_text02.gif") no-repeat;
}

.h5_gengou {
    font-size:100%;
    background: url("img/h5_gengou.png") no-repeat;
    margin: 0px 0px 20px 10px;
    letter-spacing:0.5em
}

#history {}

#history .dl_flo { 
    padding: 0px 0px 0px 20px;
}

#history .dl_flo dt {
    padding: 7px 0px 5px 0px;
    line-height: 1; margin-bottom: 1em;
    float: left; width: 10em; clear: left;
}

#history .dl_flo dd {
    margin:0em 0 1em 10em;
    padding:2px 0px 0px 0px;
    font-weight: bold;
}

.history_left {
    width: 230px;
    font-size: 90%;
    float:left; 
    padding: 20px 0px 20px 10px;
    text-align: center;
    margin-top: -20px
}

.history_right {
    float:left;
    max-width:750px;
    min-width:375px;
    width:75%;
    margin-top: -20px;
}

/*-------------------------------------------------------
記念事業
-------------------------------------------------------*/

.h2_project {
    background: url("img/h2_text08.gif") no-repeat;
}

/*-------------------------------------------------------
棋士が選んだこの一手
-------------------------------------------------------*/

.h2_kishi {
    background: url("img/h2_text10.gif") no-repeat;
}

.h2_kishi_select {
    background: url("img/h2_text10.gif") no-repeat;
}

#kishi_list ul {
    list-style:none ;
    padding: 0px;
    margin: 0px;}

#kishi_list li {
    float: left; width: 174px;
    margin: 0px ;
    padding: 5px 10px 5px 10px;
    font-size: 90%; border: solid 1px #333333;
    text-align: center; }

/*-------------------------------------------------------
寄付者一覧
-------------------------------------------------------*/

.h2_list {
    background: url("img/h2_text05.gif") no-repeat;
    padding-bottom: 5px;
}

.h2_list2 {
    background: url("img/h2_text10.gif") no-repeat;
    padding-bottom: 5px;
}

.list_year {
    background: url("img/ten.png") no-repeat;
    padding: 2px 0px 10px 30px;
    margin-left: 25px}

.h3_month {
    font-size: 16px;
    background: url("img/h3_month.gif") no-repeat;
    padding-bottom: 5px;
}

.h3_group {
    font-size: 16px;
    background: url("img/h3_group.gif") no-repeat;
    padding-bottom: 5px;
}

#list {
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

#list ul {
    margin: 0px 0px 0px 20px;
    padding: 0px;
    list-style: none
}

#list li {
    float: left;
    width: 440px;
    background: url("img/ten.png") no-repeat;
    padding: 2px 0px 15px 25px;
}

/*-------------------------------------------------------
協賛サポーター
-------------------------------------------------------*/

.h2_supporter {
    background: url("img/h2_text08.gif") no-repeat;
}

#supporter_list_l {
    margin: 30px -10px 0px 0px;
}

#supporter_list_l ul {
    margin: 0px;
    padding: 0px;
    list-style: none
}

#supporter_list_l li {
    float: left;
    width: 490px;
    padding: 0px 10px 2px 0px;border:
}

#supporter_list_s ul {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none
}

#supporter_list_s li {
    float: left;
    width: 240px;
    padding: 0px 0px 2px 0px;
}

#supporter_text ul {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none
}

#supporter_text li {
    float: left;
    width: 495px;
    font-size: 30px;
    padding: 0px 0px 10px 0px;
}

.mr10 { margin-right: 10px}

/*-------------------------------------------------------
高額寄付者一覧
-------------------------------------------------------*/

.h2_p {
    background: url("img/h2_gold.gif") no-repeat; font-size: 36px
}

.list_k {
    background: url("img/goban.png") no-repeat;
    padding: 2px 0px 10px 30px;
    margin-left: 25px}

#list_big { margin-top: 30px}
#list_big ul { list-style: none}
#list_big li { background: url("img/goban.gif") no-repeat; font-size: 36px; float: none; width: auto; padding: 0px 0px 30px 60px;}

/*-------------------------------------------------------
YouTube レスポンシブ対応
-------------------------------------------------------*/
.youtube-ratio iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}