*, *::before, *::after {
 box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
}

html, body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

img {
  max-width: 100%;
}

ul li, ol li {
  list-style: none;
}




.contents {
}
.fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 0px;
  overflow: auto;
}










/**
 * PC
 */
@media screen and (min-width: 751px), print {
}

.block0 {background-color: #00008b;
}
.block0 {width:100%;
height:20px;
margin-right: auto;
margin-left : auto;
}
.block0-text {width:700px;
height:20px;
margin-right: auto;
margin-left : auto;
padding : 10px 10px 10px 10px ;
}




.block1 {background-image: url(../img/back_pc.png);
background-position: center center;
}
.block1 {width:100%;
height:500px;
margin-right: auto;
margin-left : auto;
}
.block1-text {width:700px;
height:500px;
margin-right: auto;
margin-left : auto;
padding : 20px 20px 20px 20px ;
}
p {
  line-height: 2.5;
}

.block2 {background-color: #00ffff;
}
.block2 {width:100%;
height:1200px;
margin-right: auto;
margin-left : auto;
}
.block2-text {width:700px;
height:1200px;
margin-right: auto;
margin-left : auto;
padding : 50px 20px 20px 20px ;
}


.block3 {background-image: url(../img/botom.png);
background-position: center center;
}
.block3 {width:100%;
height:300px;
margin-right: auto;
margin-left : auto;
}
.block3-text {width:700px;
height:300px;
margin-right: auto;
margin-left : auto;
padding : 0px 0px 0px 0px ;
color: #ffffff;
}


.block4 {background-color: #000000;
}
.block4 {width:100%;
height:70px;
margin-right: auto;
margin-left : auto;
}
.block4-text {width:700px;
height:70px;
margin-right: auto;
margin-left : auto;
padding : 20px 20px 20px 20px ;
color: #ffffff;
}


 .item {
    width: 100px;
    height: 100px;
    background-color: #2e6da4;
  }
  .item:hover {
    cursor: pointer;
  }
  .drop_area {
    margin-top: 0px;
    width: 100px;
    height: 100px;
    border: 5px solid #deb887;
    background: #fffacd;
  }
  .drop_area p {
    margin: 10px;
  }
  
	
	.drop{
	display: flex;
	flex-wrap:wrap;
	padding-left:calc(5%/3);
}
.drop li {
	width: calc(100%/3);/*←画像を横に3つ並べる場合*/
	padding:0 0px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	max-width:360px; /*画像のはみだしを防ぐ*/
}
ul {
  list-style: none;
}



/**
 * SP
 */
@media screen and (max-width: 750px), print {

}

.block0_sp {background-color: #00008b;
}
.block0_sp {width:100%;
height:50px;
margin-right: auto;
margin-left : auto;
}
.block0-text_sp {width:100%;
height:50px;
margin-right: auto;
margin-left : auto;
padding : 10px 10px 10px 10px ;
}



.block1_sp {background-image: url(../img/back_sp.png);
background-position: center center;
}
.block1_sp {width:100%;
height:278px;
margin-right: auto;
margin-left : auto;
}
.block1-text_sp {width:100%;
height:278px;
margin-right: auto;
margin-left : auto;
padding : 10px 20px 20px 20px ;
}
p {
  line-height: 2.0;
}

.block2_sp {background-color: #00ffff;
}
.block2_sp {width:100%;
height:800px;
margin-right: auto;
margin-left : auto;
}
.block2-text_sp {width:100%;
height:800px;
margin-right: auto;
margin-left : auto;
padding : 20px 20px 20px 20px ;
}


.block3_sp {background-image: url(../img/botom_sp.png);
background-position: center center;
}
.block3_sp {width:100%;
height:189px;
margin-right: auto;
margin-left : auto;
}
.block3-text_sp {width:100%;
height:189px;
margin-right: auto;
margin-left : auto;
padding : 0px 0px 0px 0px ;
color: #ffffff;
}


.block4_sp {background-color: #000000;
}
.block4_sp {width:100%;
height:70px;
margin-right: auto;
margin-left : auto;
}
.block4-text_sp {width:100%;
height:70px;
margin-right: auto;
margin-left : auto;
padding : 20px 20px 20px 20px ;
color: #ffffff;
}

.item_sp {
    width: 60px;
    height: 60px;
    background-color: #2e6da4;
  }
  .item:hover_sp {
    cursor: pointer;
  }
  .drop_area_sp {
    margin-top: 0px;
    width: 60px;
    height: 60px;
    border: 5px solid #deb887;
    background: #fffacd;
  }
  .drop_area_sp p {
    margin: 10px;
  }
  
	
	.drop_sp{
	display: flex;
	flex-wrap:wrap;
	padding-left:calc(5%/3);
}
.drop_sp li {
	width: calc(100%/3);/*←画像を横に3つ並べる場合*/
	padding:0 0px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	max-width:360px; /*画像のはみだしを防ぐ*/
}
ul {
  list-style: none;
}



/*ボタンの透過アニメ*/ 
a img {
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}
a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


.kokki_area {
    margin-top: 0px;

  }
  .kokki_area p {
    margin: 10px;
  }

	.kokki{
	display: flex;
	flex-wrap:wrap;
	padding-left:calc(40%/2);
}
.kokki li {
	width: calc(100%/4);/*←画像を横に3つ並べる場合*/
	padding:0 0px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	max-width:360px; /*画像のはみだしを防ぐ*/
}

.kokki_area2 {
    margin-top: 0px;

  }
  .kokki_area2 p {
    margin: 10px;
  }

	.kokki2{
	display: flex;
	flex-wrap:wrap;
	padding-left:calc(30%/2);
}
.kokki2 li {
	width: calc(100%/4);/*←画像を横に3つ並べる場合*/
	padding:0 0px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	max-width:360px; /*画像のはみだしを防ぐ*/
}