@charset "utf-8";
/* CSS Document */

.header{ background-color:#2571AF; border-bottom:#CEE3F4 5px solid; width:100%; padding:50px 0; margin:80px 0 0 0; text-align:center; color:#FFF; }
h1{ font-size:42px; line-height:50px; margin:0; padding:0}
h2{ font-size:22px; line-height:32px;margin:50px 0; padding:0; text-align:center;}
.submenu{ width:70%; margin:0 auto; padding:0;justify-content: space-around;   }
.submenu div { width:30%; min-width:170px; position: relative; display: inline-block; height: 64px; margin:0 30px 10px 0; 
padding:0 0 0 30px; box-sizing:border-box; text-align:center color:#006; background:#000; font-size:14px; line-height:64px; }
.submenu div:before { position: absolute; top: 0; left: -30px; content: ''; border-width: 32px 30px 32px 0; border-style: solid; border-color: transparent #000 transparent transparent;}
.submenu div:after { position: absolute; top: calc(50% - 7px); left: -10px; width: 14px; height: 14px; content: ''; border-radius: 50%; background: #fff;}
.submenu div a { color:#FFF;}
section{ margin:50px 0; width:100%; padding:0 10%; box-sizing:border-box}

.subttl{position:relative; padding:1.5rem 2rem; margin:20px 0 30px 0; border:3px solid #2571AF; border-radius: 10px; background: #CEE3F4;}
.subttl:before { position: absolute; bottom: -14px; left: 1em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px;
  border-style: solid; border-color: #2571AF transparent transparent transparent;}
.subttl:after { position: absolute; bottom: -10px; left: 1em; width: 0; height: 0; content: '';
  border-width: 14px 12px 0 12px; border-style: solid; border-color: #CEE3F4 transparent transparent transparent;}
.question { position: relative; overflow: hidden; padding: 1.5rem 2rem 1.5rem 130px; margin:20px 0; border-top: 3px solid #CEE3F4;}
.question:before { position: absolute; top: -150%; left: -100px; width: 200px; height: 300%; content: ''; -webkit-transform: rotate(25deg); transform: rotate(25deg); background: #CEE3F4;}
.question span { font-size: 40px; font-size: 4rem; position: absolute; z-index: 1; top: 5px; left: 0; display: block; padding-top: 3px; padding-left: 16px; color:#2571AF;}
.answer { position: relative; padding:0 0 30px 100px; margin:0 0 0 25px}
.answer span { position: absolute; top: 0; left: 0; padding:10px 20px; color: #e3f5d8; background: #2571AF; font-size: 30px;}
.answer span:after { position: absolute; top: calc(50% - 7px); right: -11px; width: 0; height: 0; content: ''; border-width: 7px 0 7px 12px; border-style: solid; border-color: transparent transparent transparent #2571AF;}

@media only screen and (max-width: 1100px) {
.submenu div { width:100%;margin:0 0 10px 0;}
}
@media print, screen and (max-width: 768px) {
.question { padding:10px 5px 10px 50px; margin:20px 0;}
.question:before { top: -50%; left: -20px; width:50px; height:200%; }
.question span { padding-left:5px;}
.answer { padding:0 0 30px 50px; margin:0}
.answer span { padding:10px;font-size: 30px;}

}