@charset "utf-8"


header {
  padding:10px;
  background: #ccc;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{text-align:center;margin:auto;}



p {
font-family:  "メイリオ", " Meiryo", "ヒラギノ角ゴPro W3", "ヒラギノ角ゴシック", "MS Pゴシック", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, "Hiragino Sans", YuGothic, "Yu Gothic";
}

img {
 width: 100;
 }

ul {
  list-style-type: none;
  margin: 0.1rem 0 0 0;
  padding: 0; 
}

.contentbox-single {
 margin: 5% 0 0 0 ;
 }

.footer {
 margin: 3% 0 3% 0 ;
 }

.box1head {
 flex-basis: 100% ;
 margin: 0 0 0 0 ;
 background-color:#2c3132;
 color: #ffffff ;
 text-align: center ;
 font-weight:bold ;
 }


  .box2head {
   flex-basis: 100% ;
   margin: 0 0 0 0 ;
   background-color:#634A72 ; 
   color: #ffffff ;
   text-align: center ;
   font-weight:bold ;
   }


    .box3head {
     flex-basis: 100% ;
     margin: 0 0 0 0 ;
     background-color:#5B1F77 ;
     color: #ffffff ;
     text-align: center ;
     font-weight:bold ;
     }
       
      .box4head {
       flex-basis: 100% ;
       margin: 0 0 0 0 ;
       background-color:#36565a ;
       color: #ffffff ;
       text-align: center ;
       font-weight:bold ;
       }


.box1{
 margin: 0 0 0.3% 0 ;
 background-color:#2c3132 ;
 text-align: center ;
 font-weight:bold ;
 }

.box1off{
 margin: 0 0 0.3% 0 ;
 background-color:#d1c5a6 ;
 text-align: center ;
 font-weight:bold ;
 }

  .box2{
   margin: 0 0 0.3% 0 ;
   background-color:#634A72 ;
   text-align: center ;
   font-weight:bold ;
   }

  .box2off{
   margin: 0 0 0.3% 0;
   background-color:#F9D9D9 ;
   text-align: center ;
   font-weight:bold ;
   }

    .box3{
     margin: 0 0 0.3% 0 ;
     background-color:#5B1F77 ;
     text-align: center ;
     font-weight:bold ;
     }

    .box3off{
     margin: 0 0 0.3% 0;
     background-color:#F8C4B2 ;
     text-align: center ;
     font-weight:bold ;
     }

      .box4{
       margin: 0 0 0.3% 0 ;
       background-color:#36565a ;
       text-align: center ;
       font-weight:bold ;
       }

      .box4off{
       margin: 0 0 0.3% 0;
       background-color:#d3f9f3 ;
       text-align: center ;
       font-weight:bold ;
       }


.column-center {
 text-align: center;
 }

a.normal:link
 {color: #2c3132 ;
 text-decoration: none ;
 } 

a.normal:visited {
 color: #2c3132 ;
 text-decoration:none ;
 }

a.oneoff:link
 {color: #2c3132 ;
 text-decoration: none ;
 font-weight: bold ;
 }

a.oneoff:visited {
 color: #2c3132 ;
 text-decoration:none ;
 font-weight:bold ;
 }

a.oneoff:hover {
 color: #2c3132 ;
 text-decoration: none ;
 font-weight: bold ;
 }

  a.twooff:link
   {color: #634A72 ; 
   text-decoration: none ;
   font-weight: bold ; }

  a.twooff:visited {
   color: #634A72 ;
   text-decoration: none ;
   font-weight: bold ;
   }

  a.twooff :hover {
   color: #634A72 ;
   text-decoration: none ;
   font-weight: bold ;
   }

    a.threeoff:link
     {color: #5B1F77 ; 
     text-decoration: none ;
     font-weight: bold ; }

    a.threeoff:visited {
     color: #5B1F77 ;
     text-decoration: none ;
     font-weight: bold ;
     }

    a.threeoff :hover {
     color: #f2d91f ;
     text-decoration: none ;
     font-weight: bold ;
     }

      a.fouroff:link
       {color: #36565a ; 
       text-decoration: none ;
       font-weight: bold ; }

      a.fouroff:visited {
       color: #36565a ;
       text-decoration: none ;
       font
       -weight: bold ;
       }

      a.fouroff :hover {
       color: #36565a ;
       text-decoration: none ;
       font-weight: bold ;
       }


a.one:link {
 color: #ffffff;
 text-decoration:none;
 }
a.one:visited {
 color: #ffffff;
 text-decoration:none;
 }
a.one:hover {
 color:#f2d91f;
 text-decoration:none;
 font-weight:bold;
 }


  a.two:link {
   color: #ffffff;
   text-decoration:none;
   }
  a.two:visited {
   color: #ffffff;
   text-decoration:none;
   }
  a.two:hover {
   color:#f2d91f;
   text-decoration:none;
   font-weight:bold;
   }


    a.three:link {
     color: #ffffff;
     text-decoration:none;
     }

    a.three:visited {
     color: #ffffff;
     text-decoration:none;
     }

    a.three:hover {
     color:#f2d91f;
     text-decoration:none;
     font-weight:bold;
     }

      a.four:link {
       color: #ffecdb;
       text-decoration:none;
       }

      a.four:visited {
       color: #ffecdb;
       text-decoration:none;
       }

      a.four:hover {
       color:#764b09;
       text-decoration:none;
       font-weight:bold;
       }


.navi {
 background-red;
 }


@media screen and (max-width: 480px)
 {
/*スマホ用のcssを記述*/

main, aside { width: 100%; }
main img { float: none;  } 

.contentbox-single{
 padding: 0 2.5% 0 2.5%;
 text-align: left;
 }

.box1head {
 padding: 0.5rem 0 0.5rem 0 ;
 }

  .box2head {
   padding: 0.5rem 0 0.5rem 0 ;
   }

    .box3head {
     padding: 0.5rem 0 0.5rem 0 ;
     }

      .box4head {
       padding: 0.5rem 0 0.5rem 0 ;
       }

.box1 {
 flex-basis: 100% ;
 position: relative; 
 padding: 0.5rem 0 0.5rem 0 ;
 }

  .box2 {
   flex-basis: 100% ;
   position: relative; 
   padding: 0.5rem 0 0.5rem 0 ;
   }

    .box3 {
     flex-basis: 100% ;
     position: relative; 
     padding: 0.5rem 0 0.5rem 0 ;
     }

      .box4 {
       flex-basis: 100% ;
       position: relative; 
       padding: 0.5rem 0 0.5rem 0 ;
       }


.box1off {
 flex-basis: 100% ;
 position: relative;
 padding: 0.5rem 0 0.5rem 0 ; 
 }

  .box2off {
   flex-basis: 100% ;
   position: relative;
   padding: 0.5rem 0 0.5rem 0 ; 
   }

    .box3off {
     flex-basis: 100% ;
     position: relative;
     padding: 0.5rem 0 0.5rem 0 ; 
     }

      .box4off {
       flex-basis: 100% ;
       position: relative;
       padding: 0.5rem 0 0.5rem 0 ; 
       }


li.navibox1 {
 margin:0 0 0 0;
 }

li.navibox2 {
 margin:0 0 0 0;
 }

li.navibox3 {
 margin:0 0 0 0;
 }

li.navibox4 {
 margin:0 0 0 0;
 }

img.pc {display:none;}
img.phone {display:block;}

h1{font-size:18px; color="#4f2052"; }
h2{font-size:15px; color="#4f2052"; }
h3{font-size:15px; color="#4f2052"; }
h4{font-size:15px; color="#4f2052"; }

html{font-size:15px; line-height:30px; }
p{font-size:15px; line-height:30px; }
    body > .wrap{
        width:960px;
    }
    
    ul {
      display: flex;
      flex-wrap: wrap;
          }


    li {
      width: 25%;
      font-size: 1.3rem;
      align: center;
      
    }

}


@media only screen and (min-width:481px)and (max-width:767px)
 {
/*タブレット用のcssを記述*/

main, aside { width: 100%; }
main img: { float: none;  }

.contentbox-single{
 padding: 0 15% 0 15%;
 text-align: left;
 }

.box1head {
 padding: 0.5rem 0 0.5rem 0 ;
 }

  .box2head {
   padding: 0.5rem 0 0.5rem 0 ;
   }

    .box3head {
     padding: 0.5rem 0 0.5rem 0 ;
     }

      .box4head {
       padding: 0.5rem 0 0.5rem 0 ;
       }

.box1 {
 flex-basis: 50% ;
 position: relative; 
 padding:  0.5rem 0 0.5rem 0 ;
 }

  .box2 {
   flex-basis: 50% ;
   position: relative; 
    padding:  0.5rem 0 0.5rem 0 ;
   }

    .box3 {
     flex-basis: 50% ;
     position: relative; 
     padding:  0.5rem 0 0.5rem 0 ;
     }

      .box4 {
       flex-basis: 50% ;
       position: relative; 
       padding:  0.5rem 0 0.5rem 0 ;
       }

.box1off {
 flex-basis: 50% ;
 position: relative;
 padding:  0.5rem 0 0.5rem 0 ;
 font-weight:bold; 
 }

  .box2off {
   flex-basis: 50% ;
   position: relative;
   padding:  0.5rem 0 0.5rem 0 ;
   font-weight:bold; 
   }

    .box3off {
     flex-basis: 50% ;
     position: relative;
     padding:  0.5rem 0 0.5rem 0 ;
     font-weight:bold; 
     }

      .box4off {
       flex-basis: 50% ;
       position: relative;
       padding:  0.5rem 0 0.5rem 0 ;
       font-weight:bold; 
       }

li.navibox1 {
 margin:0 0 0 0;
 }

li.navibox2 {
 margin:0 0 0 0;
 }

li.navibox3 {
 margin:0.5% 0 0 0;
 }

li.navibox4 {
 margin:0.5% 0 0 0;
 }


img.pc {
 display:block;
 }
img.phone { display:none; }


h1{text-align:center; font-size:21px; color="#4f2052"; }
h2{text-align:center; font-size:18px; color="#4f2052"; }
h3{text-align:center; font-size:18px; color="#4f2052"; }
h4{text-align:center; font-size:18px; color="#4f2052"; }

html {font-size:18px; line-height:30px; }
p{font-size:15px; line-height:36px; }
    body > .wrap{
        width:960px;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
    }


    li {
      width: 50%;
      font-size: 1rem;
      text-align: center;
    }

}


@media only screen and (min-width:768px)
 {
/*PC用のcssを記述*/

main, aside { width: 100%; }
main img: { float: none;  } 


.contentbox-single{
 padding: 0 26% 0 26% ;
 text-align: left;

 }

.box1head {
 padding: 0.5rem 0 0.5rem 0 ;
 }

  .box2head {
   padding: 0.5rem 0 0.5rem 0 ;
   }

    .box3head {
     padding: 0.5rem 0 0.5rem 0 ;
     }

      .box4head {
       padding: 0.5rem 0 0.5rem 0 ;
       }

.box1 {
 flex-basis: 25% ;
 position: relative; 
 padding: 0.5rem 0 0.5rem 0 ;
 font-weight:bold;  
 }

.box1off{
 flex-basis: 25% ;
 position: relative;
 padding: 0.5rem 0 0.5rem 0 ;
 font-weight:bold; 
 }

  .box2 {
   flex-basis: 25% ;
   position: relative; 
   padding: 0.5rem 0 0.5rem 0 ;
   font-weight:bold;  
   }

  .box2off{
   flex-basis: 25% ;
   position: relative;
   padding: 0.5rem 0 0.5rem 0 ;
   font-weight:bold; 
   }

    .box3 {
     flex-basis: 25% ;
     position: relative; 
     padding: 0.5rem 0 0.5rem 0 ;
     font-weight:bold;  
     }

    .box3off{
     flex-basis: 25% ;
     position: relative;
     padding: 0.5rem 0 0.5rem 0 ;
     font-weight:bold; 
     }

      .box4 {
       flex-basis: 16.66666% ;
       position: relative; 
       padding: 0.5rem 0 0.5rem 0 ;
       font-weight:bold;  
       }

      .box4off{
       flex-basis: 16.66666% ;
       position: relative;
       padding: 0.5rem 0 0.5rem 0 ;
       font-weight:bold; 
       }


li.navibox1 {
 margin:0 0 0 0;
 }

li.navibox2 {
 margin:0 0 0 0;
 }

li.navibox3 {
 margin:0 0 0 0;
 }

li.navibox4 {
 margin:0 0 0 0;
 }

img.pc {display:block;}

img.phone {display:none;}

h1{text-align:center; font-size:21px; color="#4f2052"; }
h2{text-align:center; font-size:18px; color="#4f2052"; }
h3{text-align:center; font-size:18px; color="#4f2052"; }
h4{text-align:center; font-size:18px; color="#4f2052"; }

html {font-size:18px; line-height:36px; }

p{font-size:18px; line-height:36px; }
    body > .wrap{
        width:960px;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
    }


    li {
      width: 16.66666%;
      font-size: 1rem;
      text-align: center;      
    }

}