@charset "UTF-8";

/*reset
------------------------------------------------------------------------*/
html,body,h1,h2,p,ol,li,dl,dt,dd,tr,td,th,address{
margin:0;
padding:0;
line-height:1.0;
}
img{
vertical-align:bottom;
max-width:100%;
}
/*common
---------------------------------------------------------------------------------*/
html{
font-size:62.5%;/*remでルートの文字サイズに指定 62.5%とは10px 相当　2.0rem は20pxとなる*/
}
* {box-sizing:border-box;}/*全てにリセットをかけるのはあぶない。　どこに何を下かわからなくなる。divのために使っている*/

/*body
---------------------------------------------*/
body{
font-family:sans-serif; /*'Noto Sans JP', sans-serif;/*遅くなるということもあるが、ひとが見た時の速度は問題ない。*/
font-size:1.6rem;
background:#fff;
/*bodyにline-heightをつかっても継承されないのでテキストの記述は意味がない。*/
}

/*header
--------------------------------------------------*/
.page-header{/*ここ２限目のTC３０分　聞き直す*/
height:110px;
padding: 10px 0;
text-align:center;
}
.page-header h1{/*文字を小さくして、隠さないでｐロゴの下に記述する方法*/
padding-top:60px;
font-size:1.6rem;
font-weight:normal;
}
.page-header p{
margin-top:-60px;/*ネガティブマージンでロゴを上に引き上げる*/
}
.page-header img{
width:170px;
}
/*main
--------------------*/
.section-content{
width:100%; /*書いても書かなくてもいい。*/
padding: 40px 0;
}
.section-inner{
width:70%;
margin:0 auto;
color:#fff;
}
.section-content:nth-of-type(1) {background-color:#dec200;}
.section-content:nth-of-type(2) {background-color:#3eb6db;}
.section-content:nth-of-type(3) {background-color:#3d5a6d;
}
.section-content h2{
border-top:2px solid #fff;
border-bottom:2px solid #fff;
margin:30px;
padding:12px 0 9px;
padding-bottom:8px;
color:#fff;
text-align: center;
}
.section-content p{
margin-bottom:40px;
line-height: 1.6;
color:#fff;
font-size:2rem;
}
/*list*/
.section-content ol{
margin: 0 0 30px 8rem;/*liの要素を左に寄せないようにするため*/

}
.section-content li{
margin-bottom:20px;
font-size:2rem;
line-height: 1.6;
}
/*table*/
.section-content table{
width:80%;
margin:0 auto;
border-collapse:collapse;
background:#fff;
}
.section-content th,.section-content td{
padding:1rem;
border:1px solid #3d5a6d;
color:#3d5a6d;
}
.section-content th{
background-color:#bfe1f6;
}

/*form*/
form{
width:80%;
margin:0 auto;
}
form dt{
margin-bottom:20px;
}
form dt,form label{
color:#fff;
}
form dt::before{
content:"◆";
margin-right:10px;
}
form dd{
margin-bottom:40px;
margin-left:0;
}
input{
/*width:100%;　書いても書かなてもよい*/
border:none;/*初期値はボーダーがつくので、なしにしている*/
padding:0.5em;
font-size:1.4rem;
}
.field{/*クラス名をつけることでｄ、radioボタンに影響させない方法*/
width:100%;
}
input[type="radio"]{
/*width:1em;*/
margin-left:24px;
}
button[type="submit"]{
display:block;
cursor: pointer;/*押せる範囲を示す指マークになる*/
background-color:firebrick;/*赤めの色を使って、PCのブルー画面に対して補色の赤めの色をつかう*/
margin:40px auto 0;
width:80%;
padding: 20px 0 18px;
border-radius:6px;/*ボタンに丸みを出している。*/
border:none;/*noneにすることで、スマホで見た時に2pxくらい見えるので習慣としていれる*/
color:#fff;
font-size:2.0rem;
font-weight:700;
}
.form-img-area img {
width:100%;
}

/*footer*/
footer{
padding: 20px 0;
text-align: center;/*テキストとは違う　*/
}
.page-footer address{
font-style:normal;
margin-bottom:10px;
color:#2F4858;
line-height: 1.3;
}
small{
margin-bottom:10px;
color:#2F4858;
}