@charset "utf-8";

/*-----------------------------------------------------	*/
/*	for all	- General Settings　*/
/*-----------------------------------------------------	*/

body {
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
	font-size: 16px;
	line-height: 1.6;
  color: #333;
}

.pc-tb {
  display: block;
}
.sp_only {
  display: none;
}

.center {
  text-align: center;
}
.txt_s {
  font-size: 14px;
}
.mt10 {
  margin-top: 10px;
}

.main {
  padding-bottom: 50px;
}

/* ローディングアニメーション */
.loader-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #002c48;
    z-index: 100;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.loader-noren {
    display: inline-flex;
    align-items: center;
    justify-content: start;
    pointer-events: none;
}
.loader-noren span {
    display: block;
    width: 400px;
    height: 161px;
    background: url(../img/noren.png) no-repeat center;
    background-size: contain;
}

#main_v {
    position: relative;
    height: 700px;
    width: 100%;
    background: #ffdf31;
    overflow: hidden;
}

.shape1 {
    position: absolute;
    width: 400px;
    height: 708px;
    left: calc(50% - 570px);
    top: 5%;
}
.shape2 {
    position: absolute;
    width: 400px;
    height: 708px;
    right: calc(50% - 570px);
    top: 5%;
}
.okonomiyaki {
  position: absolute;
  width: 450px;
  height: 450px;
  left: calc(50% - 225px);
  top: 5%;
}
.title-logo {
  position: absolute;
  width: 650px;
  height: 203px;
  left: calc(50% - 325px);
  bottom: 5%;
}
.shape1 img,
.shape2 img,
.okonomiyaki img,
.title-logo img {
  width: 100%;
  height: auto;
}

.company_logo {
  position: absolute;
  top: 20px;
  left: 0px;
  float: left;
}
.company_logo img {
  width: 120px;
  height: auto;
}

/* 終了告知 */
.box_end {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 30px;
}

/* レポート */
.box_report {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 30px;
}
.movie {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
}

.movie .movie_box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border: solid 4px #000;
  box-sizing: border-box;
}
.movie .movie_box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.photo::before {
  clear: both;
}
.photo {
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0px;
}
.photo_img {
  width: 100%;
    display: flex;
    justify-content: space-around;
  padding-bottom: 20px;
}
.photo_img div {
  position: relative;
  width: 49%;
  box-sizing: border-box;
}
.photo_img div .magnifier {
  position: absolute;
  width: 52px;
  height: 52px;
  background: url(../img/magnifier_ico.png) no-repeat;
  background-size: contain;
  top: 5px;
  right: 5px;
  border: none;
}
.photo_img div img {
  width: 100%;
  height: auto;
  border: 4px solid #000;
  box-sizing: border-box;
}

.photo p {
  padding-bottom: 20px;
}

