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

/* sake/index.html おせちとお酒のペアリング　～藤井さん流のお正月の楽しみ方～ */
#sake_fujii            { margin: 0 auto; width: 980px; }
#sake_fujii article    { margin: 60px auto; }
#sake_fujii 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; }
#sake_fujii article h3 { margin: .5em auto; text-align: center; font-weight: bold; font-size: 24px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #4c4c4c; }
#sake_fujii article h4 { margin: .5em auto; padding: .25em .5em; font-weight: bold; font-size: 18px; line-height: 1.5; font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif; color: #921717; border: solid 2px #921717; border-radius: .5em; }
#sake_fujii article h4 span.small        { font-weight: normal; font-size: 16px; display: inline-block; }
#sake_fujii article h4 span.small:before { content: '　'; }
@media only screen and (max-width: 768px){
#sake_fujii            { width: 100%; }
#sake_fujii article    { margin: 6vw auto!important; padding: 0 3vw; }
#sake_fujii article h2 { font-size: 6vw!important; }
#sake_fujii article h3 { margin: .5em auto; font-size: 4.5vw!important; }
#sake_fujii article h4 { padding: .25em .5em; font-size: 4vw!important; border: solid 2px #921717; border-radius: .5em; }
#sake_fujii 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 6px -4px 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%; }
}