@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@500;700&family=Manrope:wght@200..800&display=swap");

body {
	padding-top: 0px;
  font-family: "Noto Sans JP", sans-serif;
}

ul{list-style: none;}

#body {
	background: url(../images/background.png) no-repeat fixed;
  background-size: cover;
}
@media screen and (max-width: 1023px) {
 #body { background: url(../images/background_sp.png) no-repeat fixed;
         background-size: cover;
}
}

.bg-header {
	width:948px;
	height:35px;
	margin: -40px auto 0 auto;
}
*:first-child+html #bg-box .bg-header { position:absolute; top:0;  } 

.sp{ display: none;}
@media screen and (max-width: 1023px) {
  .sp{display: inline-block;}
}

/*header*/
.home_header {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  height: 54px;
  position: relative;
  z-index: 10001;
}
.home_header .header_logo {
  margin: 18px 0 0 17px;
  width: 165px;
}
.home_header .nav_btn {
  background: #00A0E9;
  position: fixed;
  top: 0;
  right: 0;
  width: min(110px, 7.6388888889vw);
  height: min(110px, 7.6388888889vw);
  cursor: pointer;
  transform-origin: right top;
}
@media screen and (max-width: 1023px) {
  .home_header .nav_btn {
    width: 54px;
    height: 54px;
  }
}
.home_header .nav_btn:before,
.home_header .nav_btn span:before,
.home_header .nav_btn span:after {
  background: #fff;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 37%;
  height: 2px;
}
.home_header .nav_btn:before {
  top: 48.14%;
}
.home_header .nav_btn span::before {
  top: 35.18%;
}
.home_header .nav_btn span::after {
  top: 61.1%;
}
.home_header .nav_main {
  background: #fff;
  bottom: 0;
  overflow-y: auto;
  padding-top: 35px;
  position: fixed;
  top: 0;
  right: -200vw;
  transition: right 0.3s;
  width: 100%;
}
.home_header .nav_main.shownav {
  right: 0;
}
.home_header .nav_logo {
  height: 97px;
  padding: 0 24px 30px;
}
.home_header .nav_logo img {
  width: 291px;
}
.home_header .nav_list {
  margin: 0 30px;
}
.home_header .nav_list li {
  border-top: 1px solid #c8c9ca;
}
.home_header .nav_list li a {
  color: #646464;
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 0;
  position: relative;
  text-decoration: none;
}
.home_header .nav_list li a::before {
  background: #00085f url("../../present/images/ico-arrow-wh-r.png") center/6px 10px no-repeat;
  content: "";
  height: 20px;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}
.home_header .nav_close {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  width: min(110px, 7.6388888889vw);
  height: min(110px, 7.6388888889vw);
}
@media screen and (max-width: 1023px) {
  .home_header .nav_close {
    width: 54px;
    height: 54px;
  }
}
.home_header .nav_close:before, .home_header .nav_close:after {
  background: #000;
  content: "";
  height: 3.7%;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 37%;
}
.home_header .nav_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.home_header .nav_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/*コンテンツ幅*/
#position{
  width: 100% !important;
  padding: 0 !important;
}

/*タイトル*/
h1.title {
	text-indent: 0 !important;
  text-align: center;
  margin-bottom: 20px;
}

h1.title img{
  margin-bottom: 50px;
}

@media screen and (max-width: 1023px) {
  h1.title {
    margin-bottom: 0px;
  }
  h1.title div:first-child img{
    width: 70%;
    margin-bottom: 30px;
  }
  h1.title div:last-child img:first-child{
    display: none;
  }
  h1.title div:last-child img:last-child{
    margin: auto;
    margin-bottom: 30px;
    width: 70%;
  }
}

/*白背景*/
#contents {
	position: relative;
	padding: 50px 50px;
  width: 900px;
  margin: auto;
  margin-bottom: 100px;
  background: #fff;
  border-radius: 30px;
}

@media screen and (max-width: 1023px) {
  #contents{
    width: 80%;
    padding: 30px 10px;
  }
}

