@charset "UTF-8";
/* CSS Document */

/* sake/index.html おせちとお酒のペアリング　～藤井さん流のお正月の楽しみ方～ */
#worldosechi            { margin: 0 auto; width: 980px; }
#worldosechi article    { margin: 60px auto; }
#worldosechi article h2 { margin: 0 auto; text-align: center; font-weight: bold; font-size: 44px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717; margin: 2rem auto; }
#worldosechi article h3 { margin: 1em auto; text-align: center; font-weight: bold; font-size: 36px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717;}
#worldosechi article h4 { margin: .5em auto; padding: .25em .5em; font-weight: bold; font-size: 28px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717;/* border: solid 2px #921717; border-radius: .5em;*/ }
#worldosechi article h4 span.small        { font-weight: normal; font-size: 16px; display: inline-block; }
#worldosechi article h4 span.small:before { content: '　'; }

#worldosechi article h3.left        { text-align: left; padding-left: 1em; position: relative;  }
#worldosechi article h3 .span       { position: absolute; white-space: nowrap; padding-left: 2em; text-indent: -1em; margin-left: 1em; }

/*
#worldosechi article ul.toc         { width: 80%; margin: auto; padding: 1em 2em; box-sizing: border-box; border: solid 1px #921717; background: #F1F1F1; 
#worldosechi article ul.toc li      { font-size: 16px; line-height: 2.5em; color: #3c84cd; }
#worldosechi article ul.toc li a    { color: #3c84cd; text-decoration: underline; }
#worldosechi article ul.toc li a:hover {  text-decoration: underline!important; }*/


#worldosechi article ul.toc         { width: 80%; margin: auto; padding: 1em 2em; box-sizing: border-box; background: #F5F5F5; border: solid 1px #785f60; border-left: solid 25px #785f60; margin-bottom: 100px; }
#worldosechi article ul.toc li      { font-size: 18px; line-height: 2.5em; border-bottom: solid 1px rgba(143,117,118,.6) }
#worldosechi article ul.toc li a    { text-decoration: underline; }
#worldosechi article ul.toc li a:hover {  text-decoration: underline!important; color: #3c84cd; }


