@charset "UTF-8";
/* Sass Document */
/* Scss Document */
/* 全体
============================================================================================================*/
* { padding: 0px; margin: 0px; }

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%; font-weight: normal; }

/* body
============================================================================================================*/
body { color: #000000; font-size: 1em; line-height: 1.8; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ margin-top: 0px; background-color: #f2f2f2; }

img { border-style: none; max-width: 100%; height: auto; vertical-align: bottom; line-height: 100%; }

a { text-decoration: none; color: #272727; }
a img { border-style: none; }

.clear { clear: both; }
.clear hr { display: none; }

a:hover { text-decoration: underline; color: #FF6600; }
a:hover img { opacity: 0.6; filter: alpha(opacity=60); transition: 0.5s; }

ul li { list-style-type: none; }

.ankerbox { position: relative; }
.ankerbox a { position: absolute; top: -60px; }

.video { width: 100%; /*横幅いっぱいにwidthを指定*/ padding-bottom: 56.25%; /*高さをpaddingで指定(16:9)*/ height: 0px; /*高さはpaddingで指定するためheightは0に*/ position: relative; margin-top: 30px; }

.video iframe, .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Scss Document */
body { font-family: 'Noto Sans SC', sans-serif; }

/* Scss Document */
/* Scss Document */
header { padding-top: 10px; padding-bottom: 10px; background: white; }
header .section { display: flex; justify-content: space-between; align-items: center; }
header .logo { display: flex; align-items: center; }
header .logo span { color: #9e9e9f; font-weight: 600; font-size: 90%; }
header nav ul { display: flex; justify-content: space-between; align-items: center; height: 100%; }
header nav ul li { padding-left: 10px; border-left: 1px solid lightgray; padding-right: 10px; }

.top { position: fixed; z-index: 998; bottom: 10px; right: 10px; }
.top a { width: 80px; height: 80px; border-radius: 50%; color: white; justify-content: center; font-family: 'Sawarabi Gothic', sans-serif; align-items: center; background: #001956; display: flex; }
.top a:hover { background: #ff8803; }

@media only screen and (min-device-width: 1000px) { .mv img { width: 100%; } }
@media screen and (max-width: 1000px) { .mv img { width: 1000px; height: 155px; object-fit: cover; } }
footer { background: #6d97bc; padding-top: 30px; padding-bottom: 60px; }
footer .section { display: flex; color: white; font-weight: 800; align-items: baseline; flex-wrap: wrap; }
footer .section span { margin-left: 15px; }
footer .cl { margin-top: 20px; color: white; font-size: 90%; line-height: 130%; width: 100%; }
footer .cl a { color: white; }

/* Scss Document contents */
.cp_fullscreenmenu { display: none; }

.section { max-width: 1000px; min-width: 750px; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; }

main { background: white; padding: 1%; margin-top: 36px; margin-left: 5px; margin-right: 5px; }

.max-600 { max-width: 600px; margin-left: auto; margin-right: auto; }

section { border-top: 5px solid #1b1b1b; padding-top: 30px; padding-bottom: 30px; }
section h2 { font-size: 250%; display: flex; align-items: center; flex-direction: column; font-weight: 800; line-height: 100%; }
section h2 span { font-size: 40%; font-weight: 600; }
section h3 { background: #6d97bc; padding: 8px; color: white; font-weight: 600; margin-top: 10px; margin-bottom: 20px; }
section .caution { display: flex; justify-content: space-between; margin-bottom: 20px; min-height: 10px; }
section .caution:before { content: " "; border-left: 3px solid #1e1e1e; width: 3px; border-right: 0px solid #1e1e1e; border-bottom: 3px solid #1e1e1e; border-top: 3px solid #1e1e1e; display: block; margin-right: 10px; }
section .caution:after { content: " "; border-left: 0px solid #1e1e1e; width: 3px; margin-left: 15px; border-right: 3px solid #1e1e1e; border-bottom: 3px solid #1e1e1e; border-top: 3px solid #1e1e1e; display: block; margin-left: 10px; }

.arrow1 { position: relative; min-height: 10px; margin-bottom: 10px; }
.arrow1 span { position: absolute; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: white; font-weight: 700; }
.arrow1:before { content: " "; display: block; width: 120px; height: 30px; background: #6d97bc; margin-left: auto; margin-right: auto; }
.arrow1:after { content: " "; display: block; margin-left: auto; margin-right: auto; width: 0; height: 0; border-style: solid; border-width: 50px 120px 0 120px; border-color: #6d97bc transparent transparent transparent; }

.check li { border-bottom: 1px dotted gray; padding: 8px; display: flex; justify-content: flex-end; }
.check li:before { flex-grow: 1; display: block; content: url(../img/check.png); text-align: right; margin-right: 10px; }
.check li p { flex-basis: 700px; }
.check li .arrow2 { display: flex; align-items: center; }
.check li .arrow2:before { content: url(../img/arrow1.jpg); }
.check .check-img div { flex-basis: 330px; margin: 3px; }
.check .check-img div img { margin-left: auto; margin-right: auto; display: block; }
.check .check-img div article { width: 100%; margin-top: 5px; }
.check .check-img:before { display: none; }

.sec01 b { font-size: 90%; margin-left: 20px; }
.sec01 dl { display: flex; justify-content: space-between; margin-left: 2%; margin-right: 2%; }
.sec01 dl dt { flex-basis: 23%; font-size: 70%; line-height: 120%; }
.sec01 dl dt img { margin-bottom: 5px; }
.sec01 dl dt p { margin-bottom: 30px; }
.sec01 dl dt span { display: flex; }
.sec01 dl dt span:before { content: "■"; }
.sec01 dl dt a { color: #19349e; }
.sec01 dl dd { flex-basis: 73%; margin-left: 2%; }
.sec01 dl dd article { border-bottom: 1px solid gray; padding-bottom: 10px; margin-bottom: 10px; font-weight: 500; }
.sec01 dl dd article ul { font-weight: 300; font-size: 90%; margin-left: 15px; }
.sec01 dl dd article ul li { display: flex; }
.sec01 dl dd article ul li:before { content: "-"; margin-right: 5px; }
.sec01 .block { background: #e46a78; color: white; font-weight: 700; padding: 10px; border-radius: 3px; text-align: center; }
.sec01 .sec01-flex { display: flex; justify-content: space-between; }
.sec01 .sec01-flex li { flex-basis: 49%; display: flex; justify-content: space-between; flex-direction: column; }
.sec01 .sec01-flex li h3 span { color: #eddb0d; }

.sec02 h4 { padding: 10px; text-align: center; }
.sec02 .img01 { display: flex; justify-content: space-between; }
.sec02 .img01 li { flex-basis: 32%; font-size: 80%; line-height: 130%; margin-bottom: 40px; text-align: center; }
.sec02 .img01 li img { display: block; margin-bottom: 10px; }

.sec03 .img01 { text-align: center; margin-bottom: 20px; }
.sec03 .img02 { text-align: right; margin-top: 10px; }

.sec04 .img01 { display: flex; justify-content: space-between; max-width: 900px; margin-left: auto; margin-right: auto; }
.sec04 .img01 li { flex-basis: 49%; }
.sec04 .li { font-weight: 300; font-size: 90%; margin-left: 15px; display: block; display: flex; line-height: 110%; margin-bottom: 5px; }
.sec04 .li .li-a { display: flex; flex-basis: 30%; font-weight: 300; font-size: 90%; }
.sec04 .li .li-b { flex-basis: 70%; font-weight: 300; font-size: 90%; }
.sec04 .li .li-b:before { content: ":"; margin-right: 5px; }
.sec04 .li:before { content: "-"; margin-right: 5px; }

.sec05 article { font-weight: 600; text-align: center; }

.sec06 ul { display: flex; justify-content: space-between; max-width: 900px; margin-left: auto; margin-right: auto; }
.sec06 ul li { flex-basis: 49%; text-align: center; }

.form div { max-width: 750px; margin-left: auto; margin-right: auto; }
.form div article { margin-bottom: 15px; }
.form p { margin-bottom: 10px; }
.form p lable { display: block; margin-left: 20px; }
.form p lable input[type="checkbox"] { background: white; border: 1px black solid; margin-right: 5px; }
.form ol { margin-left: 20px; margin-top: 20px; }
.form ol li div { display: flex; justify-content: space-between; }
.form ol li span { flex-basis: 30%; }
.form ol li .must { display: flex; }
.form ol li .must:after { content: "*"; color: red; margin-left: 3px; }
.form ol li p { flex-basis: 69%; }
.form ol input[type="text"], .form ol textarea { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3px; font-size: 110%; }
.form .submit { text-align: center; margin-top: 15px; }
.form .submit input { min-width: 300px; padding: 10px; color: white; background: #9c0039; border: 0px; font-size: 110%; cursor: pointer; cursor: hand; }

.video-ul { display: flex; justify-content: space-between; margin-top: 20px; }
.video-ul li { flex-basis: 49%; }

.box { font-size: 120%; padding: 10px; border: 1px solid gray; margin-bottom: 20px; }

.catalog { display: flex; justify-content: center; align-items: center; }
.catalog a { background-color: red; color: white; padding: 10px; border-radius: 10px; font-size: 120%; font-weight: 600; }
.catalog a:hover { background-color: coral; }

.dl-bt { position: fixed; top: 200px; right: 5px; transition: 0.5s; }
.dl-bt p a { transition: 0.5s; background-color: royalblue; color: white; display: block; border-radius: 10px; padding: 10px; display: flex; justify-content: center; align-items: center; }
.dl-bt p a:before { transition: 0.5s; background-color: white; content: "▲"; border-radius: 50%; width: 20px; height: 20px; color: royalblue; display: flex; justify-content: center; align-items: center; transform: rotate(90deg); margin-right: 8px; }
.dl-bt p a:hover { background-color: tomato; transition: 0.5s; text-decoration: none; }
.dl-bt p a:hover:before { color: tomato; transition: 0.5s; }

.bg { transform: translateX(180px); transition: 0.5s; }
.bg:hover { transform: translateX(0px); }

.example { margin-bottom: 40px; }
.example h4 { background: #ebebeb; color: #2a2a2a; padding: 10px; margin-bottom: 10px; font-weight: 600; }
.example h4 p { text-align: center; }

/* Scss Document */
.contact { margin-top: 20px; padding-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; }
.contact input[type="text"], .contact textarea { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.contact dl { background: white; display: flex; justify-content: space-between; }
.contact dl dt { flex-basis: 30%; text-align: left; }
.contact dl dd { flex-basis: 70%; }
.contact dl dt, .contact dl dd { padding: 10px; }
.contact dl dd input { padding: 8px; }
.contact dl:nth-child(even) { background: rgba(213, 213, 213, 0.2); }
.contact p { display: flex; justify-content: center; align-items: center; }
.contact p input { padding: 15px; min-width: 280px; font-size: 110%; cursor: pointer; cursor: hand; border: 1px gray solid; background: white; }
.contact p input:hover { background: #ffd27f; }
.contact article { font-size: 80%; text-align: center; margin-top: 10px; max-width: 800px; margin-left: auto; margin-right: auto; }

@media screen and (max-width: 480px) { * { -webkit-box-sizing: border-box; box-sizing: border-box; }
  .cp_fullscreenmenu { display: block; }
  .cp_fullscreenmenu { position: fixed; z-index: 998; top: 5px; right: 5px; border: 1px solid #ababab; }
  /*menuコンテンツ*/
  .cp_fullscreenmenu .menu { position: fixed; top: 0; left: 0; display: flex; visibility: hidden; overflow: hidden; width: 100%; height: 100%; pointer-events: none; outline: 1px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; align-items: center; justify-content: center; }
  .cp_fullscreenmenu .menu > div { display: flex; overflow: hidden; width: 200vw; height: 200vw; transition: all 0.4s ease; -webkit-transform: scale(0); transform: scale(0); text-align: center; color: #212121; flex: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.8); }
  .cp_fullscreenmenu .menu > div > ul { max-height: 200vh; margin: 0; padding: 0 1em; list-style: none; opacity: 0; width: 100%; }
  .cp_fullscreenmenu .menu > div > ul > li { display: block; padding: 0; font-size: 90%; border-bottom: 1px dotted white; }
  .cp_fullscreenmenu .menu > div > ul > li a { display: block; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; color: white; }
  /*クリックしたらメニューが開閉の動作*/
  .cp_fullscreenmenu .toggle { position: fixed; z-index: 999; top: 0px; width: 50px; height: 50px; cursor: pointer; opacity: 0; right: 0px; }
  .cp_fullscreenmenu .toggle:checked + .hamburger > span { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  .cp_fullscreenmenu .toggle:checked + .hamburger > span:before, .cp_fullscreenmenu .toggle:checked + .hamburger > span:after { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  .cp_fullscreenmenu .toggle:checked + .hamburger > span:after { opacity: 0; }
  .cp_fullscreenmenu .toggle:checked ~ .menu { visibility: visible; pointer-events: auto; }
  .cp_fullscreenmenu .toggle:checked ~ .menu > div { transition-duration: 0.75s; -webkit-transform: scale(1); transform: scale(1); }
  .cp_fullscreenmenu .toggle:checked ~ .menu > div > ul { opacity: 1; }
  .cp_fullscreenmenu .toggle:checked:hover + .hamburger > span { -webkit-transform: rotate(225deg); transform: rotate(225deg); }
  /*ハンバーガー*/
  .cp_fullscreenmenu .hamburger { z-index: 980; top: 5px; display: block; width: 50px; height: 50px; padding: 0.5em 1em; cursor: pointer; transition: box-shadow 0.4s ease; border-radius: 0 0.12em 0.12em 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; right: 0%; background-color: white; position: fixed; border: 1px solid #cccccc; }
  .cp_fullscreenmenu .hamburger > span { position: relative; top: 50%; display: block; width: 100%; height: 2px; transition: all 0.4s ease; background-color: #525252; right: 0px; }
  .cp_fullscreenmenu .hamburger > span:before, .cp_fullscreenmenu .hamburger > span:after { position: absolute; z-index: 1; top: -10px; left: 0; display: block; width: 100%; height: 2px; content: ''; transition: all 0.4s ease; background: inherit; }
  .cp_fullscreenmenu .hamburger > span:after { top: 10px; }
  .dropdown { display: inline-block; width: 100%; }
  #tg, #tg2 { display: none; } }
/* modal */
.popupModal1 > input { /* ラジオボックス非表示 */ display: none; }

.popupModal1 > input:nth-child(1) + label { cursor: pointer; }

.modalPopup2 { /* 初期設定 ポップアップ非表示 */ display: none; }

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 { /* ラジオ１ チェックでポップアップ表示 */ display: block; z-index: 998; position: fixed; width: 90%; height: auto; border-radius: 20px; left: 50%; top: 50%; margin-top: 20px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #fff; padding: 10px 20px; overflow: hidden; }

@media (min-width: 768px) { /* PCのときはページの真ん中の600x600領域 */
  .popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 { max-width: 1200px; min-width: 600px; padding: 30px; padding-top: 0px; }
  .popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label { left: 50% !important; top: 50% !important; margin-left: 270px !important; margin-top: -310px !important; } }
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div { /* */ overflow: visible; -webkit-overflow-scrolling: touch; display: inline-block; width: 100%; height: 100%; }

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe { width: 100%; height: 100%; border: none; display: block; }

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img { /* ポップアップの中の要素 */ max-width: 100%; }

.popupModal1 > input:nth-child(1) + label ~ label { display: none; /* ラジオ１ 以外のラベルを初期は非表示 */ }

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: block; position: fixed; left: 0; top: 0; z-index: 997; text-indent: -999999px; overflow: hidden; }

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label { background: rgba(255, 255, 255, 0.5); display: none; position: fixed; left: 10px; bottom: 20px; z-index: 999; width: 44pt; height: 44pt; font-size: 40px; border-radius: 50%; line-height: 44pt; text-align: center; box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2); }

.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2, .popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */ display: none; }

.modalPopup2 { animation: fadeIn 1s ease 0s 1 normal; -webkit-animation: fadeIn 1s ease 0s 1 normal; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.modal-wrapper { z-index: 999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 40px 10px; text-align: center; }

.modal-wrapper:not(:target) { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

.modal-wrapper:target { opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s; }

.modal-wrapper::after { display: inline-block; height: 100%; margin-left: -.05em; vertical-align: middle; content: ""; }

.modal-wrapper .modal-window { box-sizing: border-box; display: inline-block; z-index: 20; position: relative; width: 70%; max-width: 600px; padding: 30px 30px 15px; border-radius: 2px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); vertical-align: middle; }

.modal-wrapper .modal-window .modal-content { max-height: 80vh; overflow-y: auto; text-align: left; }

.modal-overlay { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); }

.modal-wrapper .modal-close { z-index: 20; position: absolute; top: 0; right: 0; width: 35px; color: #95979c !important; font-size: 20px; font-weight: 700; line-height: 35px; text-align: center; text-decoration: none; text-indent: 0; }

.modal-wrapper .modal-close:hover { color: #2b2e38 !important; }

.modal-content h4 { margin-bottom: 10px; font-size: 120%; border-bottom: 1px dotted gray; }

.modal-content p { text-indent: 11px; margin-bottom: 20px; }

.modal-close { position: relative; }
.modal-close label { display: flex; position: absolute; top: 10px; right: -10px; border: 1px solid gray; border-radius: 5px; line-height: 100%; width: 30px; height: 30px; align-items: center; justify-content: center; cursor: pointer; cursor: hand; z-index: 999; background: white; }

/* Scss mobile contents */
@media screen and (max-width: 480px) { .section { max-width: 480px; min-width: 320px; }
  header nav { display: none; }
  .sec01 dl, .sec01 .sec01-flex, .sec01 dl dt span, .check .check-img, .form ol li div { display: block; }
  .sec01 dl dt { text-align: center; } }