/*スマホ用壁紙のダウンロードはこちら！*/
#contents .sub_intro{
  margin: auto;
  text-align: center;
}
#contents .sub_intro img{
  margin-bottom: 30px;
}

@media screen and (max-width: 1023px) {
  #contents .sub_intro{
  width: 80%;
}
  #contents .sub_intro img:first-child{
    display: none;
}
  #contents .sub_intro .sp{
    margin: auto;
    width: 80%;
}
  #contents .sub_intro img:last-child{
    width: 100%;
    margin-bottom: 5px;
}
}

/**/
#contents .eastern_western{
  width: 100%;
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
  text-align: center;
}

#contents .eastern_western div{
  padding: 10px 25px;
}

@media screen and (max-width: 1023px) {
  #contents .eastern_western{
    margin: auto;
    margin-bottom: 20px;
}
  #contents .eastern_western div{
  width: 40%;
  padding: 5px 7px;
  }
}

#contents .eastern_western img{
   width: 100%;
}

.download{margin: auto;}

@media screen and (max-width: 1023px) {
  .download{
    width: 80% !important;
  }
}


/*各都道府県*/
.eastern_western, .prefecture {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.eastern_western, .prefecture {
  justify-content:center;}



.prefecture{
  width: 92%;
  margin: auto;
}
.prefecture_inner {
  margin: 0 16px 50px 16px;
  width: 21%;
  text-align: center;
}
  
#contents .prefecture div img:first-of-type{
  margin-bottom: 15px; 
  
}
.prefecture_inner img{
    width: 100%;
  }

@media screen and (max-width: 1023px) {
  .prefecture{
  width: 100%;
  }
  .prefecture_inner {
    width: 30%;
    margin: 15px 4px;
  }
  #contents .prefecture div img:first-of-type{
  margin-bottom: 5px; 
  }
  .prefecture_inner .download{
    width: 100% !important;
  }
}

.download:hover{
  transform: scale(1.05);
}

a:hover img{
  opacity: 1.0;
}