.content_section                    { padding-bottom: 0; }
.inner                              { margin: 0 auto; width: 980px; }
.inner p                            { margin-bottom: 2em!important; }
.clearfix:before, .clearfix:after   { content: ''; display: table; }
.dento_toplink .dentolink           { margin: 0 auto; text-align: center; }
.dento_toplink .dentolink .out_line { margin: 0 0.5em; padding: 2px; width: 360px; border: solid 2px #fe0000; border-radius: 6px; display: inline-block; }
.dento_toplink .dentolink p         { margin: 0!important; padding: 0!important; font-family: sans-serif; background-image: linear-gradient(to right, #fe0000 0%, #fe8080 100%)!important; border-radius: 4px; position: relative; }
.dento_toplink .dentolink p         { margin: 0!important; padding: 0!important; font-family: sans-serif; background-image: linear-gradient(to right, #fe0000 0%, #fe0000 100%)!important; border-radius: 4px; position: relative; }
.dento_toplink .dentolink p a       { padding: 0 3rem 0 0.5rem; height: 3rem; line-height: 3rem; font-weight: bold; font-size: 16px; text-decoration: none; color: #fff; display: block; position: relative; }
.dento_toplink .dentolink p a:after { content: '\f054'; font-weight: 900; font-family: "Font Awesome 5 Free"; text-align: center; width: 3rem; height: 3rem; background: #fe0000; position: absolute; top: 0; right: 0; border-radius: 0 4px 4px 0; -webkit-font-smoothing: antialiased; }
/* 世界のおせち */
.osechi #content_header h1.dento:after { content: '世界のおせち'; }
.worldmap .osechi_list                 { margin: 40px -20px 0 0; display: flex; flex-wrap: wrap; }
.worldmap .osechi_list li              { margin-bottom: 20px; margin-right: 20px; width: 230px; border: solid 2px #921717; border-radius: 1em; overflow: hidden; }
.worldmap .osechi_list li p            { margin: 0.5em auto; text-align: center; }
.worldmap .osechi_list li img          { width: 100%; }
.content_section .sm                   { font-size: 14px; }
.flex                                  { display: flex; justify-content: space-between; }
.flex .column1-2                       { width: 48%; }
.flex .column1-2 img                   { margin-bottom: 0.3em; }
.flex .column1-2 .caption              { margin-top: -0.5em; font-size: 12px; }
.flex .column1-2 p                     { margin-top: 0; }

.flex .column1-3                       { width: 41%; }
.flex .column1-3 img                   { margin-bottom: 0.3em; }
.flex .column1-3 .caption              { margin-top: -0.5em; font-size: 12px; }
.flex .column1-3 p                     { margin-top: 0; }

.flex .column2-3                       { width: 57.5%; }
.flex .column2-3 img                   { margin-bottom: 0.3em; width: 100%; height: auto; }
.flex .column2-3 .caption              { margin-top: -0.5em; font-size: 12px; }
.flex .column2-3 p                     { margin-top: 0; }




.osechi h4 img                         { height: 34px!important; width: auto!important; margin-right: 0.5em; }
.nomb                                  { margin-bottom: 0.2em!important; }

span.red                               { color: #FF0004; }
span.caption,
p.caption                              { font-size: 80%!important; margin-top: 0!important; }
img                                  { margin-bottom: 0.3em; }

.data {
    margin: 40px auto 0.5em auto;
    padding: 20px 50px;
    background: #fffae7;
    border: solid 1px #ccc;
}




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

#worldosechi article h3.left        { text-align: left; padding-left: 1em; position: inherit;  }
#worldosechi article h3 .span       { position: inherit; white-space: nowrap; padding-left: 0em; font-size: 85%!important;}


.worldmap .osechi_list                 { margin: 2em -1em 0 0; display: flex; flex-wrap: wrap; }
.worldmap .osechi_list li              { margin-bottom: 1em; margin-right: 1em; width: calc(50% - 1em); }
.flex                                  { display: block; }
.flex .column1-2                       { width: 100%; }
.osechi h4 img                         { height: 23px!important; }
.osechi h4 img.two-layers              { margin-top: -24px; }
.inner { width: 100%; }
.dento_toplink .dentolink .out_line {
    margin: 1rem 0 0 0;
    padding: 2px;
    width: 90%;
}
.flex .column1-3                       { width: 100%; }
.flex .column1-3 img                   { margin-bottom: 0.3em; }
.flex .column1-3 .caption              { margin-top: -0.5em; font-size: 12px; }
.flex .column1-3 p                     { margin-top: 0; }

.flex .column2-3                       { width: 100%; }
.flex .column2-3 img                   { margin-bottom: 0.3em; width: 100%; height: auto; }
.flex .column2-3 .caption              { margin-top: -0.5em; font-size: 12px; }
.flex .column2-3 p                     { margin-top: 0; }



}



.content_section h4 {
    margin: 1.5rem auto;
    padding: 0.5em 1em;
    font-size: 36px;
    text-align: center;
}
.content_section h4 {
    padding: 0;
    display: flex;
    align-items: center;
    font-weight: 400!important;
    background: none;
}
.content_section h4:before,
.content_section h4:after {
    border-top: 2px solid #7fc1fe;
}
.content_section h4:before {
    margin-right: 0.25rem;
}
.content_section h4:before,
.content_section h4:after {
    border-top: 2px solid #921717;
    content: "";
    flex-grow: 1;
}
.r_yose {
    text-align: right !important;
}

.content_section .inner img {
    width: 100%;
    height: auto;
}

.content_section .inner h3 img,
.content_section .inner h4 img {
    height: 34px!important;
    width: auto!important;
    margin-right: 0.5em;
}

.content_section .kakomi {
    margin: 0 0 2em 0;
    padding: 0;
    background: #fff;
    border: 2px solid #921717;
    border-radius: 1rem;
}
.content_section.outro h5 {
    margin: 0;
    padding: 0.75em 1rem;
    font-size: 24px;
    color: #921717;
    border-bottom: 2px solid #921717;
}
.content_section.outro .flex {
    padding: 1em;
}

.mb2em { margin-bottom: 2em; }







@media only screen and (max-width: 768px){
#worldosechi            { width: 100%; }
#worldosechi article    { margin: 6vw auto!important; padding: 0 3vw; }
#worldosechi article h2 { font-size: 6vw!important; }
#worldosechi article h3 { margin: .5em auto; font-size: 4.5vw!important; }
#worldosechi article h4 { padding: .25em .5em; font-size: 4vw!important; /*border: solid 2px #921717; border-radius: .5em;*/ }
#worldosechi article h4 span.small { font-size: 3.5vw; display: inline-block; }
}

/* カードめくり */
.playing_area                         { margin: 0px auto; }
.playing_area p.comment               { margin-bottom: 1em; font-weight: bold; font-size: 16px; }
.playing_area .cardLists ul           { display: flex; flex-wrap: wrap; justify-content: space-between; }
.playing_area .cardLists li           { padding-top: 34.5%; width: calc(20% - 1em); height: 0; position: relative; }
.playing_area .cardLists li div       { width: 100%; }
.playing_area .cardLists li div img   { width: 100%; }
.playing_area .cardLists li div.aside { position: absolute; top: 0; left: 0; cursor: pointer; transform-style: preserve-3d; transform: perspective(500px) rotateY(0deg); transition: ease-out 0.3s transform; }
.playing_area .cardLists li div.bside { position: absolute; top: 0; left: 0; cursor: pointer; transform-style: preserve-3d; transform: perspective(500px) rotateY(90deg); transition: ease-out 0.3s transform; }
.playing_area .caption                { margin: 0; font-size: 14px; }
@media only screen and (max-width: 768px){
.playing_area p.comment               { font-size: 3vw; }
.playing_area .cardLists li           { padding-top: 89%; width: calc(50% - .5em); height: 0; position: relative; }
.playing_area .caption                { margin: 0; font-size: 3vw; }
}
/* おせちとお酒のペアリング */
.pairling .col2        { display: flex; justify-content: space-between; }
.pairling .col2 div    { width: calc(50% - 1em); }
@media only screen and (max-width: 768px){
.pairling .col2        { display: block; }
.pairling .col2 div    { width: 100%; }
}
/* 藤井さんのお正月 */
.osyogatsu .col75     { width:  calc(75% - 1em); float: left; }
.osyogatsu .sfont     { width: calc(25% - 1em); float: right; font-size: 85%; }
.osyogatsu .sfont img { margin-top: 4.5em; width: 100%; margin-bottom: .5em; border: solid 1px #ccc; }
@media only screen and (max-width: 768px){
.osyogatsu .col75     { width: 100%; float: none; }
.osyogatsu .sfont     { margin: 0 auto 1em auto; width: 80%; float: none; font-size: 3vw; }
.osyogatsu .sfont img { margin-top: 0; }
}
/* 藤井さんプロフィール */
.summary .caption { font-size: 14px; }
.profile          { padding: 1em; background: #fffae7; border: solid 1px #ccc; }
.profile img      { float: left; margin: 0 1em 2.5em 0; }
.profile span     { font-size: 120%; }
@media only screen and (max-width: 768px){
.summary .caption { font-size: 3.3vw; }
.profile          { margin: 2em 0; font-size: 95%; }
.profile img      { margin-right: .5em; max-width: 33%; }
}