@charset "utf-8";

:root{
  
}

#page_title{
    background:url(grp/page_title_bg.jpg) right center no-repeat;
}

#it_com{
    margin:30px auto 0 auto;
    display:grid;
    grid-template-columns: 340px 1fr;
    gap:30px;
    width:min(860px,100%);
    align-items: center;
    figure{
        img{
            border-radius:10px;
        }
    }
    div{
        text-align: left;
        > h3{
            font-size: 1.2em;
            font-weight: 500;
            color:red;
            strong{
                margin:0 0 0 .5em ;
                display:inline-bloc(20,20);
                background:red;
                color:white;
                padding:.3em .5em .1em .5em;
            }
        }
        p{
            margin:5px 0 0 0;
            &:nth-of-type(1){
              color:red;
              margin:10px 0 0 0;
              font-size: 1.1em;
            }
            &:nth-of-type(2){
              color:red;
              font-weight: 500;
              font-size: 1.2em;
            }
        }
    }
    @media (max-width: 1200px) {
        width:auto;
        max-width: none;
    }
    @media (max-width: 768px) {
        display:block;
        figure{
            width:100%;
            max-width:480px;
            margin:0 auto;
        }
        div{
            width:auto;
            margin-top:10px;
        }
    }
}


#system_gaiyou{/*システム概要*/
  --color-system:#1DA1FF;
  > div{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
    gap:30px;
    margin:0 auto;
    section{
      border-radius:10px;
      overflow: hidden;
      padding-bottom:20px;
      border:2px solid var(--color-system);
      background:#e8fbff;
      > h3{
        font-size: 1.2em;
        padding:.5em 0;
        font-weight: 500;
        color:white;
        background:var(--color-system);
      }
      ul{
        background:white;
        border-radius:10px;
        padding:20px;
        margin:20px 20px 0 20px ;
        border:1px solid var(--color-system);
        > * + *{
          border-top:1px dotted silver;
        }
        li{
          display:grid;
          grid-template-columns: 10em 1fr;
          align-items: center;
          padding:10px 0;
          h3{
            text-align: right;
            span{
              display:block;
              font-size: .9em;
            }
          }
          div{        
            font-weight: 500;
            i{
              font-size: .8em;
              font-weight: normal;
            }
            p{
              font-weight: 500;
              font-size: 1.1em;
              span{
                font-size: .8em;
                font-weight: normal;
                color:red;
                margin:0 0 0 .3em;
              }
            }
            aside{
              margin:5px 0 0 0;
              font-size: .9em;
              font-weight: normal;
              color:red;
            }
          }
        }
      }
      > aside{
        text-align: left;
        color:red;
        font-size: .9em;
        margin:.5em 20px 0 20px;
      }
        &:nth-child(2){/*レギュ*/
          --color-system:#759d17;
          background:#fafee9;
      }
        
    }
  }
  > aside{
    text-align: left;
    color:red;
    margin:10px auto 0 auto;
    font-size: .9em;
  }
  @media (max-width: 600px) {
    > div{
      section{
        ul{
          li{
            display: flex;
	          > :last-child { margin-left: auto }
            flex-wrap:wrap;
            gap:.5em 10px;
            h3{
              text-align: left;
              font-weight: 500;
              span{
                display:inline-block;
              }
            }
            div{
              text-align: right;
            }
          }
        }
      }
    }
  }
}


