@charset "UTF-8";

/****************************************ページ全体の設定*/
@media screen {
* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 line-height: 175%;
}
html {
 width: 100%;
 height: 100%;
}
body {
 color: #ffffff;
 text-align: left;
 width: 100%;
 height: 100%;
 background-color: #000;
}
/*見出しの設定*/
h1 .texts {/*ページタイトルの説明文*/
 margin: 10px 0px 10px 5px;
 font-size: 45%;
 color: #FFCCCC;
}
h2 {/*中見出し*/
 font-size: 120%;
 vertical-align: super;
 line-height: 100%;
 margin: 15px 10px;
 padding-left: 10px;
 padding-top: 2px;
 border-left: 19px solid #ffffff;
}
h3 {/*小見出し*/
 clear: both;
 margin: 10px 0px;
 padding: 0px 0px 5px 5px;
 font-weight: bold;
 font-size: 110%;
 border-bottom: 1px dotted #dddddd;
}
h3 span {/*小見出し*/
 font-weight: lighter;
 font-size: 60%;
}
h4 {/*小見出し*/
 clear: both;
 margin: 10px 0px 5px 0px;
 padding: 0px;
 font-weight: bold;
 font-size: 100%;
 color: #ffcccc;
}
/*フォントの設定*/
.bigger {
 font-size: 120%;
 vertical-align: top;
}
.biggest {
 font-size: 200%;
 text-align: center;
}
.notice {/*注意書き（文字）*/
 color: #FF6666;
}
/*Aリンクの設定*/
a {
 text-decoration: none;
 color: #eeeeee;
 border-radius: 0.2em;
}
a:link {
 color: #D8EDFF;
}
a:visited {
}
a:hover {
 color: #FF9040;
}
a:active {
 color: #FF9040;
}
/*改行のおまじない*/
.space {
 height: 8px;
}
/* ulリストの設定*/
ul li, menu li {
 list-style: none;
}
/*イメージの設定*/
img {/*初期値として全画像に枠と余白をつけないようにしている*/
 border: none;
 vertical-align: bottom;
}
/*フォームの設定*/
form {/*初期値としてFORMの周囲に余白をつけないようにしている*/
 margin: 0px;
}
textarea {
 resize: none;
}
select {
 font-size: 100%;
 padding: 2px;
}
/*アドレスの設定*/
address {
 text-decoration: none;
 font-style: normal;
}
}

/****************************************ヘッダの設定*/
@media screen {
/*英語ページへのリンクの設定*/
#lang_to {
 z-index: 9999;
 position: absolute;
 display: block;
 background-color: #000;
 font-size: 10pt;
 font-weight: bold;
 border-radius: 0.4em;
}
#lang_to:hover {
 background-color: #333;
}
header input {
 display: none;
 z-index: 9998;
}
/*背景の設定*/
body>header>div.bg {
 position: fixed;
 width: 100vw;
 height: 100vh;
 z-index: -1;
}
body>header>div.bg>div {
 position: fixed;
 font-size: 0;
}
body>header>div.bg>div.bg_style_imag {
 width: 38vw;
 height: 38vh;
 top: 15%;
 left: 10%;
 z-index: -1;
 opacity: 0.3;
 background-image: url("../img/parts/top/tech_for_smiles.png");
 background-blend-mode: overlay;
 background-size: contain;
 background-repeat: no-repeat;
}
body>header>div.bg>div.bg_style_color {
 width: 100vw;
 height: 100vh;
 z-index: -1;
 opacity: 0.4;
 background-color: #000000;
}
/***ヘッダメニューの設定*/
/*下段*/
#main_menu ul {
 font-size: 0;
}
#main_menu ul li {
 font-size: 12pt;
}
#main_menu a {
 cursor: pointer;
 display: block;
 color: #FFFFFF;
}
#main_menu ul ul li a {
 font-size: 85%;
}
}

