@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 */ font-family: 'Noto Sans JP','Roboto',  sans-serif; margin-top: 0px; background-color: #fafafa; }

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

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

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

a:hover { text-decoration: none; color: #FF6600; transition: 0.5s; }
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; }

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

/* Scss Document */
/* Scss Document */
.header { width: 100%; position: fixed; z-index: 960; }

header { max-width: 1620px; min-width: 745px; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; padding-left: 5px; padding-right: 5px; display: flex; justify-content: space-between; align-items: center; }
header a { color: white; }
header a:hover { color: orange; }
header .logo { width: 200px; white-space: nowrap; font-weight: 700; font-size: 110%; }
header nav { flex-basis: 80%; font-size: 90%; font-weight: 700; }
header nav ul { display: flex; justify-content: flex-end; flex-wrap: wrap; flex-direction: row; align-items: center; }
header nav li { white-space: nowrap; }
header nav li a { display: block; padding-left: 8px; padding-right: 8px; }
header nav .contact-nav a { background: white; border: 2px #e9e9e9 solid; color: #4aa2a6; border-radius: 20px; padding-left: 15px; padding-right: 15px; }

footer { border-top: 1px solid gray; background: white; text-align: center; }
footer img { margin: 10px; }
footer div { background: #3D3D3D; color: white; padding: 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; align-items: center; background: #001956; display: flex; }
.top a:hover { background: #ff8803; }

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

main { max-width: 700px; min-width: 300px; margin-left: auto; margin-right: auto; padding-bottom: 10px; }

.index .index-inner { display: flex; justify-content: space-between; flex-direction: column; min-height: 100vh; }
.index .index-inner .block-a { max-width: 500px; margin-left: auto; margin-right: auto; padding-top: 50px; min-width: 310px; }
.index .index-inner .block-a ul { padding-left: 15%; padding-right: 15%; }
.index .index-inner .block-a ul li { padding-bottom: 10px; }
.index .index-inner .block-a ul li:nth-child(1) { display: flex; justify-content: space-between; align-items: center; }
.index .index-inner .block-a ul li:nth-child(1) img { width: 88px; }
.index .index-inner .block-a ul li:nth-child(1) a { color: #009143; border: 1px solid #009143; border-radius: 20px; width: 100px; height: 35px; display: flex; justify-content: center; align-items: center; }
.index .index-inner .block-a ul li:nth-child(1) a:hover { background: #009143; color: white; }
.index .index-inner .block-b { flex-grow: 1; display: flex; justify-content: center; align-items: center; }
.index .index-inner .block-b a { max-width: 300px; height: 80px; font-size: 48px; background: #009143; color: white; display: flex; justify-content: center; align-items: center; font-weight: 600; border-radius: 15px; line-height: 100%; padding-bottom: 5px; border: 1px solid #009143; min-width: 250px; }
.index .index-inner .block-b a:hover { background: white; color: #009143; }

h2 { width: 250px; height: 50px; font-size: 24px; background: #009143; color: white; display: flex; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; font-weight: 600; border-radius: 15px; line-height: 90%; padding-bottom: 5px; border: 1px solid #009143; }

.page-body { display: block; }

.page-head { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); position: sticky; top: 0; margin-bottom: 15px; z-index: 999; width: 100%; }
.page-head div { height: 57px; display: flex; justify-content: center; align-items: center; background: white; position: relative; }
.page-head img { height: 31px; }
.page-head span { position: absolute; top: 19px; left: 17px; }
.page-head span a { color: #4caf50; display: flex; justify-content: center; align-items: center; align-items: center; font-weight: 600; font-size: 90%; line-height: 100%; }
.page-head span a:before { content: url("../img/back-arrow.png"); margin-right: 10px; }

.foot-nav { padding: 10px; display: flex; justify-content: space-between; position: sticky; bottom: 0; }
.foot-nav a { width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; background: #4e4e4e; color: white; font-weight: 600; font-size: 24px; border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); line-height: 24px; padding-bottom: 2px; }
.foot-nav .pageback { background: #ffb81c; display: flex; justify-content: center; align-items: center; align-items: center; }
.foot-nav .pageback:before { content: url("../img/foot-arrow-back.png"); margin-right: 20px; transform: translateY(3px); }
.foot-nav .pageback:hover { background: #ff6e00; }
.foot-nav .next-btn { width: 150px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 24px; line-height: 24px; }
.foot-nav .next-btn:after { content: url("../img/foot-arrow-next.png"); margin-left: 15px; transform: translateY(3px); }

.foot-nav2 { display: flex; justify-content: space-between; position: sticky; bottom: 0; background: white; }
.foot-nav2 a { flex-grow: 1; margin: 10px; }

.help h3 { font-size: 24px; text-align: center; font-weight: 600; }
.help article { font-size: 18px; padding: 5%; }
.help section { margin-bottom: 20px; }
.help ul { margin-top: 10px; }
.help li { position: relative; margin-left: 25px; }
.help .help1 li:before { content: "※"; position: absolute; left: -20px; }
.help .help2 li:before { content: "・"; position: absolute; left: -20px; }

.caution h3 { font-size: 24px; text-align: center; font-weight: 600; }
.caution article { font-size: 16px; padding: 5%; }
.caution section { margin-bottom: 20px; }
.caution .caution-inner { margin: 5px; border: 1px solid #ccc; background: white; }
.caution .video { position: sticky; top: 57px; }
.caution .box2 { font-size: 18px; }
.caution .box2 ul { padding: 10px; }
.caution .box2 ul li { list-style: disc; margin-left: 30px; }

#container { padding-top: 30px; height: 200px; /* コンテナの高さを設定 */ overflow-y: scroll; /* スクロールバーを表示する */ border: 2px solid gray; margin: 5px; }

.check { display: flex; justify-content: center; align-items: center; padding-bottom: 10px; align-items: center; font-size: 18px; padding-top: 10px; }
.check input { margin-right: 10px; border: 2px solid gray; width: 30px; height: 30px; position: relative; z-index: 999; }
.check input:checked { accent-color: #009143; }

.step h3 { text-align: center; padding: 10px; font-size: 18px; }
.step .step-base { position: relative; min-width: 300px; max-width: 780px; margin-left: auto; margin-right: auto; margin: 5px; padding: 5px; border: 1px solid #ccc; }
.step .step-nav { display: flex; justify-content: space-between; margin-left: 10px; margin-right: 10px; position: sticky; bottom: 0; align-items: center; left: 0; background-color: rgba(255, 255, 255, 0.5); z-index: 999; padding: 5px; }
.step .step-nav a { display: block; padding: 5px; color: #292929; border: 1px solid gray; font-weight: 600; min-width: 100px; text-align: center; font-size: 20px; }
.step .step-nav button { min-width: 100px; height: 40px !important; }
.step .carousel-indicators { margin: 0; top: inherit; bottom: 0vh !important; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background: #e9e9e9; border: 1px solid #ccc; height: 60px; overflow-x: hidden; }
.step .carousel-indicators button { width: 25px !important; height: 25px !important; position: relative !important; background-color: gray !important; border-radius: 50%  !important; position: relative; }
.step .carousel-indicators button:after { content: " " !important; color: white !important; display: block !important; position: absolute !important; left: -100% !important; margin-left: 538px; top: 0; line-height: 150%; }
.step .carousel-indicators button:nth-child(1):after { content: "1" !important; }
.step .carousel-indicators button:nth-child(3):after { content: "2" !important; }
.step .carousel-indicators button:nth-child(5):after { content: "3" !important; }
.step .carousel-indicators button:nth-child(7):after { content: "4" !important; }
.step .carousel-indicators button:nth-child(9):after { content: "5" !important; }
.step .carousel-indicators button:nth-child(11):after { content: "6" !important; }
.step .carousel-indicators span { width: 10px; height: 1px; background: gray; display: block; margin-left: 5px; margin-right: 5px; }
.step .carousel-indicators .active { background-color: #052d03 !important; }
.step .carousel-item { min-height: 50vh; }
.step .step-last { height: 50vh; display: flex; justify-content: center; align-items: center; }
.step .step-last a { background: #009143; font-weight: 600; font-size: 24px; color: white; padding: 30px; border-radius: 20px; position: relative; z-index: 980; }
.step .step-last a:hover { background: #ff3f00; }
.step article { font-size: 18px; padding: 10px; line-height: 140%; }
.step .nav { position: absolute; top: 0; z-index: 100; width: 100%; height: 340px; }

.video { width: 100%; }

.video video { width: 100%; }

.step-navi { margin: 0; top: inherit; bottom: 0vh !important; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background: #e9e9e9; border: 1px solid #ccc; height: 60px; overflow-x: hidden; }
.step-navi a { width: 25px !important; height: 25px !important; position: relative !important; background-color: gray !important; border-radius: 50%  !important; position: relative; color: white; display: flex; justify-content: center; align-items: center; }
.step-navi a:hover { background-color: #052d03; }
.step-navi span { width: 10px; height: 1px; background: gray; display: block; margin-left: 8px; margin-right: 8px; }
.step-navi .now { background-color: #052d03 !important; }

.step-nav2 { display: flex; justify-content: space-between; margin-left: 10px; margin-right: 10px; position: sticky; bottom: 0; align-items: center; left: 0; background-color: rgba(255, 255, 255, 0.5); z-index: 999; padding: 5px; }
.step-nav2 .sokutei a { display: block; padding: 5px; color: #292929; border: 1px solid gray; font-weight: 600; min-width: 100px; text-align: center; font-size: 20px; }
.step-nav2 .button a { min-width: 100px; height: 40px; display: flex; justify-content: center; align-items: center; }
.step-nav2 span { display: block; width: 20px; height: 20px; border-width: 0 0 5px 5px; border-color: white; border-style: solid; }
.step-nav2 .before span { transform: rotate(45deg); }
.step-nav2 .next span { transform: rotate(225deg); }

.avant .block-b { flex-grow: 1; display: flex; justify-content: center; align-items: center; }
.avant .block-b a { max-width: 300px; height: 80px; font-size: 32px; background: #009143; color: white; display: flex; justify-content: center; align-items: center; font-weight: 600; border-radius: 15px; line-height: 100%; padding-bottom: 5px; border: 1px solid #009143; min-width: 250px; }
.avant .block-b a:hover { background: white; color: #009143; }

/* 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; } }
/* Scss mobile contents */