﻿body{
	font-family: Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
        line-height: 2.5;
        font-size: 120%;
}

      #headline {
        padding: 0.5em;
        color: black;
        font-family:  Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
        background-color: white;
        background-image: url(./design/topback.jpg);
      }
      #headline h1 {
	color: #525072;
        font-weight: 700;
        font-size: 22px;
        line-height: 1.5;
        margin-bottom: 1;
        background-color: #FFFFFF;
        padding: 10px;
      }
        
      #headline h2 {
	color: #666666;
        font-weight: 400;
        font-size: 120%;
        margin-top: 3px;
        padding-left: 10px;
        line-height: 1.5;
      }

      #headline h3 {
	color: #e6236a;
        font-weight: 700;
	font-size: 110%;
        margin-top: 3px;
        line-height: 1.5;
      }

      #headline #blurb {
        font-weight: 800;
        margin-bottom: 10px;
      }

      #headline #register {
        background-color: #39b1a4;
        background-color: rgba(243,238,249,0.4);
        padding: 0.5em;
        font-size: 18px;
      }
      #section4 div img {
        height: auto;
        width: 100%;
          }
      #section2, #section3{
        box-sizing: border-box;
        padding: 10px;
      }

      #section2 h2, #section3 h2  {
        margin-top: 0;
        line-height: 1.5;
      }

      #section2 {
        background-color: hsl(0, 0%, 90%);
        font-family:  Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
        font-size: 110%;
      }

      #section2 h2 {
	color: #333333;
        font-weight: 400;
        text-align: left;
        margin-bottom: 5px;
        margin-top: 10px;
        padding-top: 5px;
        padding-left: 8px;
        background-color: hsl(192, 56%, 80%);
      }

      #section2 h2 + p {
      }

      #section2 div {
      }

      #section2 div img {
        height: auto;
        width: 100%;
      }

      #section3 {
        background-color: #f5f5f5;
        font-family:  Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
        font-weight: 400;
        text-align: left;
        margin: auto;
        font-size: 110%;
      }

      #section3 h2 {
        font-weight: 400;
        text-align: left;
        margin-bottom: 5px;
        margin-top: 10px;
      }

      #section3 h2 + p {
        text-align: center;
      }

      #section3 div img {
        height: auto;
        width: auto;
      }
h3 {
	color: #f25990;
        background-color: hsl(335, 54%, 95%,);
        font-weight: 700;
	padding-top: 1px;
	padding-left: 5px;
	margin:0.5em 0px;
	margin-right: 5px;
	margin-left: 5px;
	clear:both;
}


      footer {
        font-family:  Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
        font-weight: 300;
        text-align: center;
        background-color: hsl(8, 60%, 30%);
        color: white;
        padding-bottom: 20px;
        padding-top: 20px;
      }

      thead {
        font-weight: bold;
      }

      tbody {
        text-align: center;
      }
.marker {
background: linear-gradient(transparent 60%, #fef26d 60%);
}

.sample1{
    text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}
.sample-box-1 {
    border: 2px solid #82636b;
    border-radius: 200px 15px 185px 15px / 15px 200px 15px 185px;
    margin: 0.5em 0.5em 1em 0.5em;
    padding: 10px 25px;
    background-color: #39b1a4;
    background-color: rgba(243,238,249,0.4);
}
.square_btn{
   position: relative;
   display: inline-block;
   font-weight: bold;
   padding: 0.25em 0;
   margin: 0.2em 0; 
   text-decoration: none;
   color: #008fe7;   
}

.square_btn {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 2px 6px 2px 8px;
    text-decoration: none;
    color: #FFFFFF;
    background-color: hsl(338, 74%, 40%);
    transition: .4s;
}

.square_btn:hover {
    background: #91b5fb;
}

.square_btn2{
   position: relative;
   display: inline-block;
   font-weight: bold;
   padding: 0.1em;
   text-decoration: none;
   color: #004a79;   
}

.square_btn2:before{
   position: absolute;
   content: '';
   width: 100%;
   height: 2px;
   top:100%;
   left: 0;
   border-radius: 3px;
   background:#0076c1;
   transition: .2s;
}

.square_btn2:hover:before {
    top: -webkit-calc(100% - 2px);
    top: calc(100% - 2px);
}

      @media screen and (min-width: 798px) {
body{
	font-family: Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
        line-height: 2;
        font-size: 100%;
}
         
.container {
            margin: auto;
            max-width: 1080px;
          }
          
#headline h1 {
        font-size: 28px;
      }
        
#headline h2 {
        font-size: 18px;
      }

#headline {
            padding: 20px 20px;
          }
          
#headline #blurb {
            float: left; 
            width: auto;
            font-size: 17px;
            box-sizing: border-box;
            padding-right: 10px;
            padding-top: 10px;
          }

#headline #register {
            float:right;
            font-size: 17px;
            padding: 20px;
            width: 50%;
            box-sizing: border-box;
          }

          #headline br {
            clear: both;
          }
          
#section1 #section2, #section3{
            box-sizing: border-box;
            padding: 20px 20% 20px 20%;
          }
#section2 {
        font-size: 100%;
      }   
#section3 {
        font-size: 100%;
      }                            

#section2 div img {
            height: auto;
            width: 49%;
            margin: 0%;
          }
          
#section3 div img {
            height: auto;
            width: auto;
            margin: 0%;
          }
#section4 div img {
            height: auto;
            width: 100%;
            margin: 0%;
          }
#section2 h2, #section3 h2  {
        font-size: 24px;
      }
#section2 h3, #section3 h3 {
        font-size: 20px;
      }

img {
        -ms-interpolation-mode: bicubic; 
        border: 0px;
}
