@charset "utf-8";
/*========= ▼reset ===============*/
*:where(:not(iframe, canvas, img, svg, video, a):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
*{box-sizing: border-box;}
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
    color: #333;
}

@media screen and (min-width: 701px) {
    a[href^="tel:"] {
    pointer-events: none;
    }
    }

#HEADER .global{display: none;}
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0 !important;padding: 0;}
#FOOTER{margin-left: 0;}

/*========= ▼特選特集用 ===============*/
:root {
--fontColor:#000;
--primaryColor:#75C8AF;
--darkColor:#41908A;
--secondaryColor:#A46F08;
--bgColor:#fff;
--btnColor:rgba(55, 159, 151, 0.76);
--yellowColor:#FFF898;
--redColor:#DE0000;
--whiteColor:#fff;
--grayColor:#6C6C6C;
--shadowColor:rgba(0, 0, 0, 0.35);
--alphaColor:rgba(255, 255, 255, .4);
}
#win11 .font_small {font-size: 80%;}
#win11 .font_ss{font-size: 70%;}
#win11 .font_sss{font-size: 62%;}
#win11 .font_large {font-size: 130%;}
#win11 .font_ll{font-size: 155%;}
#win11 .line_center {text-align: center;}
#win11 .line_right{text-align: right;}
#win11 .line_left{text-align: left;}
#win11 .font_bold{font-weight: bold;}
#win11 .font_red {color: var(--redColor);}
#win11 img {width: auto;max-width: 100%;vertical-align: bottom;}

#win11 #lp-content{overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-style: normal;line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: normal !important;line-height: 1.8;color: var(--fontColor);max-width: 1920px;margin: auto;background: var(--bgColor);}

#win11 #lp-content h2 {font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-style: normal; line-break: strict;word-break: break-word;letter-spacing:inherit;}

/*========= ▲特選特集用 ===============*/
/*========= LoadingのためのCSS ===============*/
#win11 .loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: var(--primaryColor);
    z-index: 999;
}
#win11 .loader,
#win11 .loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
#win11 .loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*========= ▲LoadingのためのCSS ===============*/
#win11 section{padding: 6% 0;}
#win11 .secInner{max-width: 1290px;width: 88%;position: relative;margin: 0 auto;}
#win11 .index_secInner{max-width: 1546px;width: 94%;position: relative;margin: 0 auto;}

#win11 #sec01{padding: 0;}
#win11 .leadTxt{font-size: clamp(15px, 1.15vw, 18px);text-align: center;line-height: 2;}
#win11 .leadTitle{
    display: inline-block;
    color: var(--darkColor);
    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--yellowColor);
    line-height: 1.5;
}
#win11 .h2Area:not(.nonbg){padding: 1.2em 0;border-image: linear-gradient(#fff,#fff) fill 0//0 100vw 0 100vw;text-align: center;}
#win11 .h2Area h2{font-size: clamp(20px, 2.65vw, 42px);font-weight: bold;display: flex;align-items: center;justify-content: center;line-height: 1.2;color: var(--primaryColor);font-weight: 500;}
#win11 .h2Area h2::before{content: "";flex: 1;height: 1px;margin-right: 15px;background: var(--primaryColor);}
#win11 .h2Area h2::after{content: "";flex: 1;height: 1px;margin-left: 15px;background: var(--primaryColor);}

