/*↓テンプレート共通（solwithmenu.css）*/
 * {-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}
body{ margin: 0; padding: 0; color:#333; line-height: 2em}
h1{color: white; margin: 0;}
h1,h2{ text-align: center}
h2{color: #5265AF}
a{text-decoration:none; display:inline-block;}
ul,li{ margin:0; padding:0; line-height:2; font-size:20px}
ul li{ list-style-type:none}
img{ margin: 0; margin-left: auto; margin-right: auto; padding: 0; max-width: 100%;}
.bg ul li:before{ content: url(check.gif); position:relative;top:5px; padding-right:16px; width:30px; height:30px}
ol li{ font-size:16px}
dl{ margin-left:24px}
dt{ font-size:24px; margin-left:16px;}
dd{ display: list-item;list-style-type:disc}
header{background-color: #5265AF; padding: 60px 0 50px;position: relative; margin-bottom:60px}
footer{background-color: #5265AF; padding: 60px 0 50px; text-align: center}
header h2,footer h2,small{ color: white}
header:after{ content: "";
     position: absolute;
  top: 100%;
  left: 0;
  right: 0;
     margin: auto;
  height: 0;
  width: 0;
  border: 300px solid transparent;
  border-top: 40px solid #5265AF;
  z-index:-1
}
.imagecenter{text-align: center}
section{ border-bottom: 1px solid #DDDDDD; padding: 30px 0 50px}
.drawer-hidden {
  display: none;
}

.drawer{position: absolute; top:0; right:0}
nav.drawer-content h2{color:#5265AF}
.drawer-content a{color:#5265AF;padding:0 8px; font-size:18px}
.drawer-content a:hover{ color:#ECDF40}
.drawer-list{ max-width:600px; margin:auto}
.drawer-list li {line-height:1.7}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 160px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  color:#FFFFFF
}
.drawer-open span{right:24px}
/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #FFF;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
  background:#5265AF
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
   background:#5265AF
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #EFF1F8;
  transition: .5s;
  padding:16px 0 32px 0
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}

/*↑テンプレート共通（solwithmenu.css）*/
h3{ color:#FFFFFF; font-size:18px}






@media only screen and (max-width: 768px) {
header:after{ 
 border: 100px solid transparent;
 border-top: 40px solid #5265AF;
}/*逆三角形はみ出ているのを縮小 22/8/3*/
}
div.wrap div{padding-left: 10px}
div.wrap,section{ width: 900px; max-width: 100%; margin: auto}



li span{font-weight: bold}