
/*----------------

      パーツ


.sun {
  text-align: center;
  width: 300px;
	margin: 0 auto;
}
.sun img {
  width: 300px;
  height: auto;
}
.sun p {
  text-align: center;
  line-height: 3rem;
  font-size: 2.5rem;
  color: #ffffff;
  z-index: 10;
  transform: translateY(-175px);
}
----------------*/

/*---- 太陽（回転）css ----*/
.sun {                /* 親分 */
  text-align: center;
}
.a-rotate img {   /* 子分 */
  max-width: 100%;
  width: 300px;
}
.a-rotate-kotoba {       /* 子分言葉 */
  text-align: center;
  line-height: 3rem;
  font-size: 2.5rem;
  color: #ffffff;
  transform  : translateY(-300%);  /* 文字の位置ずらし */
}
.a-rotate {       /* 回転のために中心軸を指定する 【 (円の中心座標)/(viewBoxの最大値) 】 ％ */
transform-origin:calc(100% * 297.636 / 595.279) calc(100% * 420.896 / 841.891);
}

.a-rotate {      /* アニメーション 5秒・周り続ける */
transform-origin:calc(100% * 297.636 / 595.279) calc(100% * 420.896 / 841.891);
Animation:a-rotate 5s linear infinite;
}

@keyframes a-rotate {     /* アニメーション １周する */
 to {
transform:rotate(1turn);
 }
}


/*---- 小見出し ----*/
.sub-headline1 {
 /*text-align: center;*/
    font-size: 2rem;
    letter-spacing: 0.5rem;
    width: 307px;
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 20px;
    justify-content: center;
    margin: 0 auto;
}

/*---- ダウンロード　リンクボタン ----*/
.download {
  margin: 0 auto;
 letter-spacing: 0.5rem;
 width: 200px;
 background-color: #1274bf; /*理念青*/
 border-radius: 20px;
}
.download p {
   text-align: center;
 font-size: 1.5rem;
 color: #ffffff;
}
.download a {
  text-decoration: none;
}

/*---- 手描き風吹き出し（理念） ----*/
.ri-fukidashi {
  text-align: center;
}
.ri-fukidashi img {
  max-width: 100%;
  width: 650px;
}
.ri-fukidashi p {
  font-size: 3.5rem;
  color: #ffffff;
  z-index: 10;
  transform: translateY(-110px);
}

/*---- 手描き風吹き出し（かんきょう） ----*/
.ka-fukidashi {
  text-align: center;
  position: relative;
}
.ka-fukidashi img {
  max-width: 100%;
  width: 650px;
}
.ka-fukidashi p {
  font-size: 3.5rem;
  color: #ffffff;
  z-index: 10;
  transform: translateY(-110px);
}

@media (max-width: 750px){
	.ka-fukidashi p{
		font-size: 3rem;
		transform: translateY(-100px);
	}
}

@media (max-width: 700px) {
	.a-rotate-kotoba {       /* 子分言葉 */
  transform  : translateY(-280%);  /* 文字の位置ずらし */
}
}

@media (max-width: 663px) {
	.ri-fukidashi p{
		font-size: 3rem;
		transform: translateY(-99px);
	}
}

@media (max-width: 640px) {
	.a-rotate-kotoba {       /* 子分言葉 */
  transform  : translateY(-260%);  /* 文字の位置ずらし */
}
}

@media (max-width: 600px) {
  .ri-fukidashi img {
	max-width: 100%;
    width: 350px;
  }
  .ri-fukidashi p {
    font-size: 2rem;
    transform: translateY(-60px);
  }
	
	.ka-fukidashi img {
	max-width: 100%;
    width: 350px;
  }
  .ka-fukidashi p {
    font-size: 2rem;
    transform: translateY(-60px);
  }
	
	.a-rotate img {       /* 子分 */
    max-width: 100%;
    width: 260px;
}

	.sub-headline1{
		font-size: 1.6rem;
		width: 81vw;
	}
	
		.a-rotate-kotoba {       /* 子分言葉 */
  transform  : translateY(-270%);  /* 文字の位置ずらし */
}
}

@media (max-width: 412px) {
	.a-rotate img{
		width: 255px;
	}
}

@media (max-width: 385px) {
	.ri-fukidashi p{
		font-size: 1.6rem;
		transform: translateY(-54px);
	}
}

@media (max-width: 330px) {
	.ka-fukidashi p{
		transform: translateY(-53px);
	}
}


/*---- 手描き風吹き出し（入園） ----*/
.nyu-fukidashi {
  text-align: center;
}
.nyu-fukidashi img {
  max-width: 100%;
  width: 650px;
}
.nyu-fukidashi p {
  font-size: 3rem;
  color: #ffffff;
  z-index: 10;
  transform: translateY(-120px);
}