#win11 .centerWrap{
    position: relative;
    text-align: center;
    margin: 3rem auto;
}
#win11 h3{
    font-size: clamp(19px, 1.6vw, 26px); 
}
#win11 h4{
    font-size: clamp(13px, 1vw, 16px);
    margin-top: 1rem;
}
#win11 .flexUl2 {
    display: flex;
    justify-content: space-around;
}
#win11 .flexUl2 li{
    flex-basis: 48%;
}
#win11 .flexUl2 li.blurBox{
    backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
    padding: 1.7rem 2rem;
    background: var(--alphaColor);
}
#win11 .proSum figure {
    width: 45%;
}
#win11 .point {
    position: relative;
    margin: 1.5rem 1rem;
}
#win11 .point li {
    line-height: 1.3;
    padding: 0.5rem 0 0.5rem 1.2rem;
    font-size: clamp(15px, 1.15vw, 18px); 
}
#win11 .point li::before{
    font-family: "Font Awesome 5 Free";
    content: "\f0a4";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--secondaryColor);
}
#win11 .proName {
    font-size: clamp(16px, 1.25vw, 20px);
    border-bottom: 5px solid var(--yellowColor);
    margin-bottom: 1rem;
}
#win11 .proComment{
    font-size: clamp(12px, 0.98vw, 15px);
    line-height: 1.6５;
    margin-bottom: 2rem;
}
#win11 .priceArea{
    text-align: right;
}
#win11 .price {
    font-size: clamp(19px, 1.6vw, 26px);
    font-weight: 500;
    color: var(--redColor);
}
#win11 .nonTax{
    color: var(--grayColor);
     font-size: clamp(12px, 0.95vw, 15px);
}
#win11 .btnBox{
    margin-top: 2rem;
}
#win11 .btn{
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background: var(--primaryColor);
    padding: 1rem;
    text-align: center;
    transition: ease .2s;
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 500;
    border-radius: 5px;
    box-shadow: 0 6px 6px var(--shadowColor);
    max-width: 370px;
    margin-left: auto;
}
#win11 .btn span {
    position: relative;
    z-index: 3;
    color: var(--whiteColor);
}
#win11 .fa-angles-right{
    color: var(--yellowColor);
    margin-left: 5px;
}
#win11 .bgcentery::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--darkColor);
    width: 100%;
    height: 100%;
    transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1)0s;
    transform: scale(1, 0);
    trasnform-origin:center;
}
#win11 .btnArea{
    margin: 5rem auto 0;text-align: center;
}
#win11 .btnArea a {
    display: inline-block;
    color: var(--whiteColor);
    border: 1px solid var(--whiteColor);
    background: var(--btnColor);
    font-size: clamp(18px, 1.4vw, 22px); 
    font-weight: bold;
    padding: 1em 4em 1em 3em;
    border-radius: 5px;
    transition: all .5s;
    position: relative;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 3px 5px var(--shadowColor);
}
#win11 .modalInner_box h6{
    font-family:  "Noto Sans JP", sans-serif;
    font-size: clamp(19px, 1.75vw, 28px);
    color: var(--primaryColor);
    font-weight: 600;
}


#win11 #sec04 {background-image: url("feature_Win11_2025/bg-osusume.jpg?$staticlink$");background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}
#win11 .flexArea {margin-top: 4em;}
#win11 .flexUl{display: flex;flex-wrap: wrap;gap:30px;}
#win11 .flexUl > li {flex-basis: calc((100% - 90px)/4);position: relative;background: var(--whiteColor);padding: 1.5em;border-radius: 18px;box-shadow: 3px 6px 10px var(--shadowColor);margin-bottom: 3%;}
#win11 .elBtn {font-size: clamp(15px, 1.15vw, 18px); display: block;color: var(--fontColor);border: 2px solid var(--primaryColor);padding: 0.7em;background: var(--whiteColor);border-radius: 50vh;text-align: center;font-weight: bold;position: relative;transition: all .5s;}
#win11 .elBtn::before {font-family: "Font Awesome 5 Free";content: "\f061";font-weight: 900;position: absolute;top: 50%;right: 7%;transform: translateY(-50%);transition: all .3s}
#win11 .pro-title {font-size: clamp(14px, 1.1vw, 17px);}
#win11 .pro-price {font-size: clamp(15px, 1.15vw, 18px);font-weight: bold;color: var(--redColor);}
#win11 .imgBtn {position: relative;transition: all .3s;}
#win11 .imgBtn span {display: block;padding: 5px;overflow: hidden;}
#win11 .imgBtn::before, .imgBtn::after {content: "";position: absolute;width: 0;height: 2px;background: var(--primaryColor);transition: all .2s linear;}
#win11 .imgBtn span::before,.imgBtn span::after{content: "";position: absolute;width: 2px;height: 0;background: var(--primaryColor);transition: all .2s linear;}
#win11 .price-box{margin-bottom: 5px;}

