html{ scroll-behavior: smooth;}
body{ margin:0; padding:0; font-size: 20px; font-family: "source-han-serif-tc", serif; font-weight: 300; }
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
h1,h2,h3,h4{ font-weight: 400; margin:0; position: relative; z-index: 2;}
ol{ padding-left: 1em;}

.device{ display: none;}

header{ background: url(images/header_bg.png) no-repeat left bottom/cover; height: auto; min-height: 800px; font-weight: 400; overflow-x: hidden;}
.headertxt{ font-size: 1.4em; text-align: center; padding-top: 1em;}
.headertxt strong{ font-size: 1.2em; color:#719b4b; font-weight: normal;}
.mainvisual{ width:90%; display: grid;grid-template-columns:1fr 1fr; gap: 1em; margin: 1em auto 0 auto;}
hgroup{ padding-left: 50px; font-size: 1.3em; }
hgroup p{ margin: 1.5em 0; text-align: center;}
.sale{ background:#97c1e5; border-radius: 100px; text-align: center; padding: 10px 0; color:#fff; font-family: source-han-sans-traditional, sans-serif; font-weight: 300; line-height: 1.2;}
.sale b{ color:#fcf070; font-size: 1.2em; font-weight: 500;}

[class^=page]{ padding:100px 0;}
.page1{ background: url(images/pagetype4_bg.png) ;}
h2{ line-height: 1.2; font-size: 2em; font-weight: 400; text-align: center; background: url(images/h2_bg.png) no-repeat center bottom; padding-bottom: 0.5em; background-size: 1080px 50px;  max-width: 95%; margin:0 auto 1em auto;}
h2 i{ display: block; font-size: 0.5em; font-weight: normal;}
.booksinfo{ /*display: grid;grid-template-columns:1fr 1fr; gap: 1em;*/ width:90%; max-width: 920px; margin: 0 auto;}
.B-img{ width:300px; text-align: center;}
.B-img img{ display: block; filter: drop-shadow(2px 2px 3px #9f9f9f77); margin-bottom: 1em;}
.B-img span{ display: inline-block; padding:2px 5px; background:#fbfbef; font-size: 14px; color:#7e796e; border-radius: 2px;}
.tabs ul{ font-size: 1.1em; margin-bottom: 1em;display:grid; grid-template-columns: 1fr 1fr; gap:10px; list-style: none; padding: 0;}
.tabs ul a{ display: block; text-decoration: none; text-align: center; padding:10px; color:#666; background:#d4d5cc;}
    .ui-tabs-active a[href="#book1"]{ color:#fff; background:#2958b0;}
    .ui-tabs-active a[href="#book2"]{ color:#fff; background: #d14f00; }
[class^=booktype] { display: flex; gap:50px; align-items: center; max-width:800px; margin:0 auto;}
.booktype1{animation:fadeInLeft 1s;}
.booktype2{animation:fadeInRight 1s;}
    @keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    }
    @keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    }

[class^=booktype] p{ font-size: 0.8em;}
    .booktype1 strong{ color:#2958b0;}
    .booktype2 strong{ color:#d14f00;}
.linktostore{ display: flex; gap:10px;}
.linktostore a{ flex: 1; text-align: center; border:1px solid #000; text-decoration: none; color:#000; padding:10px;}

.page2{ background:url(images/pagetype2_bg.png);}
h2 strong{ color:#685ba7;}
.ABTA{ width:85%; max-width: 900px; margin: 0 auto; display: flex; gap:20px; align-items: center;}
.about-img{ border-radius:200px; overflow: hidden; max-width: 300px;}
.about-img img{ display: block;}
.about-info{ font-size: 0.9em;}
.share{ display: flex; gap:5px;}
.share a{ text-decoration: none; color:#8c7033; border:1px solid #8c7033; padding:10px 20px;}
.share img{ height: 1.2em; vertical-align: text-bottom; margin-right: 5px;}

.page3{ background:url(images/pagetype1_bg.png);}
.page3 dl{ position: relative; display: grid; grid-template-columns:5em 1fr; gap:20px 10px; width:80%; max-width: 800px; background:#fff; padding:50px 100px; box-sizing: border-box; margin:0 auto;}
.page3 dl:before{ display: block; content: ''; background:url(images/clip.png) no-repeat left top/cover; width:50px; max-width: 74px; aspect-ratio:74/119; position: absolute;top: -2.1%;left: 1em;}
.page3 dd{ font-size: 0.9em;}
fieldset{ font-size: 0.7em; font-family: source-han-sans-traditional, sans-serif; font-weight: 100; width:85%; max-width: 900px; margin: 50px auto 0 auto; border:1px solid #000; box-sizing: border-box; padding:0 50px;}
legend { text-align: center; font-size: 1.1em; font-weight: 400;}

.page4{ background: url(images/pagetype3_bg.png) fixed; padding:100px 0 0 0;}
.page4 h2{ background:url(images/h2type2_bg.png) no-repeat center bottom;  background-size: 1080px 50px;}
.bookzone{ padding:50px 0 100px 0; display: grid; grid-template-columns: repeat(3,1fr); gap:30px; justify-self: center;}
.book{ text-decoration: none; color: inherit; max-width: 195px;}
.book span{ display: block;}
.b-info{ font-size: 0.8em; color:#666;}
.point{ background: linear-gradient(#fbfab500,#fbfab500 60% , #fbfab5 60%);}
.point b{ font-size: 1.3em; color:#0767ba;}

footer{ padding:20px 0; text-align: center; font-size: 14px;}

.avatar{ max-width: 293px; min-width: 120px; width:10%; position: fixed; bottom:0; right:20px; z-index: 10; }
.avatar img{ display: block;}

@media screen and (min-width:1440px) {
    hgroup{ padding:50px 0 0 50px;}
    .headertxt{ font-size: 2em;}
}

@media screen and (max-width:1080px) {
    .desk{ display: none;}
    .device{ display: block;}

    header{ min-height: unset;}
    .headertxt{ font-size: 1.1em;}
    .headertxt em{ display: block;}
    .mainvisual{ width:100%;}
    hgroup{ padding: 0; }
    hgroup p{ margin:-1em auto 1em auto; width:90%;}
    hgroup .sale{ width:90%; margin: 0 auto;}

    .avatar{ right:10px;}
    .mainvisual{grid-template-columns: 1fr; }
}

@media screen and (max-width:768px) {
    body{ font-size: 18px;}
    [class^=booktype] { flex-direction: column;}
    .booksinfo{ grid-template-columns: 1fr;}
    .bookzone{grid-template-columns: repeat(2,1fr);}
    .ABTA{ flex-direction: column;}
}
@media screen and (max-width:468px) {
    body{ font-size: 16px;}
    }


/* po_bar */
.logo{ position: absolute; top:10px; left: 10px; display:block; width:90px;}
.btn-menu { width:32px; height:32px; position:absolute; top:10px; right:10px; background:url(images/icon-menu.png) no-repeat center center; background-size:32px 32px; z-index:101;}

.btn-menu.active{ background:url(images/icon-xx.png) no-repeat center center; background-size:32px 32px;}

#option{ display: none; text-align: center; list-style: none; margin: 0; padding: 0; font-size:16px; inset: 0 0 0 auto; padding:10px; text-align: right; width:50%; max-width:300px; background:#2d2b28f2; position: fixed; z-index: 15; text-align: center;}
#option li{ display: block; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}
#option img{ height: 35px;}