@media (max-width: 600px) {
  .nyu-fukidashi img {
	max-width: 100%;
    width: 350px;
  }
  .nyu-fukidashi p {
    font-size: 1.8rem;
    transform: translateY(-70px);
  }
}

/*---- 手描き風吹き出し※hand付き（あかみ）----*/
.ak-fukidashi-set {
  text-align: center;
  margin: 0 auto;
  color: #ffffff;
}

.ak-hand {
  margin: 0 auto;
  width: 130px;
  transform: translate(0px, 80px);
}

.ak-hand img {  /* 手　画像位置 */
 max-width: 100%;
  width: 130px;
  height: auto;
  /* transform: translate(950px, -130px); */
}
.ak-hand p {   /* 手　画像にのる文字 */
display: inline-block;
    font-size: 2.5rem;
    line-height: 2.5rem;
    color: #ffffff;
    transform: translate(-3px, -64px) rotate(30deg);
    text-align: center;
}
.ak-hand p span {
  font-size: 2rem;
}

.ak-fukidashi img {
  max-width: 100%;
  width: 650px;
  height: auto;
}
.ak-fukidashi p {
    font-size: 4rem;
    transform: translateY(-147px);
    text-align: center;
}

/*---- 手描き風吹き出し（あかみ）※全てSVG ----*/
.ak-fukidashi-hand {
  text-align: center;
}
.ak-fukidashi-hand img {
  max-width: 100%;
  width: 650px;
}

@media (max-width: 1000px){
	.ak-hand img{
		width: 110px;
	}
	
	.ak-hand{
		transform: translate(0px, 65px);
	}
	
	.ak-hand p{
		font-size: 2rem;
		line-height: 2rem;
		transform: translate(-2px, -57px) rotate(30deg);
	}
}

@media (max-width: 700px) {
	.ak-fukidashi p {
    font-size: 3rem;
    transform: translateY(-127px);
    text-align: center;
}
	
}

@media (max-width: 640px) {
	.ak-fukidashi p {
    font-size: 3rem;
    transform: translateY(-118px);
    text-align: center;
}
	
}

@media (max-width: 600px) {
	.ak-fukidashi-set {
  width: 80vw;
}
	
  .ak-fukidashi-hand img {
    width: 360px;
  }
	
	.ak-fukidashi p{
		font-size: 2.5rem;
		transform: translateY(-106px);
	}
	
	.ak-hand{
		transform: translate(9px, 15px);
	}
	
	.ak-hand p{
		font-size: 1.6rem;
		line-height: 1.6rem;
		transform: translate(-66px, -12px) rotate(30deg);
	}
	
	.ak-hand img{
		width: 85px;
	}
}

@media (max-width: 555px) {
	
	.ak-fukidashi p{
		transform: translateY(-100px);
	}
}

@media (max-width: 525px) {
	
	.ak-fukidashi p{
		transform: translateY(-90px);
	}
}


@media (max-width: 400px) {
.ak-fukidashi p{
	    font-size: 2rem;
		transform: translateY(-74px);
	}
	
	.ak-hand{
		transform: translate(6px, 10px);
	}
	
	.ak-hand p{
		font-size: 1rem;
		line-height: 1rem;
		transform: translate(-42px, -7px) rotate(30deg);
	}
	
	.ak-hand img{
		width: 50px;
	}
	
}

@media (max-width: 350px){
.ak-fukidashi p{
    font-size: 1.8rem;
    transform: translateY(-62px);
}
}


/*---- 手描き風吹き出し※hand付き（あかみ）改変----*/

.ak2-hand{
	position: absolute;
    top: -76%;
    left: 50%;
    margin-left: -61px;
}

.ak2-handp{
	position: absolute;
    top: -36px;
    left: 50%;
    margin-left: -20px;
    font-size: 2.5rem;
    transform: rotate(30deg);
    color: #fff;
}

.ak2-fukidaship{
	font-size: 4rem;
    top: 20%;
    position: absolute;
    left: 50%;
    margin-left: -174px;
    color: #fff;
}

@media (max-width: 650px){
	.ak2-hand{
		top: -74%;
		margin-left: 0;
		transform: translateX(-50px);
	}
	
	.ak2-hand img{
		width: 19vw;
	}
	
	.ak2-fukidashi img{
		width: 97vw;
	}
	
}

@media (max-width: 600px){
	.ak2-handp{
		font-size: 2rem;
		top: -25%;
		margin-left: -14px;
	}
	
	.ak2-fukidaship{
		font-size: 3rem;
		top: 27%;
		margin-left: -135px;
	}
}

