* {
  box-sizing: border-box;
}


body{
  margin: 0;
  padding: 0;
  font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';  
  background-color: #ffffff;

}

img{
  max-width: 100%;
  height: auto;
  margin: 0 10px;
  vertical-align: middle;
}



.sank{
  color: #338100;
}

.iro{
  color: #ff0000;
  font-size: 1.1em;
  font-weight: bold;

}

.color1{
  color: #ff0000;
  
}

.color2 {
  color: #0000ff;
}

.color3{
  color: #000000;
  background-color: #ffff00;
  padding: 5px;

}

.under {
  background: linear-gradient(transparent 75%, #ff99ab 75%);
}

/*ヘッダー*/


header{
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 4% 10px;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  z-index: 100;

}


header h1{
  margin: 0; padding: 0;
  font-size: 20px;
  color: #ffffff;

}


.pc-nav a{
  text-decoration: none;
  color: #ffffff;
  position: relative;
  display: inline-block;
  transition: .3s;

}

.pc-nav a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 6px;
  background-color: #ff6347;
  transition: .3s;
  transform: translateX(-50%);
}


.pc-nav a:hover{
  color: #000000;
  background-color: #ffffff;
}

.pc-nav a:hover::after{
  width: 100%;
}

.pc-nav ul{
  list-style: none;
  margin: 0;
  display: flex;

}

.pc-nav li{
  margin: 0 0 0 15px;
  font-size: 14px;

} 

nav{
  margin: 0 0 0 auto;

}


.fade{

  animation: fadeIn 12.0s ease 0.0s 1 normal;

}

@keyframes fadeIn { /*animetion-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}




/*メイン*/

.main-visual{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('jpg/susi001-2.jpg') top center / cover no-repeat;


}

.main-visual h2{
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0,0,0,0.6);
  padding: 15px;

}


/*タイプ風*/

@keyframes typing {
   from {
         width: 0; 
        }
}
@keyframes typing1{
   from{
         opacity: 0;
       }
   to{
         opacity: 0;
       } 
}
@keyframes blink-caret {
   50% {
         border-color: transparent;
       }
}
 
.s1 h2 { 
    font: bold 130% "HG行書体", monospace;
    border-right: .1em solid;
    width: 16.5em; /* fallback */
    width: 30em; /* # of chars */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 5s steps(30, end) , /* # of steps = # of chars */
               blink-caret .5s step-end infinite alternate;
}


.s2 h2 { 
    font: bold 120% "HG行書体", monospace;
    border-right: .1em solid;
    width: 16.5em; /* fallback */
    width: 26em; /* # of chars */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 5s steps(30, end) 6s ,
               typing1 6s , /* # of steps = # of chars */
               blink-caret .5s step-end infinite alternate;
}

.s3 h2 { 
    font: bold 110%  "HG行書体", monospace;
    border-right: .1em solid;
    width: 16.5em; /* fallback */
    width: 22em; /* # of chars */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 5s steps(30, end) 12s, 
               typing1 12s , /* # of steps = # of chars */
               blink-caret .5s step-end infinite alternate;
}



/*パソコン用*/

.main-visual0{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('gif/karen65.gif') top center / cover no-repeat;
}

.de{
  text-decoration: line-through;
}

.visu0{
  position: absolute;
  top: 105%;
  left: 20%;
}

.main-visual1{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('jpg/susi007-2.jpg') top center / cover no-repeat;
}

.main-visual1 a{
  text-decoration: none;
  color: #ffd700;
  position: relative;
  display: inline-block;
  transition: .3s;
}

.main-visual1 a::after{
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #31aae2;
  transition: .3s;
  transform: translateX(-50%);
}

.main-visual1 a:hover::after{
  width: 100%;
}

.visu1{
  position: relative;
  margin: 0;


  font-size: 30px;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0,0,0,0.8);
  border-radius: 40px;
  padding: 20px;

}


.main-visual2{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('jpg/susi002-1.jpg') top center / cover no-repeat;
}

.visu2{
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0,0,0,0.8);
  border-radius: 40px;
  padding: 20px;

}

.main-visual3{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('jpg/susi003-1.jpg') top center / cover no-repeat;
}

.visu3{
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0,0,0,0.7);
  padding: 15px;

}

.main-visual4{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('jpg/susi004-1.jpg') top center / cover no-repeat;
}

.visu4{
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0,0,0,0.6);
  border-radius: 40px;
  padding: 20px

}



.haji{
   border-bottom: double 5px #ffffff;

}

.haji:first-letter {
  font-size: 2.5em;
  color: #ffd700;

}


/*PC用お知らせ*/

.boxpc {
  position: relative;
  margin: 2em 0;
  font-weight: bold;
  color: #6091d3;
  padding: 0.5em 1em;
  background: #ffffff;
  border: solid 5px #6091d3;
  border-radius: 5px 15px 15px 15px ;
  width: 480px;
}

.boxpc .box-title{
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 19px;
  background: #6091d3;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;

}

.boxpc p {

  margin: 0;
  padding: 0;

}



/*コンテンツ*/


#content {
  position: relative;
  width: auto;
  height: auto;
  background: #808080;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  border: solid 1px #808080;
}
#content::before, #content::after {
  height: 20px;
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}
#content::before {
  top: -20px;
  background: linear-gradient(45deg, #808080 10px, transparent 0), linear-gradient(315deg, #808080 10px, transparent 0);
  background-size: 20px 20px;
}
#content::after {
  bottom: -20px;
  background: linear-gradient(135deg, #808080 10px, transparent 0), linear-gradient(225deg, #808080 10px, transparent 0);
  background-size: 20px 20px;
}



/*スマホ*/

.flexbox img{
  max-width: 90%;
  height: auto;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  background: #808080;
  border: 2.5px solid #696969;
  padding: 0.2em;
  margin: 5em 1em;
  border-radius: 10px;
  flex: 1;  
}

.flexbox > div {
  background: #f5f5f5;
  padding: 1em;
  flex: 1 0 200px;
  margin: 0.3em;
  border-radius: 5px;
}

.box{
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #95ccff;
  border-radius: 8px;
}
.box .box-title{
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #808080;
  color: #ffffff;
}
.box p{
  margin: 0;
  padding: 0;
}

.ga{
  text-align: center;
}

.cm{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
}

.cm iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*フッター*/

#footer{
  display: flex; 
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: -1px;
}


#footer ul{
  list-style: none;
  margin: 0;
  display: flex;
  background-color: #808080;

}

.end li{
  margin: 0 0 0 15px;
  color: #ffffff;
  font-size: 14px;

} 

.f-ga{
  top: 30px;
  border: solid 1px #808080;
  max-width: 50%;
  padding: 50px;
  margin: 0 auto;
  text-align: center;


}

.f-ga img{
  max-width: 100%;
  height: auto;

}




/*メディアクエリ*/

@media screen and (min-width: 1400px){
  .flexbox {
               width: 1400px;

             }

}


@media screen and (min-width: 650px){
  #nav-drawer{
               display: none;

             }
  #content {
               display: none;
             } 


}

@media screen and (max-width: 650px){
  .pc-nav{
    display: none;
  }
  
  .pc{
    display: none;
  }

  #footer{
    display: none;
  }

/*スマホメニュー*/

#nav-drawer {
  position: absolute;
  right: 10px;
}

/*チェックボックス等は非表示に*/
.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: #ffffff;
  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;/*滑らかに表示*/
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


}