#win11 .meritArea{margin: 5% auto 0;}
#win11 .whiteBox{background-color: var(--whiteColor);box-shadow: 3px 6px 10px var(--shadowColor);border-radius: 30px;overflow: hidden;}
#win11 .boxMerit{background-color: rgba(255, 255, 255, 0.4);background-image: url("feature_Win11_2025/merit.jpg?$staticlink$");background-size: cover;background-repeat: no-repeat;background-position: right bottom;margin-bottom: 5%;}
#win11 .merit_txtArea{padding: 2em 2em 3em;width: 50%;margin-right: auto;}
#win11 #lp-content h5 {color: var(--secondaryColor);font-weight: 500;font-size: clamp(16px, 1.5vw, 24px);text-align: center;margin-bottom: 1em;}
#win11 .meritArea dl {text-shadow: -1px -1px 2px var(--whiteColor), -1px 0 2px var(--whiteColor), -1px 1px 2px var(--whiteColor), 0 -1px 2px var(--whiteColor), 0 1px 2px var(--whiteColor), 1px -1px 2px var(--whiteColor), 1px 0 2px var(--whiteColor), 1px 1px 2px var(--whiteColor);}
#win11 .meritArea dt {position: relative;font-size: clamp(15px, 1.15vw, 18px);color: var(--darkColor);font-weight: 500;margin-top: 1.5em;}
#win11 .meritArea dt::before{font-family: "Font Awesome 5 Free";content: '\f0a4';font-weight: 900;color: var(--secondaryColor);margin-right: 5px;}
#win11 .meritArea dd {font-size: clamp(13px, 1vw, 16px);padding-left: 1em;line-height: 1.6;}
#win11 .boxDemerit{background-color: rgba(255, 255, 255, 0.4);background-image: url("feature_Win11_2025/demerit.jpg?$staticlink$");background-size: cover;background-repeat: no-repeat;background-position: left bottom;}
#win11 .demerit_txtArea{padding: 2em 2em 3em;width: 50%;margin-left: auto;}
#win11 .comicomiBox{container-type: inline-size;position: relative;width: 55%;text-align: left;margin-bottom: 5%;}
#win11 .comicomiSum{font-size: clamp(15px, 1.15vw, 18px);}
#win11 .comiContentBox{position: relative;text-align: center;margin-top: 2%;}
#win11 .comiContentTitle{font-size: clamp(16px, 1.4vw, 22px);font-weight: 600;border: 2px solid #707070;background: #fff;text-align: center;border-radius: 10px;display: inline-block;padding: 0.2em 1em;position: relative;top: 1.1em;}
#win11 .comiContent{font-size: clamp(17px, 1.25vw, 20px);border: 1px solid #707070;background: var(--whiteColor);border-radius: 10px;padding: 3em 1.5em 1.5em;text-align: left;}
#win11 .illustArea{background: url("feature_Win11_2025/comicomi-img.png?$staticlink$") no-repeat 96% 1%;background-size: 37%;}
#win11 .ul-flow {display: flex;list-style: none;justify-content: center;margin: 2.5em 0;padding: 0;align-items: center;}
#win11 .ul-flow li:nth-of-type(1), #win11 .ul-flow li:nth-child(3), #win11 .ul-flow li:nth-child(5), #win11 .ul-flow li:nth-child(7) {background-color: #1d1d1f;color: #efff2d;font-size: clamp(18px, 1.5vw, 24px); ;padding: 0.5em 0.5em 0.3em; text-align: center;line-height: 1.7;flex-basis: 22%;}
#win11 .ul-flow li:nth-child(2), #win11 .ul-flow li:nth-child(4), #win11 .ul-flow li:nth-child(6) {font-size: 30px;flex-basis: 4%;}
#win11 .flowS{display: block;border-top: 1px solid #fff;font-size: 70%;color: #FFF;}
#win11 .flowNotice{font-size: clamp(14px, 1.1vw, 17px);background: #fff;border: 1px solid #c90000;display: inline-block;padding: 0.5em 1.5em;line-height: 2;margin-bottom: 3%;}
#win11 .modalCon h6 {font-size: clamp(20px, 1.9vw, 30px);color: var(--primaryColor);font-weight: 600;}
#win11 .accbox {margin: 2em 0;padding: 0; }
/*ラベル*/
#win11 .accbox label {display: block; margin: 1.5px 0; padding : 0.5em;color: #000;font-weight: bold;background: #fff;cursor :pointer; transition: all 0.5s;font-size: clamp(18px, 1.5vw, 24px); background:  var(--primaryColor);text-align: center;color: var(--whiteColor);}
/*アイコンを表示*/
#win11 .accbox label:after { content: '\f107'; font-family: 'Font Awesome 5 Free'; padding-left: 1em;font-size: clamp(18px, 1.5vw, 24px);}
/*ラベルホバー時*/
#win11 .accbox label:hover { background :var(--secondaryColor);}
/*チェックは隠す*/
#win11 .accbox input { display: none; }
/*中身を非表示にしておく*/
#win11 .accbox .accshow {height: 0; padding: 0;overflow: hidden;opacity: 0;transition: 0.8s; padding: 1em;}
/*クリックで中身表示*/
#win11 .cssacc:checked + label + .accshow {height: auto;background: #fff;opacity: 1;border: 1px solid var(--primaryColor);margin-top: -2px; }
#win11 .accbox .accshow p {margin: 15px 10px;font-size: clamp(13px, 1vw, 16px); line-height: 1.7;text-align: left;}
/*アイコンを入れ替える*/
#win11 .cssacc:checked + label:after { content: '\f106'; }    
#win11 .komikomi-sum {margin: 4em;position: relative;border: 1px solid #303032; padding: 0.8em 1em 2em;border-radius: 10px;text-align: center;}
#win11 .div-flex {display: flex;justify-content: space-around;text-align: left;font-size: clamp(13px, 1vw, 16px); }
#win11 .div-flex > div {flex-basis: 46%;}
#win11 h5.acTitle {font-size: clamp(18px, 1.4vw, 22px);; color: #000; background: #fff;display: inline-block;position: relative;margin: 0;top: -1.3em;}
#win11 .acoTitle{font-size: clamp(15px, 1.15vw, 18px);margin-bottom: 1em;font-weight: 600;}
#win11 .modalUl{display: flex;flex-wrap: wrap;gap:30px;justify-content: center;}
#win11 .modalUl > li {flex-basis: calc((100% - 90px)/4);position: relative;background: var(--fontColor);border-radius: 30px;box-shadow: 3px 6px 10px var(--shadowColor);margin-bottom: 3%;overflow: hidden;}
#win11 .win11_modalLink{display: block;}
#win11 .win11_modalLink img {width: 100%;display: block;opacity: .5;transition: all .5s;}
#win11 .abIcon{position: absolute;font-size: 50px;color: var(--whiteColor);bottom: 1.5%;right: 3%;}
#win11 .abBox{position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items: center;justify-content: center;padding: 1em;}
#win11 .flexBox {color: var(--whiteColor);text-align: center;}
#win11 .flexBox_title {font-size: clamp(18px, 1.65vw, 25px);font-weight: bold;line-height: 1.5;margin-bottom: 1em;}
#win11 .flexBox_semititle{font-size: clamp(13px, 1vw, 16px);font-weight: bold;}