#shop_plan{/*プラン詳細*/
  margin:30px auto 0 auto;
  div{
    padding:15px;
    border-radius:15px;
    > * + *{
      margin:1.5em auto 0 auto;
    }
    > h3{
      font-size: 1.2em;
      border-radius:10px;
      padding:.5em 0;
      font-weight: 500;
      color:white;
    }
    article{
      h3{
        color:rgb(var(--mainColor));
        text-align: left;
        font-size: 1.1em;
        font-weight: 500;
        svg{
          fill:rgb(var(--mainColor));
          margin:0 .3em 0 0;
          vertical-align: middle;
        }
        span{
          font-size: .9em;
        }
      }
      ul{
        margin:10px auto 0 auto;
        display:flex;
        flex-wrap:wrap;
        justify-content: start;
        gap:.3em 1em;
        > li{
          margin:0 0 0 2em;
          list-style:disc;
          text-align: left;
          font-size: .9em;
        }
      }
      aside{
        text-align: left;
        color:red;
        font-size: .9em;
        margin:5px 0 0 0;
      }
    }
    ol{
      li{
        margin:20px 0 0 0;
        a{
          display:block;
          text-decoration: none;
          color:rgb(var(--baceFontColor));
          figure{
            figcaption{
              font-size: .9em;
              margin:5px 0 0 0;
              text-align: left;
            }
          }
          &:hover{
            img{
              opacity: .75;
            }
          }
        }          
      }
    }
    &#regular{
      border:2px solid #759d17;
      background:#fafee9;
      display:grid;
      grid-template-columns: repeat(auto-fill,minmax(min(400px,100%),1fr));
      gap:20px;
      > div{
        &#eco{/*エコノミープラン*/
          border:2px solid #1da1ff;
          background:#dcf3fc;
          > h3{
            background:#1da1ff;
          }
        }
        &#regular_box{
          padding:0;
          margin-top:1.2em;
          > h3{
            background:#759d17;
          }
          > p{
            text-align: left;
            margin:20px 0 0 0;
            color:red;
          }
        }
      }
    }
  }
  > aside{/*オプション*/
    border:2px solid #faa034;
    margin-top:15px;
    background:#fff9e8;
    border-radius:15px;
    padding:20px;
    h3{
      font-size: 1.2em;
      color:#ff8600;
      font-weight: 500;
    }
    ul{
      margin:10px 0 0 0;
      display:flex;
      justify-content: satrt;
      gap:.5em 1em;
      flex-wrap:wrap;
      li{
        text-align: left;
        margin:0 0 0 2em;
        list-style:disc;
        font-size: .9em;
      }
    }
        aside{
            margin:10px 0 0 0;
            @include font-size(18);
            color:red;
        }
  }
}


    summary {
        position: relative;
        display: block; /* 矢印を消す */
        padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
        cursor: pointer; /* カーソルをポインターに */
        font-weight: bold;
        background-color: #e2f0f7;
        transition: 0.2s;
        text-align: left;
        margin:30px 0 0 0;
        &:hover {
            background-color: #ccebfb;
        }
        &::-webkit-details-marker {
            display:none;/* 矢印を消す */
        }
        &::before,/* 疑似要素でアイコンを表示 */
        &::after {
            content: "";
            margin: auto 0 auto 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
        }
        &::before {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            background-color: #1da1ff;
        }
        &::after {
            left: 6px;
            width: 5px;
            height: 5px;
            border: 4px solid transparent;
            border-left: 5px solid #fff;
            box-sizing: border-box;
            transition: .1s;
        }
    }
      
      /* オープン時のスタイル */
      details[open] summary {
        background-color: #ccebfb;
      }
      details[open] summary:after {
        transform: rotate(90deg); /* アイコンを回転 */
        left: 4px; /* 位置を調整 */
        top: 5px; /* 位置を調整 */
      }
      
      /* アニメーション */
      details[open] .details-content {
        animation: fadeIn 0.5s ease;
      }
      @keyframes fadeIn {
        0% {
          opacity: 0;
          transform: translateY(-10px);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
    
    .details-content{
      section{
        border:2px solid rgb(var(--mainColor));
        padding:20px;
        margin-top:20px;
        border-radius:10px;
        > h3{
          font-size: 1.1em;
          font-weight: 500;
          background:rgb(var(--mainColor));
          color:white;
          border-radius:10px;
          padding:.5em 0;
        }
        > div{  
          margin-top:30px;    
          > h3{
            text-align: left;
            font-weight: bold;
            color:rgb(var(--mainColor));
            background:#dcf3fc;
            padding:.5em;
            border-radius: 10px;
          }
          > ul{
            margin:10px auto 0 auto;
            > li{
              text-align: left;
              margin:.7em 0 0 2em;
              list-style: disc;
              h4{
                font-weight: 500;
              }
              p{
                font-size: .9em;
              }
            }
          }
        }
        &:nth-child(2){
          border:2px solid #759d17;
          > h3{
            background:#759d17;
          }
        }
      }
    }

    #itigen{
      p{
        margin:10px 0 0 0;
        text-align: left;
        font-size: .9em;
        strong{
          color:red;
        }
      }
      aside{
        margin:10px 0 0 0;
        font-size: .9em;
        text-align: left;
      }
    }