/* キャッチ */
.box_catch {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
.catch {
  font-size: 35px;
  font-family: "Dela Gothic One", sans-serif;
  color: #000;
  font-weight: 400;
  text-align: center;
  margin-bottom: 20px;
}

/* サンプル動画 */
.sample_box {
  width: 800px;
    display: flex;
    justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.sample_box div {
  width: 49%;
  max-width: 370px;
}
.sample_box div img {
  width: 100%;
  height: auto;
  border: 4px solid #000;
  box-sizing: border-box;
}

/* イメージ */
.image_box {
  width: 900px;
    xdisplay: inline-flex;
    xalign-items: center;
    xjustify-content: center;
    display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
.img_programing {
  width: 49%;
}
.img_cooking {
  width: 49%;
  margin-top: 40px;
}
.img_programing img,
.img_cooking img {
  width: 100%;
  height: auto;
}

/* イベント概要 */
.box_outline {
  width: 700px;
  box-sizing: border-box;
  margin: 50px auto 30px auto;
  padding: 10px 50px 30px;
  border: solid 4px #000;
  xborder-radius: 5px;
}
.box_outline dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.box_outline dl dt,
.box_outline dl dd {
  box-sizing: border-box;
}
.box_outline dl dt {
  display: flex;
  align-items: center;
  width: 9em;
  margin-right: 20px;
  margin-bottom: 2px;
  padding: 10px 20px;
  background: #ffdf31;
}
.box_outline dl dd {
  display: flex;
  align-items: center;
  width: calc(100% - (9em + 20px));
  padding: 10px 0px;
}
.box_outline dl.time_ske dt {
  align-items: start;
  background: none;
  padding: 0px 0px;
  width: 4em;
}
.box_outline dl.time_ske dd {
  align-items: start;
  width: calc(100% - (4em + 20px));
  padding: 0px 0px;
}

/* エントリーボタン */
#entry {
  text-align: center;
  margin-bottom: 50px;
}
.button {
  background-color: #ffdf31;
  border: solid 4px #000;
  color: #000;
  border-radius: 5px;
  padding: 10px 50px;
  text-decoration: none;
  box-shadow: 0 5px 0 #000;
  display: inline-block;
  transition: .2s;
  font-size: 30px;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
}
.button:hover {
  color: #000;
  transform: translateY(5px);
  box-shadow: 0 0 0 #000;
}

#entry .gray {
  background-color: #ccc;
  border: solid 4px #777;
  color: #777;
  border-radius: 5px;
  padding: 10px 50px;
  text-decoration: none;
  box-shadow: 0 5px 0 #777;
  display: inline-block;
  transition: .2s;
  font-size: 30px;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
}

/* ぷよぷよプログラミングとは */
.box_puyoprog {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
.box_puyoprog .puyoprog_img {
  text-align: center;
  margin-top: 20px;
}
.box_puyoprog .puyoprog_img img {
  max-width: 100%;
}
/* 会社紹介 */
#company {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#company .left_box,
#company .right_box {
  width: 500px;
  margin: 20px;
  box-sizing: border-box;
  padding: 10px 40px 130px;
  border: solid 4px #000;
  xborder-radius: 5px;
  position: relative;
}
.company_name {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
.company_name img {
  width: 60%;
  height: auto;
}
#company_link {
  width: calc(100% - 80px);
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  bottom: 30px;
}
.button_s {
  background-color: #FFF;
  border: solid 4px #000;
  color: #000;
  border-radius: 5px;
  padding: 7px 20px;
  text-decoration: none;
  box-shadow: 0 5px 0 #000;
  display: inline-block;
  transition: .2s;
  font-size: 30px;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
}
.button_s:hover {
  color: #000;
  transform: translateY(5px);
  box-shadow: 0 0 0 #000;
}

/* 注意事項 */
.box_attention {
  width: 700px;
  box-sizing: border-box;
  margin: 50px auto 50px auto;
  padding: 10px 50px 30px;
  border: solid 4px #000;
  color: #000;
  xborder-radius: 5px;
  background: #ccc;
}
.box_attention li {
  font-size: 14px;
  text-indent: -1em;
  margin-left: 1em;
}

/* 装飾ライン */
.puyo_line_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.puyo_line {
  width: 70px;
  height: 70px;
  margin: 10px;
}
.puyo_line img {
   width: 100%;
   height: auto;
}

.sauce_line_box {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.sauce_line {
  width: 110px;
  height: 110px;
  margin: 10px;
}
.sauce_line img {
   width: 100%;
   height: auto;
}
.line {
  width: 100%;
  height: 4px;
  background-color: #000;
  overflow: hidden;
  margin-top: 50px;
}

/*-----------------------------------------------------	*/
/*	for - 1100px以下の記述　*/
/*-----------------------------------------------------	*/

@media screen and (max-width:1100px) {
/* 終了告知 */
.box_end {
  width: 80%;
}

/* レポート */
.box_report {
  width: 80%;
}
.movie {
  max-width: 800px;
  width: 80%;
}
.photo {
  max-width: 1100px;
  width: 96%;
}
.photo_img div .magnifier {
  width: 8%;
  height: 12%;
  top: 2%;
  right: 2%;
}

/* サンプル動画 */
.sample_box {
  max-width: 800px;
  width: 96%;
}

/* イメージ */
.image_box {
  width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.box_catch {
  width: 80%;
}
.box_outline {
  width: 680px;
}
.box_puyoprog {
  width: 80%;
}
#company .left_box,
#company .right_box {
  width: 48%;
  margin: 1%;
  padding: 10px 4% 130px;
}
#company_link {
  width: 84%;
}
.box_attention {
  width: 680px;
}


}


/*-----------------------------------------------------	*/
/*	for - 700px以下の記述　*/
/*-----------------------------------------------------	*/

@media screen and (max-width:700px) {
.pc-tb {
  display: none;
}
.sp_only {
  display: block;
}

/* ローディングアニメーション */
.loader-noren span {
    width: 300px;
}
#main_v {
    position: relative;
    height: 0px;
    width: 100%;
    padding-bottom: 180%;
}
.shape1 {
    position: absolute;
    width: 95%;
    height: auto;
    left: 2%;
    top: 10%;
}
.shape2 {
    position: absolute;
    width: 95%;
    height: auto;
    right: 2%;
    top: 40%;
}
.okonomiyaki {
  position: absolute;
  width: 80%;
  height: auto;
  left: calc(50% - 40%);
  top: 25%;
}
.title-logo {
  position: absolute;
  width: 90%;
  height: auto;
  left: calc(50% - 45%);
  bottom: 5%;
}

/* 終了告知 */
.box_end {
  width: 96%;
}

/* レポート */
.box_report {
  width: 96%;
}
.movie {
  width: 96%;
}
.photo_img div .magnifier {
  width: 12%;
  height: 14%;
  top: 4%;
  right: 2%;
}
/* イメージ */
.img_programing {
  width: 96%;
}
.img_cooking {
  width: 96%;
  margin-top: 20px;
}

.box_outline {
  width: 94%;
  padding: 10px 3% 10px;
}
.box_outline dl {
  display: block;
}
.box_outline dl dt {
  width: 100%;
  margin-right: 0px;
}
.box_outline dl dd {
  width: 100%;
  margin-bottom: 15px;
}
.box_outline dl.time_ske {
  display: flex;
}
.box_outline dl.time_ske dd {
  width: calc(100% - (7em + 0px));
  margin-bottom: 0px;
}
#company .left_box,
#company .right_box {
  width: 90%;
}
#company_link {
  width: 90%;
}
.box_attention {
  width: 94%;
  padding: 10px 3% 30px;
}

/* 装飾ライン */
.puyo_line {
  width: 10%;
  height: auto;
  margin: 2%;
}
.sauce_line {
  width: 15%;
  height: auto;
  margin: 0%;
}

}