@charset "utf-8";
* {
    font-family: "Hiragino Sans", hiragino-kaku-gothic-pron, sans-serif,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"游ゴシック体","YuGothic","游ゴシック","Yu Gothic",'Meiryo','メイリオ', sans-serif;
    scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
}
.abs {
    position: absolute;
}
.rel {
    position: relative;
}
.mt10 {
    margin-top: 10px !important;
}
.fcr {
    color: #d81717;
}
.fcp {
    color: #FA57CC;
}
.fco {
    color: #ff6c00;
}
.fcy {
    color: #fefaca;
}
.fcb {
    color: #0047b2;
}
.fcg {
    color: #08353e;
}
.fcpg {
    color: #3a818e;
}
.fcsb {
    color: #0497FF;
}
.fsm {
    font-size: 19px;
}
.fsl {
    font-size: 21px;
}
.fsll {
    font-size: 23px;
}
.tal {
    text-align: left;
}
.tar {
    text-align: right;
}
.tac {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.mark {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%,#ffff00 0%) repeat scroll 0 0;
}
#wrapper{
    margin: auto;
}
img,video {
    width: 100%;
    vertical-align: middle;
}
.anno {
    font-size: 10px;
    color: gray;
    text-align: right;
    margin-top: 0px;
}
.tablet {
    display: none;
}

@media only screen and (min-width: 767px){
    #wrapper{
        margin: auto;
    }
    .sp {
        display: none!important;
    }
    .pc {
        display: block;
    }
}
@media only screen and (min-width: 767px) and (max-width: 800px) {
    .tablet {
        display: block;
    }
}
@media only screen and (max-width: 766px){
    .sp {
        display: block;
    }
    .pc {
        display: none!important;
    }
}

header {
    background-color: #39818d;
    padding: 10px 0;
}
.head_content {
    display: flex;
    align-items: center;
    width: 98%;
    margin: auto;
    color: #fff;
}
.head_content img {
    max-width: 60px;
    margin: 0 10px;
}
.head_content p {
    margin: 0;
    line-height: 1.4;
}
.head_content p b {
    font-size: larger;
}

@media only screen and (max-width: 766px){
    .head_content img {
        max-width: 40px;
        margin: 0 6px;
    }
    .head_content p {
        font-size: clamp(13px, 1.2vw, 22px);
    }
    .fv video {
        min-height: 300px;
        height: 40vh;
        object-fit: cover;
    }
    .fv .abs {
        width: 96%;
        right: 0;
        top: 3vh;
    }
}

@media only screen and (min-width: 767px){
    .fv img {
        width: 90%;
        max-width: 1100px;
        margin: auto;
        padding: 2% 0;
        left: 0;
        right: 0;
        top: 2vh;
    }
    .fv video {
        max-height: 540px;
        object-fit: cover;
    }
}