@media screen and (max-width: 1023px) {
.caution{ font-size: 8pt;}
  .bottom-menu{line-height: 1.0;}
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(14px, 0.9722222222vw);
  line-height: 1.75;
  font-weight: 400;
  padding: min(21px, 1.4583333333vw) min(30px, 2.0833333333vw);
  background: white;
}
@media screen and (max-width: 1023px) {
  .footer {
    font-size: 3.2vw;
    flex-direction: column;
    padding: 0 0 5.3333333333vw;
  }
}
.footer--link {
  order: 3;
}
@media screen and (max-width: 1023px) {
  .footer--link {
    width: 100%;
    order: 1;
    border-bottom: 1px solid #c8c9ca;
  }
}
.footer--link ul {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
@media screen and (max-width: 1023px) {
  .footer--link ul {
    gap: auto;
    padding: 0 30px;
  }
}
.footer--link ul a {
  color: #929292;
  display: block;
  padding: 10px 0;
  text-decoration: none;
}
.footer--logo {
  display: block;
  width: min(168px, 11.6666666667vw);
  height: auto;
  order: 1;
}
@media screen and (max-width: 1023px) {
  .footer--logo {
    width: 38.6666666667vw;
    margin: 5.3333333333vw auto 2.6666666667vw;
  }
}
.footer--copyright {
  font-size: min(12px, 0.8333333333vw);
  color: #929292;
  order: 2;
  margin: 0 auto 0 min(20px, 1.3888888889vw);
}
@media screen and (max-width: 1023px) {
  .footer--copyright {
    font-size: 3.2vw;
    order: 3;
    text-align: center;
    margin: 0;
  }
}
.footer .pagetop {
  bottom: -100px;
  right: 15px;
  position: fixed;
  transition: bottom 0.2s;
  width: min(90px, 6.25vw);
  height: min(90px, 6.25vw);
  z-index: 9999;
}
@media screen and (max-width: 1023px) {
  .footer .pagetop {
    width: 16vw;
    height: 16vw;
  }
}
.footer .pagetop.showpagetop {
  bottom: min(140px, 9.7222222222vw);
}
@media screen and (max-width: 1023px) {
  .footer .pagetop.showpagetop {
    bottom: 4vw;
  }
}
.footer .pagetop a {
  background: #00A0E9 url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.66663%2011.6667L11.6666%201.66675L21.6666%2011.6667%22%20stroke%3D%22white%22%20stroke-width%3D%223.33333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E%0A") center center no-repeat;
  background-size: 25% auto;
  border: min(5px, 0.3472222222vw) solid white;
  border-radius: 50%;
  display: block;
  height: 100%;
  width: 100%;
}
/*************************************************************/

/*

h2 {
	height: 33px;
	margin-bottom: 20px;
	background: url(/penguin_island/g_cube/images/bg_h2-wallpaper.gif) no-repeat;
}
#position {
}
#position p.title {
	position: absolute;
	left: 30px;
	top: 110px;
	z-index: 99;
	color: #000;
	font-weight: bold;
	line-height: 1.5em;
	font-size: 13px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


#contents p.backnumber {
	position: absolute;
	right: 20px;
	top:-70px;
	z-index:100;
	zoom:1;
}
#contents p.backnumber a {
	text-indent: 0px;
}
#contents div.left-side {
	position: relative;
	float: left;
	width: 269px;
	padding-right: 46px;
}
#contents div.right-side {
	position: relative;
	float: right;
	width: 269px;
	padding-right: 1px;
}
#contents div.left-side img.new,#contents div.right-side img.new {
	position: absolute;
	top:-10px;
	left: -10px;
}
#contents div.download {
	width: 218px;
	list-style: none;
	padding: 10px 30px 0px 21px;
}
#contents div.download p {
	float: left;
	display: block;
	width: 99px;
	padding-bottom: 5px;
	line-height: 1.7em;
}
#contents div.download p strong {
	padding: 3px 0px 3px 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.7em;
	color:#828282;
	background: url(/penguin_island/g_cube/images/bg_download.gif) no-repeat left 3px;
	_background: url(/penguin_island/g_cube/images/bg_download.gif) no-repeat left 2px;
}
#contents div.download p img {
	margin-top: 3px;
}
#contents div.download p.end {
	float: right;
	margin-right: 0px;
}
#contents div.download p a {
	zoom:1;
}
#bottom-menu p.caution {
	position: absolute;
	left: 0px;
	bottom: 0px;
}


h1.backnumber {
	width:280px;
	height: 60px;
	margin: 20px 0 20px 0;
	background: url(/penguin_island/g_cube/images/bg_h1-backnumber.png) no-repeat left center;
}
#contents p.back {
	position: absolute;
	right: 10px;
	top: -50px;
}
#contents div.bn-box {
	float: left;
	width: 300px;
  min-height: 150px;
	padding-bottom: 20px;
}
#contents div.bn-box-img {
	position:relative;
	float: right;
	width: 180px;
	padding:5px 0 0 5px;
	margin:0 10px 0 0;
	_margin:0;
}
#contents div.bn-box-img img.waku{
	position:absolute;
	z-index:10;
	top:0;
	left:0;
}
#contents div.dl-box {
	float: left;
	width: 100px;
	padding-left: 5px;
}
#contents div.dl-box {
	float: left;
	width: 100px;
	padding-left: 5px;
}
#contents div.dl-box p {
	padding: 5px 0px 3px;
	line-height: 1.7em;
	border-bottom: 1px dotted #828282;
}
#contents div.dl-box p strong {
	padding: 3px 0px 3px 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.7em;
	color:#828282;
	background: url(/penguin_island/g_cube/images/bg_download.gif) no-repeat left 3px;
	_background: url(/penguin_island/g_cube/images/bg_download.gif) no-repeat left 2px;
}
#contents div.dl-box p a {
	width: 90px;
	color: #828282;
	text-decoration: none;
}
#contents div.dl-box p a:hover {
	color: #7ECFFF;
}
.mb100 {
	margin-bottom: 100px !important;
}
.mb200 {
	margin-bottom: 200px !important;
}
.clear {
	clear: both;
}

*/