@media only screen and (max-width: 959px) {
header {
 width: 100%;
 min-width: 320px;
 height: auto;
}
/*英語ページへのリンクの設定*/
#lang_to {
 padding: 4px 32px;
 top: 6px;
 right: 56px;
}
/*背景の設定*/
body>header>video.background_video {
 display: none
}
body>header>div.bg>div.bg_style_color {
	background-image: url("../img/parts/top/background_movie.png");
	background-size: cover;
}
/***ヘッダメニューの設定*/
#header_menu {
 position: absolute;
 background-color: #000;
 z-index: 9998;
 width: 100%;
 height: auto;
}
#header_menu_button + label, #header_menu_button:checked + label + label {
 background-position: center;
 background-size: cover;
 display: block;
 width: 32px;
 height: 32px;
 position: absolute;
 top: 5px;
 right: 10px;
}
#header_menu_button:checked + label, #header_menu_button + label + label {
 display: none;
}
#header_menu_button + label {
 background-image: url(../img/parts/header_menu_button_open.png);
}
#header_menu_button:checked + label + label {
 background-image: url(../img/parts/header_menu_button_close.png);
}
#header_menu > form > span {
 height: 0px;
 overflow: hidden;
 display: block;
}
#header_menu_button:checked + label + label + span {
 height: 100%;
 overflow: auto;
}
/*上段*/
header div.logo, header div.logo img {
 width: 128px;
}
#header_menu .message {
 padding: 7px 20px;
 background-color: #222;
}
/*下段*/
#main_menu ul li {
 border-bottom: thin solid #ccc;
}
#main_menu ul ul li:first-of-type {
 border-top: thin solid #ccc;
}
#main_menu ul ul li:last-of-type {
 border: none;
}
#main_menu a {
 padding: 4px 8px;
 margin: 4px;
}
#main_menu a:hover {
 background-color: #555;
}
#main_menu div a > span {
 display: none;
}
#main_menu div {
 display: flex;
 justify-content: space-between;
}
#main_menu div a {
 flex: 1 1 70%;
}
#main_menu div label {
 flex: 1 1 30%;
 padding: 4px;
 background-color: rgba(255,255,255,0.15);
 border-radius: 0.2em;
 min-width: 80px;
 height: 32px;
 margin: 4px;
 color: #fff;
 font-size: 16px;
 line-height: 24px;
 text-align: center;
}
#main_menu div:hover {
 background-color: #333;
}
#main_menu input + div > a + label, #main_menu input:checked + div > a + label + label {
 display: block;
}
#main_menu input:checked+div > a + label, #main_menu input + div > a + label + label {
 display: none;
}
#main_menu input + div + ul {
 height: 0px;
 overflow: hidden;
}
#main_menu input:checked + div + ul {
 height: 100%;
 overflow: auto;
 background-color: rgba(255,255,255,0.2);
}
}

@media screen and (min-width: 960px) {
header #header_menu {
 padding: 15px;
 width: 960px;
 margin: auto;
 display: flex;
}
/*英語ページへのリンクの設定*/
#lang_to {
 padding: 8px 32px;
 top: 8px;
 right: 16px;
}
/*背景の設定*/
body>header>video.background_video {
	z-index: -2;
 min-width: 100vw;
 min-height: 100vh;
 position: fixed;
 overflow: hidden;
 top: 50%;
 transform: translateY(-50%);
}
/*ヘッダメニューの設定*/
/*上段*/
header div.logo, header div.logo img {
 width: 265px;
}
header .message {
 padding: 0px 0px 0px 30px;
 font-size: 80%;
 color: #eeeeee;
}
header .message span {
 display: block;
}
/*下段*/
#main_menu div {
 display: flex;
}
#main_menu div>span {
 padding: 4px 0px;
}
#main_menu label span {
 display: none;
}
#main_menu ul {
 display: inline-flex;
}
#main_menu a {
 padding: 7px 20px;
}
#main_menu > ul > li {
 border-right: solid thin #cccccc;
}
#main_menu > ul > li:hover {
 background-color: rgba(0,0,0,0.2);
}
#main_menu > ul > li:last-of-type {
 border: none;
}
#main_menu ul > li > ul {
 z-index: 9999;
 display: none;
 position: absolute;
}
#main_menu ul > li > ul > li > ul {
 z-index: 9999;
 display: none;
 top: 0%;
 left: 100%;
 width: 120%;
}
#main_menu ul > li:hover > ul {
 display: block;
 background-color: rgba(0,0,0,0.9);
}
#main_menu ul > li > ul > li:hover > ul {
 display: block;
 background-color: rgba(0,0,0,0.7);
}
#main_menu ul ul li:hover {
 background-color: rgba(100,100,100,1);
}
}