@media (max-width: 500px){
	.ak2-handp{
		font-size: 1.6rem;
		top: -24%;
		margin-left: -25px;
	}
	
	.ak2-fukidaship{
		font-size: 2.5rem;
		margin-left: -95px;
	}
}

@media (max-width: 400px){
	.ak2-handp{
		font-size: 1.3rem;
	}
	
	.ak2-fukidaship{
		font-size: 2rem;
	}
}


/*---- 手描き風吹き出し※hand付き（みちくさ）----*/

.mi-fukidashi img {
  max-width: 100%;
  width: 650px;
  height: auto;
}
.mi-fukidashi p {
    font-size: 4rem;
    transform: translateY(-138px);
    text-align: center;
}

.mi-hand {
  margin: 0 auto;
  width: 130px;
  transform: translate(0px, 50px);
}

.mi-hand img {  /* 手　画像位置 */
 max-width: 100%;
  width: 130px;
  height: auto;
  /* transform: translate(950px, -130px); */
}
.mi-hand p {   /* 手　画像にのる文字 */
display: inline-block;
    font-size: 2rem;
    line-height: 3rem;
    color: #ffffff;
    transform: translate(-5px, -56px) rotate(27deg);
    text-align: center;
}
.mi-hand p span {
  font-size: 2rem;
}

@media (max-width: 700px) {
	.mi-fukidashi p {
    font-size: 3rem;
    transform: translateY(-110px);
    text-align: center;
}
	
}

@media (max-width: 640px) {
	.mi-fukidashi p {
    font-size: 3rem;
    transform: translateY(-105px);
    text-align: center;
}
	
}

@media (max-width: 600px) {
	
  .ak-fukidashi-hand img {
    width: 360px;
  }
	
	.mi-fukidashi p{
		font-size: 2.5rem;
		transform: translateY(-90px);
	}
	
	.mi-hand{
		transform: translate(0px, 45px);
	}
	
	.mi-hand p{
		font-size: 2rem;
		line-height: 2.5rem;
		transform: translate(-5px, -50px) rotate(30deg);
	}
	
	.mi-hand img{
		width: 103px;
	}
}

@media (max-width: 500px){
	.mi-fukidashi p{
		transform: translateY(-75px);
		font-size: 2rem;
	}
	
	.mi-hand p{
		font-size: 1.6rem;
		transform: translate(-5px, -43px) rotate(30deg);
	}
	
	.mi-hand img{
		width: 80px;
	}
}

@media (max-width: 430px){
	.mi-fukidashi p{
		transform: translateY(-65px);
	}
}

@media (max-width: 400px){
	.mi-hand p{
		font-size: 1rem;
		transform: translate(-51px, -13px) rotate(30deg);
	}
	
	.mi-hand img{
		width: 55px;
	}
	
	.mi-hand{
		transform: translate(14px, 15px);
	}
}


@media (max-width: 350px){
	.mi-fukidashi p{
		transform: translateY(-55px);
		font-size: 1.6rem;
	}
}


/*---- 手描き風吹き出し小（あかみ.メイプル共通）※文字つける ----*/
.fukidashi-tiny-set {
  text-align: center;
}
.fukidashi-tiny-00 {
  margin: 0 auto;
}
.fukidashi-tiny00 img {
  max-width: 100%;
  text-align: center;
  width: 250px;
  height: auto;
}
.fukidashi-tiny00 p {
  display: inline-block;
  text-align: left;
  font-size: 2.5rem;
  line-height: 3rem;
  color: #ffffff;
  transform: translate(0px, -190px);
}
@media (max-width: 600px) {
  .fukidashi-tiny-set {
    text-align: center;
  }
  .fukidashi-tiny00 img {
    text-align: center;
	max-width: 100%;
    width: 250px;
	  height: auto;
  }
  .fukidashi-tiny00 p {
    display: inline-block;
    text-align: left;
    font-size: 2.5rem;
    line-height: 3rem;
    color: #ffffff;
    transform: translate(0px, -230px);
}
}

/*---- .sun参照ふき出し（小） ----*/
.fukidashi {
  text-align: center;
  width: 20vw;
	margin: 0 auto;
    position: absolute;
    top: 74%;
	left: 6vw;
}
.fukidashi img {
  max-width: 100%;
  width: 250px;
  height: auto;
}
.fukidashi p {
  text-align: center;
  line-height: 3rem;
  font-size: 2.5rem;
  color: #ffffff;
  z-index: 10;
  transform: translateY(-192px);
}

/*---- 手描き風吹き出し小（あかみ.メイプル共通）※全てSVG ----*/
.fukidashi-tiny {
  margin: 0 auto;
  width: 250px;
}
.fukidashi-tiny img {
  max-width: 100%;
  width: 250px;
}
@media (max-width: 600px) {

}



