﻿@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,700&display=swap&subset=japanese');

img{ vertical-align:bottom; }

/* html element 62.5% font-size for REM use */
html { font-size:62.5%; }

body{ /*line-height:1.5;*/ font-size:11px/1.4; color:#000; font-family:"Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
ol, ul{ list-style-type:none; }


@media only screen and (max-width:767px)/*SP*/ {
.inner { width: 90%; margin: 0 auto;}
.content {margin-bottom: 50px;}

header { border-top: solid 10px #0085C9; padding:20px 0 30px 0;}
header h1 { display: block; margin: 0 auto; color: #333; font-size: 2.0rem; text-align: center; padding: 30px 0; }
header img { display: block; margin: 0 auto; width: 90%; height: auto; }

#form p {width: 90%; margin: 0 auto; ;text-align: left; font-size: 15px; line-height: 1.5;}
#form p img {margin: 10px 0;}
#form .form-area { background:#C9D9EF; padding: 30px; margin-top: 50px}
#form .form-area p { width: 100%; text-align: left; margin-bottom: 10px}
#form dl { margin-bottom: 30px; display: block; justify-content: center; align-items: center;}
#form dl dt { width: 100%; font-size: 18px; margin-bottom: 5px;}
#form dl dd { width: 100%; font-size: 18px; }
#form .form__textsmall { font-size: 12px }
#form .form__button { text-align: center;}
#form .text--red { color: red; font-weight: bold;}
#form input { width: 95%; font-size: 18px; padding: 0.5em; border-radius: 5px; border: solid 1px rgb(169, 169, 169); font-size: 18px;}
#form textarea { width: 95%; font-size: 18px; padding: 0.5em; border-radius: 5px; font-family: Arial; }
#form select { width: 95%; padding: 0.5em; border-radius: 5px; font-size: 18px; font-family: Arial; border:solid 1px #ccc; background: #fff; }

footer { background:#0085C9; text-align: center; color: #fff; padding: 20px 0 90px;}
footer p { font-size: 13px;}

.check header{ }
.check header .title{ background: none; padding-bottom: 0;}
.check #form .form-area{ margin: 0;}
.check footer{ padding: 20px 0;}
.check .thanks-text{ font-size: 15px; width: 90%; margin: 0 auto;}








}@media only screen and (min-width:768px){
.inner { width: 1000px; margin: 0 auto;}
.flex {display: flex;}
.content {margin-bottom: 100px;}
.sp_only {display: none;}

header { border-top: solid 10px #0085C9; padding-top: 20px; }
header h1 { display: block; margin: 0 auto; color: #333; font-size: 2.0rem; text-align: center; padding: 30px 0; }
header img { display: block; margin: 0 auto; }

#form p {text-align: center; font-size: 15px; line-height: 1.5;}
#form p img {margin: 10px 0;}
#form .form-area { background:#C9D9EF; padding: 50px; margin-top: 50px}
#form .form-area p:nth-child(1) { text-align: center; margin-bottom: 30px;}
#form .form-area p { text-align: left; }
#form dl dt { width: 200px; font-size: 18px; padding-top: 0.5em;}
#form dl dd { width: 300px; font-size: 18px; }
#form input { width: 250px; padding: 0.7em; border-radius: 5px; border: solid 1px rgb(169, 169, 169); font-size: 18px;}
#form textarea { width: 250px; padding: 0.7em; border-radius: 5px; font-size: 18px; font-family: Arial;}
#form select { width: 250px; padding: 0.7em; border-radius: 5px; font-size: 18px; font-family: Arial;}
#form dl { margin-bottom: 20px; display: flex; justify-content: center;}
#form .form__textsmall { font-size: 12px}
#form .form__button { text-align: center;}
#form .form__button input{ border-radius: 0;}
#form .text--red { color: red; font-weight: bold;}

footer { background:#0085C9; text-align: center; color: #fff; padding: 20px 0;}
footer p { font-size: 13px;}

.check header{ padding-bottom: 50px; text-align: center;}
.check header .title{ display: block;}
.check #form .form-area{ margin: 0;}
.check .thanks-text{ text-align: center; font-size: 15px;}

}