@charset "UTF-8";


/**********************************************
  全体基本設定
***********************************************/

/* 要素のフォントサイズやマージン、パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; /* 背景色透明 */
  font-weight: normal;
}

/* HTML5未対応ブラウザに全体の設定 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* img要素の縦方向の揃え位置を親要素の下揃え */
img {
  vertical-align: bottom;
}

/* a要素のフォントサイズ等をリセット、フォントの縦方向の揃え位置を親要素のベースライン揃え */
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* ul, ol のマーカー（行頭記号）を表示しない */
ul, ol {
  list-style: none;
}

/* 入れ子の ul, ol を一文字分字下げ */
ul ul, ol ul, ol ol {
  margin-left: 1em;
}

/* delタグ内のテキストに打ち消し線を付ける */
del {
  text-decoration: line-through;
}

/* blockquote要素、q要素の前後にブラウザ独自の引用符を追加しない */
blockquote, q {
  quotes: none;
}

/* blockquote要素、q要素の前後にコンテンツを追加しない */
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

/* テーブルのセル間隔をなくし、デフォルトのボーダーを指定 */
table {
  border-collapse: collapse;
  border-spacing: 0; /* border-collapse:separate時のセル間隔、collapse時無効 */
  border: solid 1px black;
}

/* padding と border の幅を要素の幅と高さに含める */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


/**********************************************
  全体カラー
***********************************************/

body {
  color: black;
}



/**********************************************
  全体フォント種類・サイズ・行間
***********************************************/
body {
  font-family:
    "Lato", /* 英字 */
    "游ゴシック Medium",
    "游ゴシック体",
    "Yu Gothic Medium",
    YuGothic,
    "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN",
    "メイリオ",
    Meiryo,
    "ＭＳ Ｐゴシック",
    "MS PGothic",
    sans-serif;
  line-height: 1.0;
}
@media all and (-ms-high-contrast: none) {
  h2 {
    font-family:
      "メイリオ",
      Meiryo,
      sans-serif;
  }
}

input , select , textarea , button {
  font-family: inherit;
}

/* for PC */
@media screen and ( min-width: 768px ) {
  html {
    font-size: 62.5%; /* 16px（初期値） * 0.65 = 10px ：PCレイアウト時の 1rem の値 */
  }
}

/* for SP */
@media screen and ( max-width: 767px ) {
  html {
    font-size: 8px; /* スマホレイアウト時の 1rem の値。下記記載がiPhone時に反映されないのでピクセル値で指定 */
    /* font-size: 40%; /* 16px（初期値） * 0.4 = 6.4px ：スマホレイアウト時の 1rem の値 */
  }
}

/* body のフォントサイズ指定 */
body {
  font-size: 1.6em; /* PC：10px * 1.6 = 16px、SP：8px * 1.6 = 12.8px */
}

/**********************************************
  共通レイアウト
***********************************************/
body {

}

a {
  color: black;
  text-decoration: none;
}

.wrapper {
  max-width: 942px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

#header {
  background-color: white;
  padding: 4rem 0;
}

#header h1 {
  color: #05519a;
  font-size: 4.0rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.main  {
  padding: 4rem 0;
  background-color: #23B6BC;
}

.box {
  background-color: white;
  padding: 3rem;
  border-radius: 40px;
  border: 14px solid #00418F;
}

p.notice {
  font-size: 2.6rem;
  line-height: 1.4;
  margin: 3rem 0;
}

h2 {
  font-size: 3.2rem;
  line-height: 1.4;
  text-align: center;
  color: white;
  background-color: #00418F;
  border-radius: 40px;
  padding: 1.8rem;
  margin: 0 0 4rem;
}

/* for PC */
@media ( min-width : 768px ){
  .flex-container {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
  }
  .flex-item {
    width: 50%;
    margin: 0 1.5rem;
  }
}

h3 {
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 1rem;
}

p{
  text-align: center;
}

.video-image {
  display: block;
  width: 100%;
  border: 5px solid orange;
  margin-bottom: 2rem;
}

p.text-link, a.text-link {
  font-size: 2.4rem;
  color: blue;
  text-decoration: underline;
  text-align: center;
  margin: 1rem 0 6rem;
}

p.text-link:hover, a.text-link:hover {
  color: purple;
}

