/*
基本黄緑 #60a219;
濃い緑 #327e2e;
かなり濃い緑 #462;
極薄黄色 #fcfcf3;
*/


html,body,section,div,p,ul,li{
    box-sizing: border-box; 
}
body{ font-size:16px; }
.pict img{ width:100%; }
.text{ margin-bottom:1.5em; text-align:justify; /*text-indent:1.2rem;*/ }
.dropCaps:first-letter{ font-size:3.4rem; line-height:1; float:left; margin:0.5rem .5rem 0; padding:0; }
h2.sectionTitle{ 
    font-size:3.6rem; font-weight:bold; color:#3e7c39; margin-bottom:30px; line-height:1.3;
}
.sectionTitle .sub{ font-size:1.5rem; margin:0 5px;}

h3.cornerTitle{
    font-size:2rem; margin-top: 0; margin-bottom:20px; padding:5px 10px; border-left:none;
    background-color:#60a219; border-radius:3px; color:#fff; 
}
.contSec{ margin-bottom:100px; }
.contBlock{ margin-bottom:100px; position:relative; }
.cornerBox{ margin-bottom:30px; }
.objCase{ margin:25px auto; }
.flexBox{ display:flex; }
.flexBox.btw{ justify-content:space-between; }
.flexBox.aro{ justify-content:space-around; }
.flexBox.cen{ justify-content:center; }
.flexBox.wrap{ flex-wrap:wrap; }
.cardBox{ display:flex; flex-wrap:wrap; }
.pageIndex{
    flex-wrap:wrap; padding:15px; margin-bottom:20px; border-radius:6px; background:#fcfcf3;
}
.pageIndex .header{
    border-bottom:none; border-right:1px solid #aaa;  width:130px; margin-bottom:0;
    color:#963; font-weight:bold;
}
.pageIndex .linkList{ padding-left:30px; }
.pageIndex .anchorLink{ margin-bottom:6px; }
.anchorLink a{
    display:block; width:100%; height:100%; padding:5px 10px;
    background-color:#fff9c6; border-radius:5px; border:1px solid #ec9; color:#963;
}

