* {-webkit-box-sizing: border-box;-moz-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}
h3{ font-size:20px; font-weight:normal; text-align:center}
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}
.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}
img{ margin: 0; margin-left: auto; margin-right: auto; padding: 0; padding-top: 30px; max-width: 100%;}
header{background-color: #5265AF; padding: 60px 0 50px;position: relative; margin-bottom:60px}
footer{background-color: #5265AF; padding: 60px 0 50px; text-align: center}
.bg_blue{background-color: #5265AF; color:white; text-align: center; padding:40px 10px 48px ;}
a{padding:16px 32px; border-radius:5px;  -webkit-transition: all .3s;
  transition: all .3s; margin:0 auto; color:#5265AF; text-align:center}

.form_link{ width:80%; display:block; margin: 32px auto}
.bg_blue h2,.bg_blue a{color: white; margin:8px;}
.bg_blue a{border:1px solid #FFF; }
.bg_blue a:hover{ color:#5265AF; background-color:#FFF; border:1px solid #5265AF}
.half a{ width:92%; background:#EFF1F8 ; border-radius:5px; margin:4%; padding:16px; color:#333333}
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
}
#video { max-width:640px; width:100%; height:auto}
.video_wrap{max-width:800px; margin:auto}
.video{
  position:relative;
  width:100%;
  max-width:640px;
  padding-top:56.25%;
  margin:auto;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
section .half, div.wrap .half{width: 48%; display: inline-block; vertical-align: top}
div.wrap .half{padding-left: 10px}
a.form_link{width:80%; max-width:600px; display:block; margin: 16px auto 40px; padding:16px 32px; border-radius:5px;  -webkit-transition: all .3s;
  transition: all .3s; border:1px solid #5265AF; color:#5265AF; text-align:center}
a.form_link:hover{color:#FFF; background-color:#5265AF; border:1px solid #FFF}
a.form_link:hover h2{color:#FFF}
.balloon {
	position: relative;
	max-width:650px;
	width: 100%;
	min-width: 115px;
	text-align: center;
	z-index: 0;
	margin:40px auto -24px;
}
/*
.balloon:before {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #F6F6F6 transparent transparent transparent;
	z-index: 0;
}
.balloon:after {
	content: "";
	position: absolute;
	bottom: -12px; left: 50%;
	margin-left: -10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #D5C715 transparent transparent transparent;
	z-index: -1;
}*/
.balloon h2{color:#333; font-size:18px; line-height:1.5}
.balloon p{ margin:0 0 20px; font-size:12px; line-height:1.5}

.balloon {
-webkit-animation: arrow-move09 2s infinite ease-in-out;
animation: arrow-move09 2s infinite ease-in-out;
}
@-webkit-keyframes arrow-move09 {
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
70% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes arrow-move09 {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
70% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

.flex{display:flex; flex-wrap: wrap; text-align:left}
.flex3 > div{ width:33%; padding:16px;  text-align: center;}
.flex3 > div p{text-align:left}
.flex4 > div{ width:25%; padding:16px}
.flex img{ width:100%; padding:0 24px;   max-width: 150px; opacity: 0.7;}

.heading-24 {
    position: relative;
    padding-top: 1.5em;
    color: #333333;
}

.heading-24::before {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: -1;
    color: #dee5ff;
    font-size: 3em;
    line-height: 1;
    content: attr(data-number);
    pointer-events: none;
}
.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #5265AF;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}
/*紹介動画横並び*/
#flex{display:flex; justify-content:space-around;}
.flex_video{width:400px; max-width:100%}


/*紹介動画横並び解除*/
@media only screen and (max-width: 930px) {
#flex{display:block;}
.flex_video{width:auto ; max-width:none;}
}

@media only screen and (max-width: 768px) {
section .half, div.wrap .half{
width:100%; display:block;padding-left: 0}
header:after{ 
 border: 100px solid transparent;
 border-top: 40px solid #5265AF;
}
}

@media only screen and (max-width: 600px) {
h3{ font-size:16px; text-align:left}
p{ text-align:left}
}

div.wrap,section{ width: 900px; max-width: 100%; margin: auto}
div.bg{ padding: 80px 10px; background-color: #EFF1F8; position: relative; }
.imagecenter{text-align: center}
section{ border-bottom: 1px solid #DDDDDD; padding: 30px 10px 50px}
div section:last-of-type{ border-bottom:none}
li span{font-weight: bold}

.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;/* メニューを画面に入れる */
}