/****************************************本文を囲む枠の設定(未精査)*/
@media screen {
main {
 display: block;
 color: #ffffff;
 font-size: 11pt;
}
main hr.hr_content {
 opacity: 0;
 margin: 10px auto;
 clear: both;
}
main hr.hidden {
 opacity: 0;
 margin: 10px auto;
 clear: both;
}
main section {
 display: block;
 margin: 10px auto;
 padding: 10px;
}
/*コンテンツ上のページ一覧サブメニューの設定*/
#sub_menu {
 font-size: 80%;
 width: 100%;
 background-color: rgba(0,0,0,0.50);
 margin: auto;
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
}
#sub_menu li {
 flex: 1 0 auto;
}
#sub_menu a {
 display: block;
 color: #FFFFFF;
 text-align: center;
}
#sub_menu a:hover {
 background-color: #555;
}
/***ページタイトルのパンくずの設定（遷移ナビ）***/
.pankuzu ol {
 display: flex;
 flex-flow: row wrap;
 font-size: 90%;
 margin: 10px;
 list-style: none;
}
.pankuzu ol li:last-of-type {
 padding: 0 5px;
}
/*ページトップタイトルの設定*/
.page_title {
 margin: 2%;
 font-weight: bolder;
 font-size: 180%;
}
/*コンテンツ枠内*/
#contents_box {
 background-color: rgba(0,0,0,0.50);
 margin: 0px auto;
 padding: 15px;
}
#contents_box div {
 margin: 10px auto;
}
#contents_box table td {
 padding: 5px;
}
#contents_box p {
 padding: 0px 10px;
}
/*枠付きBOXの設定*/
.kakomi {
 border: 4px double #fff;
 border-radius: 0.2em;
}
/*olリストの設定*/
#contents_box ol {
 padding: 24px 0;
 width: 92%;
 margin: auto;
 list-style-type: decimal;
}
#contents_box ol ol {
 padding: 8px 0;
 list-style-type: lower-roman;
}
/*コンテンツボックス内画像の設定*/
img.full_width_img {
 width: auto;
 max-width: 98%;
 border-radius: 0.2em;
 margin: 10px 0;
}
a > img.full_width_img:hover {
 opacity: 0.8;
}
#contents_box img {
 margin: 10px 10px;
	width: auto;
 max-width: 98%;
}
.img_waku {/*写真画像の枠*/
 border: 5px solid #ffffff;
 margin-bottom: 5px;
 border-radius: 0.2em;
 margin: 10px;
 width: auto;
}
.img_waku_smile {/*笑顔創造の枠*/
 outline: 1px solid #cccccc;
	max-width: 65% !important;
}
/*ページ末端ライン*/
.page_end {
 background-color: #cccccc;
 clear: both;
}
/*フォームの送信ボタンの設定*/
.sub_button {
 display: block;
 width: 200px;
 margin: 10px auto;
 padding: 10px;
 font-size: 100%;
 background-color: #555555;
 border: none;
 color: #FFFFFF;
 font-weight: bold;
 border-radius: 0.2em;
}
.sub_button:hover {/*同上マウスオーバー*/
 font-weight: bold;
 color: #FF9040;
}
.sub_button_off {/*フォームの送信ボタン（オフ）*/
 display: block;
 width: 200px;
 margin: 10px auto;
 padding: 10px;
 font-size: 100%;
 background-color: #bbbbbb;
 border: none;
 color: #FFFFFF;
 font-weight: bold;
 border-radius: 0.2em;
}
/*表の設定テスト*/
.table>ul {
 width: 95%;
 margin: auto;
}
.table>ul>li {
 display: flex;
}
.table>ul>li dt {
 min-width: 180px;
 font-weight: bold;
}
.table>ul>li dd {
 padding-left: 10px;
 font-weight: normal;
}
.table>dl dl {
 width: 95%;
 margin: auto;
}
.table .image {/*画像のあるセル*/
 border: none;
 text-align: center;
 vertical-align: top;
}
.flex {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
}
.flex .flex_container {
 flex: 1 1 50%;
}
.inline_flex {
 display: inline-flex;
 flex-flow: row wrap;
 background-color: none;
}
.inline_flex>li {
 padding-left: 0.5em;
 padding-right: 0.5em;
}
.inline_flex>li:first-child {
 padding-left: 0;
}
.inline_flex>li:last-child {
 padding-right: 0;
}
/****************************************会社情報内テーブル枠の設定*/
.com_table {
 width: 95%;
 margin: 0px auto;
}
.com_table td {
 border-bottom: 1px dotted #444;
 padding: 8px;
}
.com_table th {
 width: 10%;
 white-space: nowrap;
 border-bottom: 1px solid #00549D;
 padding: 8px;
 text-align: left;
}
.com_table p {
 margin: 0px;
}
.com_table .image {/*画像のあるセル*/
 border: none;
 text-align: center;
 vertical-align: top;
}
}

@media only screen and (max-width: 959px) {
main {
 padding-top: 40px;
 width: 100%;
}
/*コンテンツ上のページ一覧サブメニューの設定*/
#sub_menu {
 padding: 5px;
}
#sub_menu li {
 padding: 5px;
}
#sub_menu a {
 background-color: #333;
 padding: 5px;
}
/*ページタイトルの説明文*/
#page_title {
 width: 95%;
}
h1 .texts {/*ページタイトルの説明文*/
 display: block;
}
/*お問い合わせリンクバナーの設定*/
.otoiawase img {
 width: 95%;
 max-width: 840px;
}
/*表の設定テスト*/
.table>ul>li {
 flex-flow: column nowrap;
 background-color: rgba(0,0,0,0.5);
 margin-bottom: 4px;
 padding: 8px;
 border-radius: 0.2em;
}
.table>ul>li>dt {
 border-bottom: 1px dotted #ccc;
 margin-bottom: 4px;
 padding: 4px;
}
}