.cornerTitle{ font-size:1.8rem; font-weight:; color:cadetblue; }
.smallHeader{ font-size:1.6rem; font-weight:bold; color:#444; margin-bottom:5px; }
.smallHeader::before{
    content:''; display:inline-block; width:1.2rem; height:1.2rem; background-color:#60a219;
    border-radius:50%; margin-right:5px;
}
.danrakuList > .danraku{ margin-bottom:60px; }
.putitHeader{ 
    color:#3e7c39; margin-bottom:12px; font-size:105%; font-weight:bold; 
    font-feature-settings:'palt';
}

.maruSujiList{  }
.maruSujiList .topic{ display:flex; margin-bottom:12px; }
.maruSujiList .topic .num{
    display:flex; justify-content:center; align-items:center; color:#fff; margin-right:5px;
    background-color:#585; width:2.5rem; height:2.5rem; border-radius:50%; 
}
.maruSujiList .topic .text{ width:calc(100% - (2.5rem + 5px)); font-size:1.5rem; }
.maruSujiList .topic .enhanced{ font-size:120%; }
/*.objCase{ text-align:center; padding:15px 0; margin:0; }*/

.cap{ font-size:85%; }
.textCase .cap{ line-height:1.8rem; display:inline-block; padding-left:1.3rem;}
.upperStrong{ font-size:110%; font-weight:bold; }
.redTxt{ color:#d15; }
.red{ color:red; }
.dullRed{ color:#d1452e; }
.green{ color:green; }
.bold{ font-size:110%; font-weight:bold; }
.stronger{ font-size:130%; font-weight:bold; }
.keigakomi{ border:1px solid #333; padding:0 3px; margin-right:5px; }
.copyWord{ font-size:140%; font-weight:bold; line-height:1.6; }

th{ font-weight:bold; background-color:#d1e998; }
.sickList th{ color:#477c46; }

table.basicTable{ border-left:1px solid #aaa; border-top:1px solid #aaa; }
table.basicTable th,
table.basicTable td{
    padding:5px 8px;
    border-right:1px solid #aaa; border-bottom:1px solid #aaa;  
}

table.reset{ display:table !important;  }
table.reset tbody{ display:table-row-group !important; }
table.reset tr{ display:table-row !important;}
table.reset th,
table.reset td{ display:table-cell !important;}

.fullLargePict{ width:100%; margin:15px 0; }
.largePict{ width:min(480px, 100%); margin:15px 0; }
.pictCap{ display:inline-block; font-size:1.2rem; margin-bottom:8px; }
.lead{ margin-bottom:30px; }

.numHead{ display:flex; align-items:center; margin-bottom:10px;}
.numHead .num{
    background:#327e2e; color:#fff; width:2.2rem; height:2.2rem; font-size:1.4rem;
    display:flex; align-items:center; justify-content:center; margin-right:10px;
}
.numHead .title{ font-size:2rem; font-weight:bold; background:transparent; color:#333; line-height:1; }

.txt_ali-c{ text-align: center; }
.txt_ali-l{ text-align: left; !important }
.txt_ali-r{ text-align: right; }

.mar_t_10{ margin-top:10px; }
.mar_t_20{ margin-top:20px; }
.mar_r_10{ margin-right:10px; }
.mar_b_10{ margin-bottom:10px; }
.mar_b_20{ margin-bottom:20px; }
.mar_b_30{ margin-bottom:30px; }
.mar_b_50{ margin-bottom:50px; }
.mar_l_10{ margin-left:10px; }

.marT10{ margin-top:10px; }
.marT20{ margin-top:20px; }
.marT30{ margin-top:30px; }
.marR10{ margin-right:10px; }
.marB10{ margin-bottom:10px; }
.marB20{ margin-bottom:20px; }
.marB30{ margin-bottom:30px; }
.marB50{ margin-bottom:50px; }
.marL10{ margin-left:10px; }

.padL-01{ padding-left:1rem; }

.width100{ width:100%; }

.noteBox{ border:1px solid #aaa; padding:1.5% 5%; margin:20px auto; width:90%; }

.pagetop{
    position:fixed; display:flex; content:'▲'; color:#fff; background-color:#462;
    justify-content:center; align-items:center; opacity:.85;
}
.pagetop::after{ content:'▲'; }

#titlePict{ margin-bottom:30px; }
.buyBtns{ width:100%; }
.buyBtns .kounyuBtn a{
    display:block; width:100%; margin:0 auto; border-color:#fff;
    position:relative; color:#fff;
}
.buyBtns .kounyuBtn a::after{ 
    content:''; position:absolute; right:14px; top:50%; display:block;
    width:6px; height:6px; border:1px solid transparent;
    border-top-color:#fff; border-right-color:#fff; 
    transform:rotate(45deg) translateY(-70%);
}
.extraCorner{ 
    border:3px solid #2d752c; border-radius:10px; background-color:#fefdec;
}
.extraCorner .extraCornerTitle{
    background-color:#2d752c !important; color:#fff !important; padding:3px 12px 6px;
    font-size:1.8rem; font-weight:bold;
}
.extraCorner .cont{ padding:10px 12px 12px; }

@media screen and (min-width:768px) {
    table.t_base th,
    table.t_base td{ padding:5px 20px; text-align:center;}
    hr.skelton{ margin:5px; opacity:0; }
    a:link{ text-decoration: none; }

    .flexList .anchorLink{ margin-right:10px; }
    .flexList .anchorLink a{
        display:block; width:100%; height:100%; padding:5px 10px;
        background-color:#fff9c6; border-radius:5px; border:1px solid #ec9; 
    }

    .header_g{
        position:relative; margin:0 0 15px; padding-left:28px; color:#3e7c39; font-size:26px; font-weight:bold;
    }
    .header_g:before{
        position:absolute; top:0; left:0; display:block; content:"";
        width:22px; height:22px; background-color:#3e7c39;
    }
    .kajogakiList .topic{ margin-bottom:8px; }
    .disc_head{  } 
    .disc_head .header{
        font-weight:bold; font-size:1.7rem;
        position: relative; margin-bottom:5px; padding-left:1.3em; color:#333;
    }
     .disc_head .header:before{
        position:absolute; top:4px;  left:0; content:''; display:block; width:.8em; height:.8em;
        background-color:#c5ba87; border-radius: 50%;
    }
    .disc_head .text{ padding-left:1.2em; }
    
    .last_link{ width:70%; margin:40px auto 0; }
    .last_link .LinkArrowStyle02 li{ width:100%; text-align:center;
    }
    .last_link .LinkArrowStyle02 li a{ width:100%; }
    
    cite{ display:block; text-align:right; }
    
    .width80Box{ width:80%; margin:0 auto; }
    .pagetop{
        width:50px; height:50px; font-size:1rem;
        bottom:30px; right:30px; 
    }
    .pagetop::after{ font-size:3rem; }
    .buyBtns .kounyuBtn a{ width:auto; margin:0 auto; }
    .kounyuBtn{ width:min(450px, 100%); }
}/*PC用*/



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

    #wrapper{ padding-top:0; }
    .flexBox{ flex-wrap:wrap; }
    .pageIndex{ width:100%; }
    .pageIndex .header{border-right:none; margin-bottom:3vw; }
    .pageIndex .linkList{ padding-left:0; width:100%; }
    .pageIndex .anchorLink{ width:100%; margin-bottom:8px; text-align:center; }
    .anchor{ position:absolute; top:-15vw; left:0;}
    
    .right{ text-align:left; }
    
    h3.cornerTitle{ color:#fff !important; }
    .cardBox{ justify-content:space-between; }
    /*
    .cardBox .card{ width:44vw; height:44vw; background-color:#eee; margin-bottom:8vw; }
    .cardBox .card a{ font-size:2.2rem; line-height:2.8rem; background-color:rgba(036,068,018,.45); }
    .cardBox .card a p{ color:#fff; font-weight:bold; }
    */
    p{ padding:0; }
    .disc_head{  } 
    .disc_head .header{
        font-weight:bold; font-size:1.5rem;
        position: relative; margin-bottom:3vw; padding-left:1.2em; color:#333;
    }
     .disc_head .header:before{
        position:absolute; top:6px;  left:0; content:''; display:block; width:.8em; height:.8em;
        background-color:#c5ba87; border-radius: 50%;
    }
    .disc_head .text{ padding-left:1.2em; }
    
    .numHead .num{ width:7.5vw; height:7.5vw; font-size:5.2vw; }

    .sickList td{ padding:15px; }
    .sickList th{
        font-size:1.8rem; vertical-align:middle; padding:10px 0; height:100%; 
        background-color:#dff2df; 
        text-align:center;
    }
    .pagetop{
        width:10vw; height:10vw; bottom:15px; right:15px; 
    }
    .pagetop::after{ font-size:5vw; }
    
    h2.sectionTitle{ font-size:7vw; line-height:1.4; border-bottom:1px solid #ccc; padding-bottom:2vw; }
    .sectionTitle .sub{ display:block; font-size:5vw; }
    .buyBtns .kounyuBtn{ width:80%; }
    
    .smallHeader{ padding:0; }
    .putitHeader{ font-feature-settings:'palt'; padding:0; margin-bottom:15px;}
    
    #goTop{ z-index:1; }
    #goTop a{
        display:flex; justify-content:center; align-items:center; 
        width:40px; height:40px; position:fixed; right:15px; bottom:15px;
        background-color:#fff; border:1px solid #6a6; 
    }
    #goTop a::after{
        content:''; display:block; width:30%; height:30%; transform:rotate(45deg) ;
        border:3px solid transparent; border-top-color:#6a6; border-left-color:#6a6; 
        margin-top:25%
    }
    footer{ position:relative; z-index:10000; background-color:#fff;}
    
    .spScroll-pict{ overflow-x:scroll; width:100%; }
    .spScroll-pict .pict{ width:150vw; }
    
}



/*-独自規格*/
:root{
    --shogoki:#8d249a;
    --nigoki:#e50000;
    --evaYellow:#e19500;
}


.evashovel_page_wrapper{
    #titlePict{  margin-bottom: 0;}

    .blockTitle{
        font-weight:700; font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; 
        color:#8d249a; font-feature-settings: 'palt'; letter-spacing: .1em;
        border-bottom:4px solid #a0dc00; padding-bottom:.3em; font-size:170%;

        &:nth-of-type(even){
            color:#e50000; border-bottom-color:#ffab00;
        }
    }

    .cornerTitle{
        width:100%; background:none; color:#177c1e; font-size:3.6rem; font-weight:bold; padding:0;
        border-bottom:2px solid #462; padding-bottom:.25em;

        .maker{ font-weight:normal; }
    }
    .mediaBox{
        iframe{ width:100%; height:100%; }
    }

    .point{ background:#effbf4; border-radius:15px; padding:25px; }
    .point .putitHeader{ color:#f60; }
    .point .yubi{ margin-right:4px; }

    .catchImage{
        text-align: center; margin:20px 0;

        img{
            width:min(520px, 100%);
        }
    }
    .text{
        line-height: 1.6;
    }

    #prologue{
        .intro{
            background:#000; color:#fff;
            .contBox{
                padding:1.1em 3em;
            }

            h2{
                font-size:250%; font-weight:800; 
                font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; 
                text-align: center; color:#f00; padding:.5em 0 .2em; border:none; margin-bottom: 0;
            }
        }
        .stripe{
            background-image: repeating-linear-gradient(308deg, #ff0000, #ff0000 10px, transparent 10px, transparent 20px);
            width:100%; height:1.2em;
        }
    }/*prologue*/
    
    .productBox{
        display:grid; width:100%; margin-bottom: min(70px, 14vw);
        grid-template-columns:1fr repeat(3, 175px);
        grid-template-rows: 1fr 175px;
        gap: 8px;

        .grid-1 {
            grid-row: span 2 / span 2;
        }
        .grid-2 {
            grid-column: span 3 / span 3;
        }
        .grid-3 {
            grid-column-start: 2;
            grid-row-start: 2;
        }
        .grid-4 {
            grid-column-start: 3;
            grid-row-start: 2;
        }
        .grid-5 {
            grid-column-start: 4;
            grid-row-start: 2;
        }

        .pictGrid{
            border:1px solid #999; width:100%; aspect-ratio: 1 / 1;
            border-radius:2px;

            &.mainPictGrid{
                aspect-ratio: initial; width:fit-content;
            }
        }
        .dataGrid{
            background:#eee; border-radius: 6px; padding:2em 1.5em 1.5em;
            display:flex; flex-direction: column; justify-content: space-between;

            .evaBorder{
                background-image: repeating-linear-gradient(308deg, var(--evaYellow), var(--evaYellow) 6px, transparent 6px, transparent 12px);
                width:100%; height:.5em;
            }
            .name{
                font-size:155%; font-weight:600; margin-bottom: .5em; margin-bottom: 1em;

                .main{
                    padding:.3em; line-height: 1.3;
                }
            }
            .specList{    
                .spec{
                    display:flex; align-items: center;
                    width:100%; margin-bottom: .6em; font-size:105%; 
                    &:last-of-type{
                        margin-bottom: 0;
                    }

                    .header{
                        width:5em; font-weight:bold; font-size:.75em; border-radius:3px;
                        margin-right:.5em;
                        display:flex; align-items: center; justify-content: center;
                        background:#fff;
                    }
                    .cont{
                        /* &::before{
                            content:'：';
                        } */
                    }
                }/*spec*/
            }

        }/*dataGrid*/
        
        &.shogoki{
            .name{
                .main{ color:var(--shogoki); }
            }
            .spec{
                .header{
                    border:1px solid var(--shogoki); color:var(--shogoki);
                }
            }
        }/*shogoki*/
        &.nigoki{
            .name{
                .main{ color:var(--nigoki); }
            }
            .spec{
                .header{
                    border:1px solid var(--nigoki); color:var(--nigoki);
                }
            }
        }/*nigoki*/
    }/*productBox*/

    #bland{
        .contBox{
            margin-bottom: min(70px, 8.5vw); padding-bottom:min(100px, 20vw);
            background-image:url(../images/bg-hex-line.png);
            background-position: bottom; background-repeat:no-repeat;

            &:last-of-type{
                margin-bottom: 0;
            }
        }
        .boxTitle{
            .compLogo{
                width:min(500px, 85%); margin:0 auto min(30px, 6vw);

                .copy{
                    display:block; text-align: right; 
                    margin-right:calc(100% - 500px);
                }
            }
        }
        .atfield{
            .compLogo{
                width:min(420px, 72%);
            }
        }
    }/*bland*/

    #extra{
        .data{
            width:min(410px, 100% );
            background:#eee; border-radius: 6px; padding:2em 1.5em 1.5em;
        }
        .evaBorder{
            background-image: repeating-linear-gradient(308deg, var(--evaYellow), var(--evaYellow) 6px, transparent 6px, transparent 12px);
            width:100%; height:.5em;
        }
        .name{
            font-size:155%; font-weight:600; margin-bottom: .5em; margin-bottom: 1em;

            .main{
                padding:.3em; line-height: 1.3;
            }
        }
        .specList{    
            .spec{
                display:flex;
                width:100%; margin-bottom: .6em; font-size:105%; 
                &:last-of-type{
                    margin-bottom: 0;
                }

                .header{
                    width:5em; font-weight:bold; font-size:.75em; border-radius:3px;
                    margin-right:.5em;
                    display:flex; align-items: center; justify-content: center;
                    background:#aaa; color:#fff;
                }
            }/*spec*/
        }

        .alone.pict{
            width:min(calc(100% - 410px), 80%); margin:0 auto;
        }
        .set.pict{
            width:100%; margin-top: 1.5em;
        }

        .buyBtns{
            margin-top: 50px;
        }
    }

    @media screen and (min-width:768px) {
        .contBlock{

            .cornerTitle{
                margin-bottom: 40px;

                .maker{ margin-left: 12px; font-size:60%; color:#666; }
            }
        }
        .mainBox{

            .left{
                width:40%; /*aspect-ratio:1 / 1;*/
                border-radius: 12px; overflow: hidden;

                .pict{
                    overflow: hidden; border-radius: 10px;
                }
            }
            .right{
                width:52%;

                .copy{
                    font-size:135%; font-weight:bold; line-height: 1.45; margin-bottom: 30px;
                }
            }
        }

        .mediaBox{
            margin-top: 30px; padding-top:30px; border-top:2px dashed #e9e7d3;

            &.youtubeBox{
                aspect-ratio: 560 / 315;
            }
            
            iframe{
                border-radius: 12px; overflow: hidden;
            }
        }

        .topic:nth-last-of-type(-n+2){ margin-bottom: 0; }
        .anchor{ position: absolute; top:-30px; }

        #pumpkids-sub{
            .pict{
                width:47%; overflow: hidden; border-radius: 6px;
                align-self: flex-start;
            }
        }/*pumpkids-sub*/
        #kling-sub{
            .pict{
                &:first-of-type{
                    width:58%; overflow: hidden; border-radius: 6px;
                }
                &:nth-of-type(2){
                    width:38%; overflow: hidden; border-radius: 6px;
                }
            }
        }/*kling-sub*/

        #tapesec{
            background:#ebf6f5; border:3px solid #2178e2; border-radius: 20px; overflow: hidden;

            .contBlock{
                border-radius: 0;  padding:40px; background:transparent; border:none;
                margin-bottom: 0;

                .left{
                    width:56%; 
                }
                .right{ width:40%; }
                .pict{
                    border-radius: 12px; overflow: hidden;
                }
            }
            .header{
                
                h2{
                    font-size:3.5rem; color:#fff; font-weight:bold; border:none; margin-bottom: 40px;
                    background:#2178e2; padding:20px 30px; text-align: center;
                }
                .cont{ padding:0 30px; }
                .copy{
                    font-size:140%; font-weight:bold; line-height: 1.45; margin-bottom: 5px; color:#114a8f;
                }
                .text{
                    color:#114a8f;
                }
            }
            .tokucho{
                background:#fff; border-radius:10px; padding:20px; margin:40px 0;

                .tokuchoList{
                    .topic{
                        margin-bottom: 15px; display:flex;

                        p{  
                            width:calc(100% - 1.2em);
                        }

                        &:last-of-type{ margin-bottom: 0; }

                        &::before{
                            content:''; display:inline-block; width:1em; height:1em;
                            background:#2178e2; border-radius: 50%; margin-top: 3px;
                            margin-right:.2em;
                        }
                    }
                }
            }
            .mediaBox{
                margin:0; border:none; padding:0;
            }
        }
    }
    
    @media screen and (max-width:767px) {
        .pict{
            margin:0;
        }
        
        #titlePict{ margin-bottom: 0; }
        .contBlock{
            padding:0; border-radius: 4vw; margin-bottom: 10vw;

            .cornerTitle{
                margin-bottom: initial; margin-bottom: 8vw; padding-bottom:2vw;
                color:#177c1e !important; 
                
                .main{ display:block; margin-bottom: 8px;}
                .maker{
                    font-size:50%; color:#666; display:block; line-height: 1em;
                }
            }
        }
        .blockTitle{
            margin-bottom: 6vw; line-height: 1.3;
        }
        

        /* .topic:nth-last-of-type(-n+2){ margin-bottom: 0; } */
        .anchor{ position: absolute; top:-30px; }

        #prologue{
            .intro{
                .text{
                    color:#fff;
                }
                h2{
                    padding-top:0;
                }
                .main{
                    color:#f00; line-height: 1.3; font-feature-settings: 'palt';
                }
            }
        }
        .productBox{
            padding:0;

            .dataGrid{
                .data{
                    .specList{
                        .spec{
                            align-items: initial;
                        }
                    }
                }
            }    
            
        }

        .productBox{
            grid-template-columns:46vw;
            grid-template-rows: 1fr repeat(3, 46vw);
            gap: 8px;

            .pictGrid{
                aspect-ratio: initial;

                .pict{
                    img{
                        width:97%;
                    }
                }
                &.mainPictGrid{
                    .pict{
                        img{
                            width:100%;
                        }
                    }
                }
            }
            .grid-1 {
                grid-column:initial;
                grid-row: span 3 / span 3;
                grid-column-start:1;
                grid-row-start:2;
            }
            .grid-2 {
                grid-row:initial;
                grid-row: 1;
                grid-column: initial;
                grid-column: span 2 / span 2;;
                grid-column-start: 1;
                grid-row-start:1;
            }
            .grid-3 {
                grid-column-start:2;
                grid-row-start: 2;
            }
            .grid-4 {
                grid-column-start: 2;
                grid-row-start: 3;
            }
            .grid-5 {
                grid-column-start: 2;
                grid-row-start: 4;
            }

            .buyBtns{
                margin-top: 6vw;
            }
            .kounyuBtn{
                width:100%;
            }
        }/*productBox*/

        #extra{
            .flexBox{
                display:block;

                .data{
                    margin-bottom: 4vw;
                }
                .pict{
                    width:80%; margin:0 auto 4vw;
                }
            }
        }/*extra*/
}/*sokusei_page_wrapper*/

/*-独自規格*/