body {
  background: rgb(250, 234, 200);
  padding: 0px 7% 7% 7%;
  line-height: 1.8em;
  width: auto;
  box-sizing: border-box
}
header {
  width: 100%;
  height: 100px;
  color: #fff;
  background: rgb(100, 206, 107);
  display: flex;
  justify-content: space-between;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
}

@media screen and (max-width: 1115px/*切り替える画面サイズを指定*/){
  header {display: none;}
}/*ここでヘッダーの表示/非表示切り替え*/

@media screen and (min-width: 1115px/*切り替える画面サイズを指定*/){
  body{
  padding-top:120px;}}/*スマホ表示の空白削除*/


.header-menu {
  display: flex;
  justify-content: flex-start;
  list-style: none;

}
.header-menu__item {
  margin: 0 20px;

}
#fixed-header {
  position: fixed;
  top: -70px;  
  width: 95.7%;
  height: 70px;
  line-height: 40px;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background: rgb(100, 206, 107);
  box-sizing: border-box;
  transition: .5s; /* アニメーションタイミング */
  display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
 left:0px;
 width:100%; 

}

#fixed-header .logo {
  padding: 20px;
font-size: 18px;
color: #fff;
letter-spacing: .2em;
}
#fixed-header .menu {
  position: relative;
  width: 50px;
  height: 50px;
    right: 10px;
    cursor: pointer;
    background: rgb(240, 244, 145);
    border: none;

    

  }
#fixed-header .menu span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  margin: auto;
  background: rgb(255, 255, 255);
  
}
#fixed-header .menu span:nth-of-type(1) {
transform: translateY(-10px);
}
#fixed-header .menu span:nth-of-type(3) {
  transform: translateY(10px);
}

#fixed-header.is-show {
  top: 0;
}

#content {
  height: 1000px;
}
.text {
  font-size: 2em;
  text-align: center;
  margin: 2em 0 0;
}
footer {
  width: 100%;
  font-size: 2em;
  text-align: center;
  color: #444;
  background: #edf0f2;
  padding: 1em;
  box-sizing: border-box;
}
h1{
text-align:center;
}

h5 {
  padding: 0.4em;/*文字周りの余白*/
  color: #000000;/*文字色*/
  background: 	#BAD3FF;/*背景色*/
  border-left: solid 5px #00cc66;/*左線（実線 太さ 色）*/
  font-size: 0.6em;
}
.gaiyou{
text-align:center;
}

b{
font-size: 0.5em;
}

.balloon-set-box {
display: flex;
flex-wrap: wrap;
}
.balloon-set-box.left { /* 左 */
flex-direction: row
}
.balloon-set-box.right { /* 右 */
flex-direction: row-reverse; /* アイコンと吹き出しの並びを入れ替える */
}
.balloon {
position: relative; /* 三角の位置を固定するために設定 */
display: inline-block;
margin: 10px 20px 20px; /* 上 左右 下のマージン */
padding: 40px 10px; /* ふきだし内の余白 */
background: #d7ebfe; /* 背景色 */
border-radius: 10px;
}


.balloon::after {
content: '';
border: 14px solid transparent;
border-top-color: #d7ebfe;
position: absolute;
top: 20;
}
.left .balloon::after { /* 左側からの三角の位置 */
left: -10px;
}
.right .balloon::after { /* 右側からの三角の位置 */
right: -10px;
}
/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #7abfff;
  margin-left: 110px;          /* 左に余白を設ける */
  width:fit-content;
  max-width: 70%;
  text-align: left; /* テキストの揃え */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
  z-index: 10;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #7abfff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #e79696;
  margin-right: 110px;          /* 右に余白を設ける */
  z-index: 10;
  width:fit-content;
  max-width: 70%;
  margin:auto 110px auto auto;
  text-align: left; /* テキストの揃え */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  right: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #e79696;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

 /* 戻る次へボタン */
.botton {
  position:relative;
  left:0px;
  display: inline-block;
  font-weight: bold;
  padding: 1em 2.5em;
  text-decoration: none;
  border-left: solid 4px #668ad8;
  border-right: solid 4px #668ad8;
  color: #668ad8;
  background: #e1f3ff;
  transition: .4s;
  
}

.botton:hover {
  background: #668ad8;
  color: #FFF;
}

.rightbotton {
  position:absolute;
  right:65px;
  display: inline-block;
  font-weight: bold;
  padding: 1em 2.5em;
  text-decoration: none;
  border-left: solid 4px #668ad8;
  border-right: solid 4px #668ad8;
  color: #668ad8;
  background: #e1f3ff;
  transition: .4s;
}

.rightbotton:hover {
  background: #668ad8;
  color: #FFF;
}

/* 見出しデザイン */
h6 {
  position: relative;
  color: #158b2b;
  font-size: 30px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}