#win11 .modalCon{padding: 5em 5em 3em;position: relative;max-width: 1290px;text-align: center;}
#win11 #cboxLoadedContent{border-radius: 40px;}
#win11 #cboxLoadedContent::-webkit-scrollbar {display: block;background: transparent;width: 7px;height: 10px;border-radius: 7px;padding: 8;position: absolute;top: 5%;right: 5%;}
#win11 #cboxLoadedContent::-webkit-scrollbar-thumb {background: #aaa;border-radius: 5px;}
#win11 #cboxLoadedContent::-webkit-scrollbar-thumb:hover {background: #777;}
#win11 .modarInner_title{font-size: clamp(20px, 2vw, 32px);font-weight: bold;}
#win11 .modalInner_box{margin: 4em auto;}
#win11 .modarInner_sum{font-size: clamp(15px, 1.15vw, 18px);margin-bottom: 3em;text-align: left;}
#win11 .closeBtn {position: absolute;top: -0.5%;right: 1.5%;font-size: 56px;transition: all .3s;z-index: 999;}

#win11 #sec06 {background-image: url("feature_Win11_2025/bg02.jpg?$staticlink$");background-color: rgba(0,0,0,0.5);background-blend-mode:darken;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}
#win11 .secLead{margin: 4em auto;}
#win11 .secLead p {font-size: clamp(15px, 1.15vw, 18px);font-weight: 500;color: var(--whiteColor);text-align: center;}

#win11 #sec07 {background-image: url("feature_Win11_2025/bg03.jpg?$staticlink$");background-color: rgba(0,0,0,0.5);background-blend-mode:darken;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}
#win11 .h2Area h4 {font-size: clamp(18px, 1.5vw, 24px);font-weight: bold;line-height: 1;}

#win11 #sec08 {background-image: url("feature_Win11_2025/bg04.jpg?$staticlink$");background-color: rgba(0,0,0,0.5);background-blend-mode:darken;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}

#win11 #sec09 {background-image: url("feature_Win11_2025/bg05.jpg?$staticlink$");background-color: rgba(0,0,0,0.5);background-blend-mode:darken;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}