.strong{
  font-weight: bold;
}

/* videoタグ用に色々 */
.movmov{width:100%;}

.modoru{
  display:block;
  font-size: 3.2rem;
  line-height: 1.4;
  text-align: center;
  color: white;
  background-color: #00418F;
  border-radius: 40px;
  padding: 1.8rem 5rem;
  margin: 5rem auto;
  width:30%;
}

.modoru:hover{
  cursor: pointer;
  opacity: 80%;
}

/* for SP */
@media screen and ( max-width: 767px ) {
  .flex-item p.text-link {
    font-size: 3.0rem;
  }
}

.contact h2 {
  font-size: 2.6rem;
}

.contact h3 {
  font-size: 2.0rem;
}

.contact p {
  font-size: 2.0rem;
}

.footer {
  padding: 1.8rem 0;
}

.footer p {
  color: black;
  font-size: 1.4rem;
  text-align: center;
}
/**********************************************
動画ページ用
**********************************************/
.mov h1{
  font-size: 4rem;
}
#youtube-movie {
  margin: 0 auto;
  width: 100%;
  max-width: 1024px;
}
#youtube-movie-content {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
#youtube-movie-content iframe {
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important;
}


/**********************************************
  アンケートページ
***********************************************/
.questionary-from {
  font-size: 2.0rem;
  line-height: 1.4;
  margin: 3rem 0;
}
@media all and (-ms-high-contrast: none) {
  .modoru {
    font-family:
      "メイリオ",
      Meiryo,
      sans-serif;
  }
}

/* for SP */
@media screen and ( max-width: 767px ) {
  .questionary-from {
    margin: 3rem 13px;
  }
}

.questionary-from p.notes {
  font-size: 2.0rem;
  margin: 3rem 0 4rem;
}

p.thanks {
  font-size: 2.0rem;
  margin: 3rem 0;
  text-align: center;
}

.questionary-from .input-item {
  margin-bottom: 1.6em;
}

.questionary-from .input-item label {
  display: block;
  margin-bottom: 0.2em;
}

.questionary-from .input-item label:first-of-type {
  margin-bottom: 0.6em;
}

.questionary-from .input-item label.m-left {
  margin-left: 0.8em;
}

.questionary-from .input-item label.answer {
  margin-left: 1.8em;
  font-weight: bold;;
}

.questionary-from .input-item label.error-message {
  color: red;
  font-size: 1.6rem;
  margin-left: 1.8em;
}

.questionary-from .input-item span.required-text {
  color: red;
  font-size: 1.2rem;
}

/* バリデーションNGの項目 */
.questionary-from input:invalid, .questionary-from textarea:invalid {
  /* border : pink 2px solid !important; */
  background-color: pink;
}

.questionary-from input[type="text"] {
  width: 100%;
  font-size: 2.0rem;
  padding: 1rem;
  border-width: 1px;
  border-radius: 1rem;
}

.questionary-from input[type="text"]:focus {
  border-width: 2px;
  border-radius: 0px;
}

.questionary-from input.other-text {
  width: 80%;
  margin-left: 2rem;
}

.questionary-from textarea {
  width: 100%;
  font-size: 2.0rem;
  line-height: 1.6;
  padding: 1rem;
  resize: none;
  border-width: 1px;
  border-radius: 1rem;
}

.questionary-from textarea:focus {
  border-width: 2px;
  border-radius: 0px;
}

.questionary-from input[type="radio"] , .questionary-from input[type="checkbox"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  margin: 0 2rem;
  font-size: 1.6rem;
}

.questionary-from #submit-button, .questionary-from #back-button {
  display: block;
  font-size: 2.0rem;
  line-height: 1.0;
  margin: 6rem auto;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  border-width: 1px;

  cursor: pointer;
}

.questionary-from #submit-button:hover, .questionary-from #back-button:hover {
  background-color: pink;
}

.questionary-from #submit-button:disabled , .questionary-from #back-button:disabled {
  opacity: 0.5;
  background-color: #fff;
  cursor: auto;
}

/* ダウンロードボタン */
.button {
  display: inline-block;
  padding: 0.5em 1em;
  /* margin: 0rem 0rem 3rem 5.9rem; */
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.button:hover {
background: #082d7f;/*ボタン色*/
}