@media screen and (min-width: 960px) {
main {
 margin: 20px auto;
 width: 960px;
}
main div {
 border-radius: 0.2em;
}
/*コンテンツ上のページ一覧サブメニューの設定*/
#sub_menu {
 margin-top: 10px;
 padding: 8px 4px;
}
#sub_menu li {
 margin: 0;
 padding: 0 2px;
 border-left: 2px solid #fff;
}
#sub_menu li:first-of-type {
 border-left: none;
}
#sub_menu a {
 padding: 2px 5px;
 margin: -4px 0;
}
/*ページタイトル設定*/
#page_title {
 width: 960px;
 margin: 0px auto;
 padding: 15px;
}
.page_title {/*ページタイトル*/
 margin: 5px 0px 15px 5px;
 font-weight: bolder;
 font-size: 220%;
}
/*本文枠内の枠付きコンテナの設定*/
.kakomi {
 padding: 15px;
 width: 85%;
}
/*表の設定テスト*/
.table>ul>li {
 border-bottom: 1px dotted #37a;
}
.table>ul>li>dt {
 flex: 0 0 180px;
 text-align: center;
 padding: 8px;
}
.table>ul>li>dd {
 flex: auto;
 padding: 8px;
}
}

/****************************************上へ戻るボタンの設定*/
@media screen {
.gotop {
 margin: 30px;
 text-align: center;
}
.gotop a {
 padding: 10px;
 border: thin solid #cccccc;
 background-color: #000;
 font-size: 80%;
 color: #fff;
}
.gotop a:hover {
 background-color: #555;
}
}

/****************************************フッタの設定*/
@media only screen and (max-width: 959px) {
footer {
 color: #ffffff;
 width: 100%;
 min-width: 320px;
 margin: 25px 0 0 0;
 font-size: 130%;
 background-color: #222;
}
footer .sns_links {
 padding: 20px;
 text-align: center;
}
footer .sns_links img {
 margin: 5px;
}
footer label {
 display: block;
 text-align: center;
 font-weight: bold;
 width: 100%;
 background-color: #000;
 overflow: hidden;
 padding-top: 18px;
}
footer a {
 font-size: 70%;
}
footer lavel input:checked {
 height: auto;
}
footer label input {
 display: none;
}
footer label nav {
 font-weight: normal;
 height: 0px;
 width: 100%;
 margin: auto;
 display: flex;
 flex-flow: row wrap;
 padding-top: 20px;
 transition-duration: 0.5s;
 justify-content: center;
}
footer label input:checked + nav {
 height: auto;
}
footer label nav section {
 flex: 0 0 100%;
 margin-bottom: 15px;
}
footer label nav section li a {
 display: block;
 background-color: #222;
 padding: 4px;
 margin: 2px 20px;
}
footer .menu {
 width: 100%;
 text-align: center;
 margin: 10px auto;
 display: flex;
 flex-flow: row wrap;
}
footer .menu a {
 flex: 1 0 auto;
 padding: 5px;
 margin: 5px;
 background-color: #333;
}
footer .copy {
 display: block;
 text-align: center;
 padding: 10px;
 font-size: 70%;
}
footer .copy address {
 display: inline;
}
}

@media screen and (min-width: 960px) {
footer {
 color: #ffffff;
 width: 1000px;
 margin: 30px auto;
 font-size: 130%;
}
footer .sns_links {
 padding: 5px;
 text-align: center;
 margin-bottom: 80px;
}
footer .sns_links img {
 margin: 5px;
}
footer label {
 display: block;
 text-align: center;
 font-weight: bold;
 width: 100%;
 background-color: rgba(0,0,0,0.60);
 overflow: hidden;
 padding-top: 18px;
}
footer a {
 font-size: 70%;
}
footer lavel input:checked {
 height: auto;
}
footer label input {
 display: none;
}
footer label nav {
 font-weight: normal;
 height: 0px;
 width: 900px;
 margin: auto;
 display: flex;
 flex-flow: row wrap;
 padding-top: 20px;
 transition-duration: 0.5s;
}
footer label input:checked + nav {
 height: auto;
}
footer label nav section {
 flex: 0 0 300px;
 margin-bottom: 15px;
}
footer .menu {
 text-align: center;
 margin: 10px auto;
}
footer .menu a {
 padding: 2px 10px;
 border-left: medium solid #fff;
 border-radius: 0;
}
footer .menu a:last-of-type {
 border-right: medium solid #fff;
}
footer .copy {
 display: block;
 text-align: center;
 padding: 10px;
 font-size: 70%;
}
footer .copy address {
 display: inline;
}
}