#win11 .flexUl9{display: flex;flex-wrap: wrap;gap:30px;justify-content: center;}
#win11 .flexUl9 > li {flex-basis: 40%;position: relative;background: var(--fontColor);border-radius: 30px;overflow: hidden;box-shadow: 3px 6px 10px var(--shadowColor);}
#win11 .flexUl9 li a img {opacity: .5;transition: all .5s;}
#win11 .flexUl9 li a .otherTitle {position: absolute;top: 50%;left: 50%;width: 100%;padding: 1em;font-size: clamp(18px, 1.5vw, 24px);font-weight: bold;color: var(--whiteColor);transform: translate(-50%, -50%);text-align: center;}
#win11 #link01, #win11 #link02, #win11 #link03, #win11 #link04, #win11 #link05{padding-top: 100px;margin-top: -100px;}
#win11 .includeSCT .item{height: 100%;}
#win11 ul.action {display: none;}
#win11 .modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 40px 20px;
  transition: all 1s ease-in-out;
  z-index: 9;
}


/* モーダル内側の指定 */
#win11 .modal-box{
    background: #fff;
    margin: 7vh auto 0;
    text-align: center;
    padding: 5em 5em 3em;
    width: 90%;
    max-width: 1290px;
    border-radius: 40px;
    position: fixed;
    overflow-y: auto;
    max-height: 75vh;
    animation: show 0.6s linear 0s;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
  
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
#win11 .modal-box::-webkit-scrollbar {display: block;background: transparent;width: 7px;height: 10px;border-radius: 7px;padding: 8;position: absolute;top: 5%;right: 5%;}
#win11 .modal-box::-webkit-scrollbar-thumb {background: #aaa;border-radius: 5px;}
#win11 .modal-box::-webkit-scrollbar-thumb:hover {background: #777;}
#win11 .modalOpen img {width: 100%;opacity: .5;transition: all .5s;}
    #win11 #sec04 #RECO-SPLIDE{margin-top: 4em;}
    #win11 .splide__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
#win11 #sec04 .splide__list {justify-content: center;}

    #win11 .splide__list .splide__slide {
        flex-basis: 25%;
        margin: 0;
    }

    #win11 ul.details {
        display: flex;
        justify-content: flex-end;
        margin: 1em 0;
    }
#win11 .includeSCT .item:hover{
transform:translateY(-10px);
}
#win11 .pad-cam {display: none!important;}
#win11 .pad-sp {display: none!important;}
#win11 .sp-cam {display: none !important;}
#win11 #sec02{
    padding: 3% 0;
}
#win11 #sec05,
#win11 #sec10{
    padding-top: 0;
}
    
@media (any-hover: hover) {
/*:hover はここに書く*/
  #win11 .in01:hover{margin-top: 9px;border-bottom: 3px solid var(--primaryColor);}
    #win11 .bgcentery:hover::before {
        transform: scale(1, 1);
    }
    #win11 .btnArea a:hover {
        background: var(--darkColor);
        transform: translateY(-5px);
        box-shadow: 0 6px 10px var(--shadowColor);
    }
  #win11 .elBtn:hover{background: var(--primaryColor);color: var(--whiteColor);}
  #win11 .elBtn:hover::before{right: 4%;color: var(--whiteColor);}
  #win11 .imgBtn:hover::before, .imgBtn:hover::after{width: 100%;}
  #win11 .imgBtn:hover span::before, .imgBtn:hover span::after{height: 100%;}
  #win11 .bordercircle1::before{right: 0;top: 0;transition-delay: 0.2s;}
  #win11 .bordercircle1::after{left: 0;bottom: 0;transition-delay: 0.2s;}
  #win11 .bordercircle1 span::before{left: 0;top: 0;}
  #win11 .bordercircle1 span::after{right: 0;bottom: 0;}
  #win11 .modalUl > li:hover .modalOpen img {opacity: .85;}
  #win11 .flexUl9 li:hover a img {opacity: .85;}
}

/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block;}
}