.band {
    background-image: linear-gradient( 30deg, rgb(59,130,143) 0%, rgb(111,196,148) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
}
.band_l {
    display: flex;
    margin-right: 10px;
}
.band_l div {
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 6px;
    margin: auto 3px;
    background-color: #ffffff1f;
    font-weight: 600;
    font-size: larger;
}

@media only screen and (max-width: 766px){
    .band {
        flex-direction: column;
        text-align: center;
    }
    .band_l {
        margin: 14px auto -10px auto;
    }
    .band_r {
        font-size: clamp(14px, 1.8vw, 22px);
    }
    .band_l div {
        padding: 2px 6px;
    }
}

h1 {
    margin: auto auto 2%;
    text-align: center;
    font-size: clamp(20px, 3.2vw, 60px);
    color: #39818d;
    line-height: 1.4;
    font-weight: 800;
}
h1::after {
    content: "";
    width: 60px;
    height: 4px;
    background-color: #39818d;
    display: block;
    margin: auto;
    margin-top: 0.5%;
    border-radius: 999px;
}
h1 span {
    color: #08353e;
    font-size: clamp(16px, 1.6vw, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
}
h1 span::before {
    content: "";
    width: 26px;
    height: 2px;
    transform: rotate(60deg);
    box-sizing: border-box;
    background-color: #333333;
  }
h1 span::after {
    content: "";
    width: 26px;
    height: 2px;
    transform: rotate(-60deg);
    box-sizing: border-box;
    background-color: #333333;
}
section {
    padding: 4% 0;
}
.bg_green {
    background-image: linear-gradient( 30deg, rgb(217,240,243) 0%, rgb(219,244,240) 100%);
}
.bg_gray {
    background-color: #f3f3f3;
}
.decoration {
    background-image:
        url(../img/decoration.png),
        url(../img/decoration_under.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top left,bottom right;
    background-size: 16vw;
}
@media only screen and (max-width: 766px){
    section {
        padding: 8% 0;
    }
    h1 {
        font-size: clamp(36px, 3.2vw, 60px);
    }
    h1 span::before , h1 span::after {
        content: "";
        width: 24px;
    }
    .decoration {
        background-position: top left, bottom right;
        background-size: 22vw;
        padding: 6% 0;
    }
}

/* 目次 */
section.outline {
    padding: 3% 0;
}
.outline .box {
    width: 90%;
    max-width: 600px;
    margin: auto;
    background-color: #fff;
    border-radius: 10px;
}
.outline .box .ttl {
    text-align: center;
    background-color: #3b828f;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 5px;
    margin: 0;
}
.outline .box ul {
    margin: 0;
    list-style-type: disc;
    color: #39818d;
    padding: 20px 20px 20px 50px;
}
.outline .box ul a {
    text-decoration: none;
    color: #363636;
}
@media only screen and (max-width: 766px){
    section.outline {
        padding: 8% 0;
    }
    .outline .box ul {
        padding: 10px 10px 10px 40px;
    }
}

/* 省エネ法の沿革 */
.history img.hist {
    width: 90%;
    max-width: 800px;
    margin: auto;
}
.history .worry {
    width: 90%;
    max-width: 800px;
    margin: 5% auto 4%;
}
.history .tips_ttl {
    margin-bottom: 0;
    width: 88%;
    max-width: 780px;
    margin: 6vh auto -4px;
}
.history .tips {
    width: 90%;
    max-width: 800px;
    margin: 0 auto 2vh;
    text-align: center;
    background-image: linear-gradient(30deg, rgb(59, 130, 143) 0%, rgb(111, 196, 148) 100%);
    color: #fff;
    padding: 2% 0;
    border-radius: 10px;
}
.history .tips::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #4f9c91;
  }
.history .worry>div:nth-of-type(1) {
    display: flex;
    background-color: #f3f3f3;
    justify-content: center;
    padding: 5% 0 3%;
    align-items: flex-end;
}
.history .worry div:nth-of-type(1) img {
    width: 86%;
    object-fit: contain;
}
.history .worry div:nth-of-type(2) p {
    margin: 0;
    line-height: 1.8;
}
.history .worry>div:nth-of-type(1) .abs {
    left: 0;
    right: 0;
    top: -6%;
    margin: auto;
    color: #fff;
    background: #757575;
    border-radius: 999px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}
.history .worry>div:nth-of-type(2) {
    background-image: linear-gradient(30deg, rgb(217, 240, 243) 0%, rgb(219, 244, 240) 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 70%, 50% 100%, 0 70%);
    padding: 1% 0 2%;
    color: #08353e;
}
.history .worry .line {
    height: 40px;
    width: 0px;
    border: 2px dotted #3a818e;
    bottom: -30px;
    left: 0;
    right: 0;
    margin: auto;
}
.history .cta {
    text-align: center;
    margin: 4vh auto 0;
    width: 90%;
    max-width: 600px;
    border: 2px solid #39818d;
    padding: 10px 20px 20px;
    background: #ffffffb3;
}
.history .cta .abs {
    margin: auto;
    left: 0;
    right: 0;
    top: -16px;
    font-weight: bold;
    background-color: #fff;
    display: inline-table;
    display: flex;
    padding: 0 30px;
    align-items: center;
    justify-content: center;
    width: 70%;
}
.history .cta .abs::after {
    content: "";
    width: 26px;
    height: 2px;
    transform: rotate(-60deg);
    box-sizing: border-box;
    background-color: #3a818e;
}
.history .cta .abs::before {
    content: "";
    width: 26px;
    height: 2px;
    transform: rotate(60deg);
    box-sizing: border-box;
    background-color: #3a818e;
}

.history .cta .btn {
    /* display: flex; */
    display: block;
    background-image: linear-gradient(30deg, rgb(59, 130, 143) 0%, rgb(111, 196, 148) 100%);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 6px 20px;
    box-shadow: 0 7px #17625e;
}
.history .cta .btn:hover {
    top: 7px;
    box-shadow: 0 0 #17625e; /* 影を0pxにする */
}

.history .cta .btn img.abs {
    width: 40%;
    background-color: unset;
    left: 0;
    margin: 0;
    bottom: 0;
    top: unset;
}
.history .cta .btn p {
    padding-left: 13vw;
}
.history .cta .btn p:nth-of-type(1) {
    background: #fff;
    border-radius: 999px;
    padding: 6px 0 6px 10vw;
    line-height: 1.4;
    color: black;
}
.history .cta .btn p:nth-of-type(1)::after {
    content: "";
    position: absolute;
    top: 99%;
    left: 30%;
    border: 10px solid transparent;
    border-top: 15px solid #ffffff;
    clip-path: polygon(0 0, 20% 50%, 100% 0);
}
.history .cta .btn p:nth-of-type(2) {
    color: #fff;
    margin: 10px auto 16px;
}
.history .cta .btn p:nth-of-type(2)::after {
    position: absolute;
    content: "";
    background-image: url(../img/cursor.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 6px;
}
.medal {
    padding-left: 13vw;
    width: 50%;
}
@media only screen and (max-width: 766px){
    .history img.hist {
        margin: 8% auto 5%;
    }
    .history .tips {
        width: 84%;
        padding: 5% 3%;
        margin-bottom: 15%;
    }
    .history .tips::before {
        border-top: 15px solid #489290;
    }
    .history .worry>div:nth-of-type(1) {
        padding: 12% 0 6%;
    }
    .history .worry>div:nth-of-type(1) .abs {
        top: -5%;
    }
    .history .worry>div:nth-of-type(2) {
        padding: 2% 0 5%;
    }
    .history .worry>div ul {
        padding-left: 10px;
    }
    .history .cta {
        width: 88%;
        padding: 10px 10px 20px;
    }
    .history .cta>p {
        font-size: 14px;
        margin-top: 5px;
    }
    .history .cta .abs {
        padding: 0 10px;
        width: 90%;
        font-size: 14px;
    }
    .history .cta .btn {
        font-size: 12px;
        padding: 6px 10px;
    }
    .history .cta .btn p:nth-of-type(1) {
        padding: 6px 0 6px 0vw;
        margin-bottom: 8px;
    }
    .history .cta .btn p:nth-of-type(2) {
        font-size: 12px;
        margin: 5px auto 8px;
    }
    .history .cta .btn p {
        padding-left: 27vw;
    }
    .history .cta .btn img.abs {
        width: 40%;
    }
    .history .cta .btn p:nth-of-type(2)::after {
        width: 30px;
        height: 30px;
        top: 25%;
        right: 0%;
    }
    .medal {
        padding-left: 28vw;
        width: 60%;
    }
}

/* おすすめ5社比較表  */
.rankTable table {
    width: 100%;
    text-align: center;
    line-height: 1.2;
}
.rankTable {
    border: 3px solid #39818d;
    border-radius: 10px;
    margin-bottom: 60px;
    margin-top: 30px;
    font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    max-width: 1000px;
    width: 94%;
    margin: auto;
    background: #fff;
    z-index: 3;
    position: relative;
}
.rankTable th {
    position: sticky;
    width: 40px;
    padding: 9px 0px 9px;
    background-color: #39818d;
    color: #fff;
    left: 0;
    border-bottom: 1px dotted #fff;
    font-size: 9px;
}
.rankTable th.upper {
    background-color: #49948f;
}
.rankTable th.under {
    background-color: #6ec493;
}
.rankTable td {
    width: auto;
    border-bottom: 1px dotted #eee;
    border-top: none;
    padding: 9px 5px 9px;
    font-size: 12px;
    position: relative;
    vertical-align: baseline;
    border-right: 1px dotted #ddd;
    background: none;
}
.rankTable td:last-child {
    border-right: none;
}
.rankTable td.yellow {
    background-color: #fffcdf;
}
.rankTable table th {
    width: 19.0%;
    font-size: 13px;
}
.rankTable td {
    border-right: 1px dotted #ddd;
}
.rankTable tr {
    border-bottom: 1px dotted #ddd;
}
.rankTable tr:last-child td {
    border-bottom: none;
}
.rankTable tr.ttl {
    position: sticky;
    top: 0;
    z-index: 999;
}
.rankTable tr.ttl td {
    background: #fff;
}
.rankTable .btn {
    color: #fff;
    background-color: #e16714;
    text-decoration: none;
    border-radius: 999px;
    padding: 8px;
    display: block;
    width: 60%;
    margin: 10px auto 0;
    box-shadow: 0 4px #9a4307;
    position: relative;
}
.rankTable .btn:hover {
    top: 4px;
    box-shadow: 0 0 #9a4307; /* 影を0pxにする */
}
@media screen and (max-width:768px) {
    .rankTable table {
        width: 680px;
    }
    .rankTable {
        overflow-x: scroll;
    }
}
.rankTable table th {
    vertical-align: middle;
    width: 9.0%;
    font-size: 12.5px;
    z-index: 88;
}
img.table_icon {
    width: 99%;
    margin-top: 5px;
}
.sogood {
    font-size: 35px;
    color: #ff4a1d;
}
.good {
    font-size: 34px;
    color: #ffbb00;
    font-weight: normal;
}
.bad {
    font-size: 37px;
    font-weight: 300;
    color: #747474;
}
.soso {
    font-size: 34px;
    font-weight: bold;
    color: #0cc300;
}
.t_btn {
    display: block;
    width: 95%;
    background: #0cc300;
    padding: 7px 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0px 7px 0px 0 #087e00;
}
.t_btn02 {
    display: block;
    width: 95%;
    background: #ff6600;
    padding: 7px 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0px 7px 0px 0 #a72100;
}
.t_btn02,.t_btn{
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

/* 各社紹介 */
.intro .detail {
    width: 94%;
    max-width: 1200px;
    margin: auto auto 30px;
    border: 2px solid #39818d;
    border-radius: 10px;
    background: linear-gradient(180deg, #39818d 0%, #39818d 84px, #fff 84px, #fff 100%);
}
.intro .inner .upper,
.intro .inner .under {
    display: flex;
    padding: 20px 12px;
    justify-content: center;
}
.intro .inner .upper img,
.intro .inner .upper>div,
.intro .inner .under>div {
    width: 48%;
    margin: 0 auto;
    object-fit: contain;
}
.intro .inner .upper .ttl {
    color: #fff;
    font-weight: bold;
    font-size: clamp(20px,2.8vw, 30px);
    /* margin-bottom: 40px; */
}
.intro .inner .fee {
    text-align: center;
    flex-grow: 1;
    margin-top: 10px;
}
.intro .inner .upper>div {
    display: flex;
    flex-direction: column;
}
.intro .inner .fee div {
    background-image: linear-gradient(30deg, rgb(59, 130, 143) 0%, rgb(111, 196, 148) 100%);
    color: #fff;
    font-weight: bold;
    padding: 5px;
}
.intro .inner .fee p {
    padding: 10px;
}
.intro .inner p {
    margin: 0;
}
.intro .inner .under {
    display: flex;
}
.intro .under_r .point .ttl,
.intro .under_l .point .ttl {
    display: flex;
    align-items: flex-end;
}
.intro .inner .under_r p,
.intro .inner .under_l p {
    font-size: clamp(14px, 1.2vw, 16px);
}
.intro .under_r .ttl p,
.intro .under_l .ttl p {
    background-color: #3a818e;
    color: #fff;
    clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
    padding: 10px 20px 10px 10px;
    margin-right: 10px;
}
.intro .under_r .ttl img,
.intro .under_l .ttl img {
    width: 60px;
}
.intro .under_r .point .bg_green,
.intro .under_l .point .bg_green {
    padding: 10px;
}
.intro .under_l .point_sub {
    margin: 20px auto;
    text-align: center;
}
.intro .under_l .point_sub .ttl {
    background-color: #6ec493;
    padding: 6px;
    color: #fff;
}
.intro .under_l .point_sub .txt {
    background-color: #fffcdf;
    padding: 8px;
    line-height: 1.4;
}
.intro .inner .under .under_r_box {
    align-items: center;
}
.intro .inner .under .under_r_box .eva {
    padding: 0 10px;
    width: 10%;
    min-width: 40px;
    text-align: center;
    font-weight: bold;
}
.intro .inner .under .under_r_box .txt {
    line-height: 1.2;
    padding: 10px;
    width: 90%;
    font-size: clamp(12px, 1.2vw, 14px);
}
.intro .inner .under .under_r_box.very .eva {
    font-size: 35px;
    color: #ff4a1d;
    background-color: #feeede;
}
.intro .inner .under .under_r_box.very .txt {
    background-color: #fffcdf;
}
.intro .inner .under .under_r_box.pass .eva {
    font-size: 35px;
    color: #498b96;
    background-color: #dbf4f1;
}
.intro .inner .under .under_r_box.pass .txt {
    background-color: #ecfdfb;
}
.intro .inner .under .under_r_box.so .eva {
    font-size: 35px;
    color: #a8a8a8;
    background-color: #e1e1e1;
}
.intro .inner .under .under_r_box.so .txt {
    background-color: #f7f7f7;
}
.license .under_r_box .txt {
    /* display: flex; */
    justify-content: space-between;
}
.license .under_r_box .txt>div {
    display: flex;
    justify-content: space-between;
}
.intro .inner a {
    background-image: linear-gradient(30deg, rgb(254 134 0) 0%, rgb(255 102 0) 100%);
    text-decoration: none;
    color: #fff;
    border-radius: 999px;
    text-align: center;
    padding: 10px;
    margin: 10px auto 30px;
    display: block;
    width: 50%;
    max-width: 300px;
    font-weight: bold;
    font-size: clamp(12px, 1.8vw, 18px);
    box-shadow: 0 6px #9a4307;
    position: relative;
}
.intro .inner a:hover {
    top: 6px;
    box-shadow: 0 0 #9a4307; /* 影を0pxにする */
}
@media only screen and (max-width: 766px){
    .intro .detail {
        background: linear-gradient(180deg, #39818d 0%, #39818d 70px, #fff 70px, #fff 100%);
    }
    .intro .inner .upper {
        padding: 20px 12px 0;
    }
    .intro .inner .upper .ttl {
        text-align: center;
        font-size: clamp(20px, 2.4vw, 30px);
    }
    .intro .inner .upper, .intro .inner .under {
        flex-direction: column;
    }
    .intro .inner .upper img, .intro .inner .upper>div, .intro .inner .under>div {
        width: 100%;
    }
    .intro .under_l .ttl img {
        width: 52px;
    }
    .intro .under_l .point_sub {
        margin: 14px auto;
    }
    .intro .inner .fee {
        margin-bottom: 14px;
    }
    .intro .inner .upper.sp img {
        margin-top: 40px;
    }
}
@media only screen and (min-width: 767px){
    .license .under_r_box .txt {
        display: flex;
    }
}

/* 選ぶポイント */
.point .detail {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 94%;
    max-width: 1000px;
    margin: auto;
}
.point .box {
    width: 42%;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: 2% 1%;
    color: #08353e;
    position: relative;
}
.point .box::before {
    position: absolute;
    content: "01";
    color: #39818d;
    top: -34px;
    font-size: 2.4rem;
    font-weight: bold;
}
.point .box:nth-of-type(2)::before {
    content: "02";
}
.point .box:nth-of-type(3)::before {
    content: "03";
}
.point .box:nth-of-type(4)::before {
    content: "04";
}
.point .box .ttl {
    font-size: larger;
    font-weight: bold;
    margin-bottom: -10px;
}
.point .box ul {
    list-style: none;
    padding-left: 4px;
}
.point .box ul li {
    position: relative;
    padding: 0px 0px 0px 1em;
}
.point .box ul li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.3em solid transparent;
    border-left: 0.4em solid #08353e;
    content: "";
}
@media only screen and (max-width: 766px){
    .point .box {
        width: 92%;
        margin: 8% 1% 4%;
    }
}

/* プロと自社の違い */
.diff .graph {
    width: 94%;
    max-width: 1000px;
    margin: auto;
}
.diff .tips {
    border: 3px solid #3a818e;
    border-radius: 10px;
    background-color: #fff;
    width: 94%;
    max-width: 1000px;
    margin: 6% auto 0;
    color: #3a818e;
    font-weight: bold;
}
.diff .tips p {
    margin: 20px;
}
.diff .tips .line {
    height: 60px;
    width: 0px;
    border: 2px dotted #3a818e;
    top: -30px;
    left: 0;
    right: 0;
    margin: auto;
}
.diff .tips .man {
    right: 2%;
    bottom: 0;
    width: 20%;
    max-width: 170px;
}
@media only screen and (max-width: 766px){
    .diff .tips .line {
        height: 30px;
        top: -20px;
    }
    .diff .tips {
        margin: 8% auto 0;
    }
    .diff .tips .man {
        right: 1%;
        width: 38%;
    }
    .diff .tips p {
        margin: 20px 14px 14px;
        text-align: justify;
    }
}

/* 口コミ */
.review .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3% auto;
    width: 90%;
    max-width: 820px;
}
.review .voice img {
    width: 24%;
    max-width: 200px;
    margin-right: 14px;
}
.review .voice .ttl {
    color: #3a818e;
    font-size: larger;
}
.rankbtn {
    background-color: #e16714;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 999px;
    margin: auto;
    display: block;
    width: 60%;
    max-width: 240px;
    text-align: center;
    box-shadow: 0 4px #9a4307;
    position: relative;
}
.rankbtn:hover {
    top: 4px;
    box-shadow: 0 0 #9a4307; /* 影を0pxにする */
}
@media only screen and (max-width: 766px){
    .review .voice {
        flex-direction: column;
        margin: 8% auto;
    }
    .review .voice img {
        width: 50%;
    }
}

/* ワンデイ検討 */
.oneday .box01>div {
    width: 90%;
    max-width: 700px;
    margin: auto;
}
.oneday .box01>div:nth-of-type(1) {
    background-image: linear-gradient(30deg, rgb(217, 240, 243) 0%, rgb(219, 244, 240) 100%);
    border-radius: 20px 20px 0 0;
    padding: 10px 0;
}
.oneday .box01>div:nth-of-type(1) p {
    margin: 0;
}
.oneday .box01>div:nth-of-type(2) {
    border-radius: 0 0 20px 20px;
    background-color: #ffffff;
    background-image: linear-gradient(90deg, #e4e4e480 1px, transparent 1px), linear-gradient(#e4e4e480 1px, transparent 1px);
    background-size: 16px 16px;
    display: flex;
    justify-content: center;
}
.oneday .box01>div:nth-of-type(2) img {
    width: 28%;
    object-fit: contain;
    max-width: 190px;
}
.oneday .box01>div:nth-of-type(2) ul {
    list-style: none;
}
.oneday .box01>div:nth-of-type(2) ul li {
    padding-left: 20px;
    background-image: url(../img/check.png) ;
    background-repeat: no-repeat;
    background-position: 0 7px;
    background-size: 15px auto;
    line-height: 1.8;
}
.oneday .if {
    color: #fff;
    background-image: linear-gradient(30deg, rgb(59, 130, 143) 0%, rgb(111, 196, 148) 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 70%, 50% 100%, 0 70%);
    padding: 1% 0 2%;
    width: 30%;
    max-width: 160px;
    min-width: 120px;
    text-align: center;
    margin: 2% auto;
    padding: 10px 0 20px;
}
.oneday .box02 {
    background-image: linear-gradient(30deg, rgb(217, 240, 243) 0%, rgb(219, 244, 240) 100%);
    border-radius: 20px;
    width: 90%;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}
.oneday .box02 .review {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}
.oneday .box02 .review div {
    width: 31%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.oneday .box02 .review img {
    width: 80%;
    max-width: 180px;
    z-index: 1;
}
.oneday .box02 .review p {
    background: #fff;
    border-radius: 10px;
    padding: 16% 10px 20px;
    color: #08353e;
    margin-top: -34px;
    flex-grow: 1;
    width: 92%;
}
.oneday .box02 .last {
    display: flex;
    justify-content: center;
}
.oneday .box02 .last p {
    background: none;
    margin: 10px;
}
.oneday .box02 .last img {
    width: 24px;
    object-fit: contain;
}
.oneday .box02 .last .right {
    transform: scale(-1, 1);
}

@media only screen and (max-width: 766px){
    .oneday .box02 {
        padding: 20px 10px;
    }
    .oneday .box01>div:nth-of-type(2) ul {
        padding-left: 20px;
    }
    .oneday .box01>div:nth-of-type(2) {
        align-items: flex-end;
    }
    .oneday .box01>div:nth-of-type(2) img {
        margin-bottom: 20px;
    }
    .oneday .box02 .review {
        flex-direction: column;
    }
    .oneday .box02 .review div {
        width: 96%;
        flex-direction: row;
        margin: auto auto 10px;
    }
    .oneday .box02 .review div:nth-of-type(2) {
        flex-direction: row-reverse;
    }
    .oneday .box02 .review p {
        margin-top: 0;
        margin-left: -10px;
        padding: 20px 10px 20px;
        margin-bottom: 0;
    }
    .oneday .box02 .review div:nth-of-type(2) p {
        margin-left: 0;
        margin-right: -10px;
    }
    .oneday .box02 .review img {
        width: 36%;
    }
}

/* ベストチョイス */
.choice .box {
    border: 2px solid #3a818e;
    border-radius: 10px;
    background-color: #fff;
    width: 94%;
    max-width: 1000px;
    margin: auto;
}
.choice .detail {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}
.choice .detail_l,.choice .detail_r {
    width: 48%;
}
.choice .detail a {
    background-image: linear-gradient(30deg, rgb(254 134 0) 0%, rgb(255 102 0) 100%);
    text-decoration: none;
    color: #fff;
    border-radius: 999px;
    text-align: center;
    padding: 10px;
    margin: 10px auto 0;
    display: block;
    box-shadow: 0 6px #9a4307;
    position: relative;
}
.choice .detail a:hover {
    top: 6px;
    box-shadow: 0 0 #9a4307; /* 影を0pxにする */
}
.choice .detail_r .per {
    display: flex;
    justify-content: space-evenly;
}
.choice .detail_r p {
    margin: 0;
}
.choice .detail_r .per div {
    background-image: linear-gradient(30deg, rgb(59, 130, 143) 0%, rgb(111, 196, 148) 100%);
    width: 47%;
    border-radius: 10px;
    padding: 6px 0;
}
.choice .detail_r .per div p {
    color: #fff;
    text-align: center;
}
.choice .detail_r .per div p.num {
    color: #f7ff73;
    font-size: 2.0rem;
    line-height: 1;
    font-weight: bold;
}
.choice .detail_r .fcpg {
    margin: 10px auto 5px;
}
.choice .detail_r .fcpg::after,
.choice .detail_r .fcpg::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30px;
    background-color: #39818d;
    top: 50%;
}
.choice .detail_r .fcpg::before {
    left: 16%;
}
.choice .detail_r .fcpg::after {
    right: 16%;
}

.choice .detail_r .ribbon {
    background-color: #dbf4f0;
    clip-path: polygon(100% 0, 96% 50%, 100% 100%, 0% 100%, 4% 50%, 0% 0%);
    width: 80%;
    margin: 0 auto 10px;
    padding: 2% 0;
    font-weight: bold;
}
.choice .ttl {
    background-color: #39818d;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}
@media only screen and (max-width: 766px){
    .choice .detail {
        flex-direction: column;
    }
    .choice .detail_l, .choice .detail_r {
        width: 100%;
    }
    .choice .detail_r .ribbon {
        width: 100%;
        margin: 10px auto 10px;
    }
    .choice .box {
        margin: 6% auto 0;
    }
    .choice .detail_r .fcpg::before {
        left: 10%;
    }
    .choice .detail_r .fcpg::after {
        right: 10%;
    }
}

/* 監修 */
.author .box {
    display: flex;
    background-color: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 960px;
    margin: auto;
    padding: 20px;
    font-size: 12px;
    line-height: 1.4;
    align-items: center;
    justify-content: center;
    text-align: justify;
}
.author .box img {
    width: 16%;
    max-width: 120px;
    object-fit: contain;
    margin-right: 10px;
}
.author .box p {
    margin: 0;
}
.author .box p:nth-of-type(1) {
    color: #39818d;
    border-bottom: 2px solid #39818d;
    font-weight: bold;
    padding-bottom: 6px;
    margin-bottom: 6px;
}
@media only screen and (max-width: 766px){
    .author .box {
        padding: 10px;
        align-items: flex-start;
    }
    .author .box img {
        width: 20%;
        margin-right: 6px;
    }
}

/* フッター */
footer {
    background-color: #39818d;
    padding: 2%;
}
footer .disclaimer {
    width: 90%;
    max-width: 1000px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto auto 3%;
}
footer .disclaimer .ttl {
    background-color: #daf1f3;
    color: #39818d;
    padding: 10px;
}
footer .disclaimer .txt {
    padding: 10px;
    background-color: #ededed;
}

.foot_content {
    display: flex;
    align-items: center;
}
.foot_content .foot_l {
    display: flex;
    align-items: center;
    width: 80%;
    margin: auto;
    color: #fff;
}
.foot_content img {
    max-width: 60px;
    margin: 0 10px;
}
.foot_content .foot_l p {
    margin: 0;
    line-height: 1.4;
}
.foot_content .foot_l p b {
    font-size: larger;
}
.foot_r a {
    color: #fff;
    text-decoration: none;
}
.foot_r {
    line-height: 1.2;
}

@media only screen and (max-width: 766px){
    footer {
        padding: 8% 2%;
    }
    footer .disclaimer {
        width: 100%;
        flex-direction: column;
    }
    footer .disclaimer .ttl {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 5px 0;
    }
    footer .disclaimer .ttl {
        height: auto;
    }
    .foot_content img {
        max-width: 40px;
        margin: 0 6px 0 0;
    }
    .foot_r a,.foot_content p {
        font-size: clamp(10px, 1.2vw, 22px);
    }
}


/* 運営者情報 */
.policy h1 {
    margin-top: 3%;
}
.policy .box {
    border: 2px solid #39818d;
    width: 90%;
    max-width: 800px;
    margin: auto auto 3%;
    padding: 0 20px;
}
.policy .box p {
    border-bottom: 1px solid;
}
.policy .detail {
    width: 90%;
    max-width: 800px;
    margin: auto;
}
.policy table {
    width: 100%;
    margin-bottom: 5%;
}
.policy table,.policy td,.policy th {
    border: 1px solid #ebebeb;
    border-collapse: collapse;
    text-align: center;
}
.policy th {
    background-color: #d8f0f2;
    line-height: 1.2;
    padding: 4px 0;
}
.policy th.item {
    width: 7.6%;
    font-size: clamp(10px, 1.2vw, 14px);
}
.policy footer {
    margin-top: 5%;
}
@media only screen and (max-width: 766px){
    .policy h1 {
        margin: 8% auto 5%;
    }
    .policy .box {
        width: 80%;
    }
}

/* tuika250611 */
.point_3toku {
    margin-right: -20px;
}
@media only screen and (max-width: 766px){
    .point_3toku {
        margin-right: -10px;
    }

    .jns_btn {
        width: 90%;
    }
}

.jns_btn {
    display: block;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    box-shadow: 0 7px #17625e;
    position: relative; /* 相対位置指定を追加 */

    width: 94%;
    max-width: 1200px;
    margin: 20px auto;
}

.jns_btn:hover {
    top: 7px; /* 要素を下に7px移動 */
    box-shadow: 0 0 #17625e; /* 影を0pxにする */
}