h6:before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #7bd88c;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* 囲い枠(青＋点線) */
.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #f0f7ff;
  border: dashed 2px #5b8bd0;/*点線*/
}
.box p {
  margin: 0; 
  padding: 0;
}

/* 囲い枠(かぎかっこ) */
.box1 {
  padding: 2em;
  position: relative;
  text-align: center;
}

.box1::before, .box1::after {
  content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

.box1::before {
	border-left: 5px solid #5b8bd0;
	border-top: 5px solid #5b8bd0;
	top: 0;
	left: 0;
}

.box1::after {
	border-right: 5px solid #5b8bd0;
	border-bottom: 5px solid #5b8bd0;
	bottom: 0;
	right: 0;
}

/* 太字立＋緑の棒線 */
h7{
  position: relative;
  font-size: 20px;
}

h7:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: -webkit-repeating-linear-gradient(-45deg, #7bd88c, #7bd88c 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #7bd88c, #7bd88c 2px, #fff 2px, #fff 4px);
  opacity: 1;
}
 

.btn {
  border-radius: 5px;
  background-color: #7bd88c;
  padding: 10px;
  text-decoration: none;
  color: white;
  text-align: center;
}
p {
  padding-left: 90%;
}
h2 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}
.ribbon8 {
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  font-size: 18px;/*フォントサイズ*/
  color: #FFF;/*フォントカラー*/
  background: #a6d3c8;/*背景色*/

}

.ribbon8:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
}

.ribbon8:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-left: solid 20px rgb(149, 158, 155);/*折り返し部分*/
}
.box25{
  position: relative;
  background: #fff0cd;
  box-shadow: 0px 0px 0px 5px #fff0cd;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}
.box25:after{
  position: absolute;
  content: '';
  right: -7px;
  top: -7px;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: #ffdb88 #fff #ffdb88;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
  margin: 0; 
  padding: 0;
}

.box26 {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #6c9adb;
  border-radius: 8px;
}
.box26 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: rgb(250, 234, 175);
  color: #6c9adb;
  font-weight: bold;
}
.box26 p {
  margin: 0; 
  padding: 0;
}

.box27 {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #f53fa3;
  border-radius: 8px;
}
.box27 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: rgb(250, 234, 175);
  color: #f53fa3;
  font-weight: bold;
}
.box27 p {
  margin: 0; 
  padding: 0;
}

/*箇条書き*/
ul1, ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

ul1 li, ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}


/*ここから🍔*/

#fixed-header .menu-btn {
  position: relative;
  display: flex;
  height: 50px;
  width: 50px;
  right: 10px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #3584bb;
    cursor: pointer;
    border: none;
}
  
#menu-btn-check {
      display: none;
  }

#fixed-header .menu-btn span,
#fixed-header .menu-btn span:before,
#fixed-header .menu-btn span:after {
  content: '';
  display: block;
  height: 2px;
  width: 25px;
  border-radius: 2px;
  background-color: #ffffff;
  position: absolute;
}
#fixed-header .menu-btn span:before {
  bottom: 8px;
}
#fixed-header .menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: #ffffff00;
    /*メニューオープン時は真ん中の線を透明にする*/
    
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

.menu-content {
  width: 100%;
  height: 80%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  background-color: #3584bb;
}
.menu-content ul {
  padding: 50px 10px 0;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 17px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 2px 15px 2px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #3584bb;
    transition: all 0.5s;/*アニメーション設定*/
}

.menu-content {
    width: auto;
    min-width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #3584bb;
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
  left: auto;/*メニューを画面内へ*/
}


/*ここまで🍔*/

.box6 {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #f0f7ff;
  border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
  margin: 0; 
  padding: 0;
}

/*ボックス全体*/
.accbox {
  margin: 2em 0;
  padding: 0;
  max-width: 1000px;/*最大幅*/
}

/*ラベル*/
.accbox label {
  display: block;
  margin: 1.5px 0;
  padding : 11px 12px;
  color :#2f8fcf;
  font-weight: bold;
  background :#a4cbf3;
  cursor :pointer;
  transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
  background :#85baef;
}

/*チェックは隠す*/
.accbox input {
  display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
  height: auto;
  padding: 5px;
  background: #eaeaea;
  opacity: 1;
}

table {
  text-align: center;
}

.btn-circle-3d {
  display: inline-block;
  text-decoration: none;
  background: #ff8181;
  color: #FFF;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #bd6565;
  transition: .4s;
}

.btn-circle-3d:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  border-bottom: none;
}

.box15 {
  padding: 0.2em 0.5em;
  margin: 2em 0;
  color: #565656;
  background: #ffeaea;
  box-shadow: 0px 0px 0px 10px #ffeaea;
  border: dashed 2px #ffc3c3;
  border-radius: 8px;
}
.box15 p {
  margin: 0; 
  padding: 0;
}