.pyramid {
  text-align: center;
  font-size: 7rem;
  font-weight: bolder;
  color: #1274bf;  /*---- 青 ----*/
}
.pyramid img {
  max-width: 100%;
  width: 750px;
}

@media (max-width: 600px) {
  .pyramid {
    font-size: 3.5rem;
  }
  .pyramid img {
	max-width: 100%;
    width: 360px;
  }
}


/*---- 共通リンクボタン（内閣府）　あかみ用 ----*/
.link-btn {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2rem;
  background-color: #ff4500;
  width: 37vw;
  height: 70px;
  margin-bottom: 5%;
}
.link-btn p {
  display: inline-block;
  text-align: center;
  color: #ffffff;
  transform: translateY(40%);
  -webkit-transform: translateY(40%);
}
.link-btn a {
  text-decoration: none;
}

/*---- 共通リンクボタン オレンジ　あかみ用 ----*/
.link-btn2 {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2rem;
  background-color: #fb9b00;
  width: 37vw;
  height: 70px;
 margin-bottom: 5%;
}
.link-btn2 p {
  display: inline-block;
  text-align: center;
  color: #ffffff;
	  transform: translateY(40%);
  -webkit-transform: translateY(40%);
}
.link-btn2 a {
  text-decoration: none;
}

/*---- 共通リンクボタン　濃オレンジ ----*/
.link-btn3{
    font-size: 2rem;
    line-height: 2.5rem;
    background-color: #ff4500;
    width: 440px;
    height: 80px;
    color: #fff;
    margin: 0 0 0 auto;
    margin-bottom: 5%;
	padding: 2%;
}

.link-btn3 p {
  display: inline-block;
  text-align: center;
  color: #ffffff;
  transform: translateY(40%);
  -webkit-transform: translateY(40%);
}
.link-btn3 a {
  text-decoration: none;
  color: #fff;
}

/*---- 共通リンクボタン オレンジ　----*/
.link-btn4{
    font-size: 2rem;
    line-height: 2.5rem;
    background-color: #fb9b00;
    width: 440px;
    height: 70px;
    color: #fff;
    margin: 0 0 0 auto;
    margin-bottom: 5%;
	padding-top: 1%;
}

.link-btn4 p {
  display: inline-block;
  text-align: center;
  color: #ffffff;
  transform: translateY(40%);
  -webkit-transform: translateY(40%);
}
.link-btn4 a {
  text-decoration: none;
  color: #fff;
}

@media (max-width:1306px){
	.link-btn2{
		height: 95px;
	}
}

@media (max-width: 1012px) {
.link-btn p {
  transform: translateY(13%);
  -webkit-transform: translateY(13%);
}
	
	.link-btn2 p {
  transform: translateY(13%);
  -webkit-transform: translateY(13%);
}
	
	.link-btn2{
		height: 74px;
	}
}

@media (max-width: 658px) {
	.link-btn2{
		height: 100px;
	}
}


@media (max-width: 600px) {
	
	.link-btn{
		font-size: 1.3rem;
		height: 74px;
	}
	
	.link-btn2{
		font-size: 1.3rem;
	}
	
.link-btn3 {
   font-size: 1.5rem;
    width: 90vw;
    height: auto;
}
	
	.link-btn4 {
   font-size: 1.5rem;
    width: 90vw;
    height: auto;
}
}


@media (max-width: 443px) {
.link-btn {
    width: 36vw;
}
	
	.link-btn2 {
    width: 36vw;
}
}

@media (max-width: 420px) {
.link-btn3 {
    width: 90vw;
}
	
	.link-btn4 {
    width: 90vw;
}
}

@media (max-width: 369px) {
	.link-btn2{
		height: 140px;
	}
}

@media (max-width: 361px) {
	.link-btn{
		height: 97px;
	}

}


/*---- acrobat reader リンク ----*/
.acrobat {
  display: flex;
  width: 1000px;
	margin: 0 auto;
  padding: 30px;
	border: 1px solid #000;
  line-height: 2rem;
}
.acrobat img {
  max-width: 100%;
  width: 80px;
  margin-right: 25px;
}
.acrobat-text {
  width: 70vw;
	text-align: left;
	font-size: 1.6rem;
}

@media (max-width: 1100px) {
  .acrobat {
    width: 90vw;
    font-size: 1.2rem;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid #000;
    line-height: 1.6rem;
  }
	
	.acrobat-text{
		width: 75vw;
		padding-top: 1%;
	}
}


@media (max-width: 600px) {

  .acrobat img {
    width: 60px;
  }
  .acrobat-text {
	font-size: 1.3rem;
	padding-top: 0;
  }
}