/************************************************************/@media screen and (max-width: 820px) {    
    
#win11 .gridWapper{grid-template-columns: repeat( auto-fill, minmax(200px,1fr));grid-template-rows: repeat( auto-fill, minmax(230px, 230px));}
#win11 .flexUl > li, #win11 .modalUl > li{flex-basis: calc((100% - 60px)/3);}
#win11 #link01, #win11 #link02, #win11 #link03, #win11 #link04, #win11 #link05{padding-top: 45px;margin-top: -45px;}
#win11 .ul-flow li:nth-of-type(1), #win11 .ul-flow li:nth-child(3), #win11 .ul-flow li:nth-child(5), #win11 .ul-flow li:nth-child(7) {flex-basis: 85%;}
#win11 .ul-flow{flex-wrap: wrap;margin: 2em 0;justify-content: center;}
#win11 .ul-flow li:nth-child(2), #win11 .ul-flow li:nth-child(4), #win11 .ul-flow li:nth-child(6) {transform: rotate(90deg);flex-basis: 85%;}
#win11 .merit_txtArea, .demerit_txtArea{width: 60%;}
#win11 .splide__list .splide__slide {flex-basis: 33.333%;}
#win11 .pad-cam {display: block !important;}
#win11 .pad-sp {display: block !important;}
#win11 .pc-cam {display: none !important;}
#win11 .sp-cam {display: none !important;}
    #win11 .flexUl2{
        flex-direction: column;
    }
    #win11 .flexUl2 li{
        flex-basis: 80%;
        margin: auto;
    }
    #win11 .flexUl2 > li:last-child{
        margin-top: 2rem;
    }
    #win11 .btnArea{
        margin-top: 2rem;
    }
    #win11 .centerWrap{
        margin: 2rem auto 0;
    }

}
/************************************************************/@media screen and (max-width: 768px) {
  #win11 .illustArea{background-position: 69% 0;background-size: 90%;padding-top: 85%;}
  #win11 .comicomiBox{width: 100%;}
#win11 .sp-cam {display: none !important;}
}

/************************************************************/@media screen and (max-width: 700px) {
  #win11 section{padding: 12% 0;}
  #win11 section.merit{padding-bottom: 0;}
  #win11 .h2Area{padding: 1em 0;}
  #win11 .leadTxt{text-align: left;}
  #win11 .gridWapper {gap:15px;grid-template-columns: repeat( auto-fill, minmax(152px,1fr));grid-template-rows: repeat( auto-fill, minmax(160px, 160px));}
  #win11 .inNo{font-size: 50px;top: -8%;}
  #win11 .inIcon{transform: translateX(9%);}
  #win11 .inTitle{line-height: 1.2;margin-bottom: 0.1em;}
  #win11 .inDown{font-size: 60px;bottom: -9%;}
  #win11 .flexUl{gap: 10px;}
  #win11 .flexUl > li{flex-basis: 48%;margin: auto;padding: 12px;}
  #win11 .imgBtn span{border: 1px solid var(--primaryColor);}
  #win11 .secLead{margin: 3em auto;}
  #win11 .flexArea{margin-top: 1rem;}
  #win11 .flexUl9 > li{flex-basis: 80%;}
  #win11 .modalCon{padding: 3em 1.5em;}
  #win11 .closeBtn{top: -1.5%;font-size: 43px;}
  #win11 #cboxLoadedContent{border-radius: 30px;}
  #win11 .modalInner_box{margin: 2em auto;}
  #win11 .modarInner_sum{margin-bottom: 1em;}
  #win11 .comicomiBox{width: 100%;}
  #win11 .merit_txtArea, #win11 .demerit_txtArea{width: 100%;}
  #win11 .boxMerit, #win11 .boxDemerit {background-blend-mode: lighten;}
  #win11 .comiContent{padding-top: 1.5em;}
  #win11 .illustArea{background-position: 70% 0;background-size: 92%;}
  #win11 .modalUl{gap:10px;}
  #win11 .modalUl > li {flex-basis: calc((100% - 20px) / 2);}
  #win11 .abIcon{font-size: 36px;}
  #win11 .flexBox_semititle{font-weight: 500;line-height: 1.4;padding-bottom: 2em;}
  #win11 .elBtn{background: var(--primaryColor);color: var(--whiteColor);padding: 0.6em;}
  #win11 .komikomi-sum{margin: 0.5em;}
  #win11 .div-flex{flex-direction: column;}
  #win11 .btnArea{margin: 3em auto 0;}
  #win11 .modal-box{padding: 3.5em 1.5em 3em;}  
#win11 .splide__list .splide__slide {flex-basis: 50%;}
    #win11 .modalUl > li{
        border-radius: 20px;
    }
    #win11 .modal-box{
        border-radius: 26px;
    }

#win11 .sp-cam {display: block !important;}
#win11 .pad-sp {display: block !important;}
#win11 .pc-cam {display: none !important;}
#win11 .pad-cam {display: none !important;}
#win11 .pc-pad {display: none !important;}
    #win11 .h2Area:not(.nonbg){
        padding-top: 3rem;
    }
    #win11 #sec10 .h2Area{
        padding-top: 0.5rem;
    }
  
}