@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: #fff; }

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 { 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; margin-top: 30px; }

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

/* Scss Document */
/* Scss Document */
header { width: 100%; position: fixed; z-index: 960; padding-bottom: 8px; padding-top: 8px; background: rgba(255, 255, 255, 0.8); }
header .section { display: flex; justify-content: space-between; align-items: center; max-width: 960px; min-width: 760px; margin-left: auto; margin-right: auto; }
header .logo { padding: 5px; }
header .head-menu .la { margin-bottom: 5px; display: flex; }
header .head-menu .la a { display: flex; display: block; background: white; font-size: 10px; color: black; font-weight: 600; align-items: center; padding-right: 10px; white-space: nowrap; margin-right: 5px; }
header .head-menu .la a img { width: 30px; margin-right: 5px; }
header nav ul { display: flex; }
header nav li { border-right: 1px solid gray; line-height: 100%; position: relative; }
header nav li:after { border-bottom: 0px solid rgba(44, 85, 241, 0.6); display: block; content: " "; position: absolute; bottom: 0; width: 100%; transition: 0.2s; }
header nav li a { color: #212121; padding: 10px; display: block; font-size: 90%; }
header nav li:hover { text-shadow: 0 0 5px rgba(44, 85, 241, 0.6); }
header nav li:hover:after { border-bottom-width: 5px; }
header nav li:last-child { border: 0; }
header a { white-space: nowrap; }

.contact-form { display: flex; justify-content: center; align-items: center; }
.contact-form a { background: #ab0002; color: white; padding: 10px; text-shadow: 0 0 3 white; display: block; text-align: center; }
.contact-form a:hover { background: #182574; }
.contact-form .foot-b a { width: 300px; font-size: 18px; }
.contact-form .foot-b a span { display: block; font-size: 12px; }

.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; }

footer { background: #353535; color: white; padding: 15px; text-align: center; }

.side-nav { position: fixed; right: 0; bottom: 30px; z-index: 999; }
.side-nav li { margin-bottom: 10px; width: 130px; }
.side-nav li a { background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; padding: 10px; text-align: center; color: black; font-size: 14px; line-height: 120%; border-radius: 5px; }
.side-nav li a img { display: block; margin-right: 10px; }
.side-nav li a:hover { background: #ff9328; }
.side-nav .fb a { background: #003bb4; color: white; }
.side-nav .form a { background: #ab0002; color: white; }
.side-nav .kamotsu a { background: #dddddd; }
.side-nav .qa a { background: #ffc64b; color: #4f2b07; }

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

.flex-sb { display: flex; justify-content: space-between; }

.flex-cc { display: flex; justify-content: center; align-items: center; }

.page-mv { min-height: 10px; position: relative; font-family: 'Noto Serif JP', serif; min-width: 500px; padding-top: 72px; }
.page-mv img { width: 100%; }
.page-mv .inner { height: 100%; width: 100%; position: absolute; top: 0; display: flex; justify-content: center; align-items: center; z-index: 900; }
.page-mv .section { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; }
.page-mv h1 { text-align: center; font-size: 30px; line-height: 100%; text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white; padding-top: 30px; }

main { min-height: 600px; padding-top: 50px; }
main .section { max-width: 960px; min-width: 760px; margin-left: auto; margin-right: auto; }

.index h2 { font-family: 'Noto Serif JP', serif; font-size: 26px; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; color: #3e3e3e; }
.index h2:before { width: 30px; height: 10px; display: block; background: #fb3034; margin-right: 15px; content: " "; }
.index section { margin-bottom: 60px; }
.index .sec01 { background-size: auto auto; background-color: white; background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, #9d9d9d 2px, #9d9d9d 3px); padding-top: 30px; padding-bottom: 30px; }
.index .sec01 .inner { background: white; padding: 20px; }
.index .sec01 article { padding-left: 50px; padding-bottom: 30px; }
.index .sec02 h3 { font-family: 'Noto Serif JP', serif; font-size: 23px; text-align: center; margin-bottom: 30px; }
.index .sec02 p { padding-left: 10px; padding-right: 10px; text-align: center; }
.index .sec03 { background: #d1edfb; padding-top: 50px; padding-bottom: 50px; }
.index .sec03 ul { display: flex; justify-content: space-between; margin-left: 10px; margin-right: 10px; }
.index .sec03 .box li { background: white; padding: 1%; border-radius: 10px; flex-basis: 47%; }
.index .sec03 p { padding: 10px; text-align: center; }
.index .sec03 .text li { flex-basis: 47%; padding: 1%; }
.index .sec03 .text li h4 { font-weight: 600; font-size: 20px; }
.index .sec03 .text li p { text-align: left; list-style: decimal; padding: 5px; margin-left: 10px; }
.index .sec03 .text li:nth-child(1) h4 { color: blue; }
.index .sec03 .text li:nth-child(2) h4 { color: red; }
.index .sec04 h3 { font-weight: 600; font-size: 20px; padding: 10px; margin-bottom: 10px; }
.index .sec04 p { padding: 10px; }
.index .sec05 ul { padding-left: 10px; padding-right: 10px; }
.index .sec05 ul li div { border: 1px solid gray; border-radius: 10px; display: flex; justify-content: space-between; }
.index .sec05 ul li div h3 { padding: 2%; flex-basis: 40%; background: #e6edff; color: #3b5085; font-weight: 600; font-size: 18px; border-radius: 10px 0 0 10px; line-height: 140%; }
.index .sec05 ul li div h3 span { font-size: 14px; display: block; }
.index .sec05 ul li div article { padding: 2%; flex-basis: 50%; }
.index .sec05 ul li:after { content: url("../img/arrow2.png"); display: block; text-align: center; padding: 20px; }
.index .sec05 ul li p { background: #fffce1; padding: 10px; margin-top: 10px; font-size: 90%; }
.index .sec05 ul li:last-child:after { display: none; }
.index .sec06 .section div { border: 5px solid #dddddd; margin: 20px; }
.index .sec06 .section h3 { background: #eee; text-align: center; padding: 10px; color: #1d1d1d; font-weight: 600; }
.index .sec06 .section ul { padding: 15px; display: flex; justify-content: space-between; }
.index .sec06 .section ul li { flex-basis: 47%; position: relative; border-right: 1px solid gray; padding: 1%; display: flex; align-items: center; }
.index .sec06 .section ul li:last-child { border-right: 0px; }
.index .sec06 .section ul li a { font-size: 25px; display: block; font-weight: 600; }
.index .sec06 .section ul li span { flex-basis: 20%; padding-right: 2%; }
.index .sec06 .section ul li p { flex-basis: 78%; line-height: 180%; }

.page h2 { font-family: 'Noto Serif JP', serif; font-size: 26px; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; color: #3e3e3e; }
.page h2:before { width: 30px; height: 10px; display: block; background: #fb3034; margin-right: 15px; content: " "; }

.kiyaku { padding: 10px; }
.kiyaku h3 { font-size: 20px; font-weight: 600; border-bottom: 1px dotted gray; padding: 10px; }
.kiyaku section { margin-bottom: 40px; }
.kiyaku ol { margin: 20px; }
.kiyaku ol li { list-style: decimal; margin-bottom: 20px; margin-left: 20px; }
.kiyaku p { color: red; }

.company { padding-bottom: 60px; }
.company ul li { display: flex; justify-content: space-between; }
.company ul li span { padding: 2%; flex-basis: 30%; }
.company ul li p { padding: 2%; flex-basis: 60%; }
.company ul li:nth-child(even) { background: #eee; }

.info { margin: 5px; padding: 10px; border: 3px solid #eee; }

/* 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 */
@media screen and (max-width: 480px) { .section, .index-mv, .page-mv, header .section, main .section { max-width: 480px; min-width: 300px; }
  .page-mv img { width: 100%; height: 100px; object-fit: cover; }
  header .logo { width: 120px; }
  header .head-menu { margin-right: 60px; }
  header .head-menu ul li { margin-left: 5px; }
  header nav, .index-mv .mv-nav { display: none; }
  .head-menu a span { display: none; }
  header .head-menu .la a img { width: 50px; margin-right: 0px; }
  header .section { position: relative; }
  header .section .contact-form { position: absolute; right: 0; top: 125%; display: none; }
  .page-mv { padding-top: 60px; }
  .page-mv h1 { font-size: 24px; }
  main { padding-top: 20px; padding-bottom: 20px; }
  header .head-menu .la a { padding-right: 0px; }
  .index h2 { font-size: 22px; }
  .index .sec01 article { padding-left: 0px; padding-bottom: 30px; }
  .index .sec03 ul { display: block; }
  .index .sec03 ul li { margin-bottom: 20px; }
  .index .sec05 ul li div { display: block; }
  .index .sec05 ul li div h3 { border-radius: 10px 10px 0 0px; }
  .index .sec06 .section ul { display: block; }
  .index .sec06 .section ul li { border-bottom: 1px solid gray; border-right: 0; font-size: 90%; }
  .side-nav { position: fixed; right: auto; bottom: 0px; z-index: 999; background: white; }
  .side-nav ul { display: flex; flex-wrap: wrap; }
  .side-nav ul li { flex-basis: 49%; margin: 0.5%; }
  .side-nav ul li a { height: 40px; }
  .side-nav ul li br { display: none; }
  .company ul li { display: block; padding-bottom: 20px; }
  .company ul li span { font-weight: 600; font-size: 110%; border-bottom: 1px dotted gray; display: block; } }
@media screen and (max-width: 600px) { .index section, .m-line section, .j-line section { background-size: auto 100%; } }