@charset "UTF-8";
/*
* Theme Name:1eal web site.
* Theme URI:https://1eal.com/
* Template:	   
* Author:real inc.
* Author URI:https://1eal.com/
* Description: 
* Version:1.0.0
* License:GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Tags:responsive-layout
* Text Domain:real
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Font Face
# Reset
# Utilities
# Header color
# Navigation color
# Footer color
# Content color
  # content
# Common parts color
--------------------------------------------------------------*/
/*-----
 # Font 
 -----*/
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/NotoSansCJKjp-Thin.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/NotoSansCJKjp-Thin.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/NotoSansCJKjp-Thin.ttf") format("truetype"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/NotoSansCJKjp-Light.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/NotoSansCJKjp-Light.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/NotoSansCJKjp-Light.ttf") format("truetype"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/NotoSansCJKjp-DemiLight.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/NotoSansCJKjp-DemiLight.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/NotoSansCJKjp-DemiLight.ttf") format("truetype"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/NotoSansCJKjp-Regular.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/NotoSansCJKjp-Regular.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/NotoSansCJKjp-Regular.ttf") format("truetype"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/NotoSansCJKjp-Medium.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/NotoSansCJKjp-Medium.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/NotoSansCJKjp-Medium.ttf") format("truetype"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/NotoSansCJKjp-Bold.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/NotoSansCJKjp-Bold.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/NotoSansCJKjp-Bold.ttf") format("truetype"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/NotoSansCJKjp-Black.woff") format("woff"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/NotoSansCJKjp-Black.woff2") format("woff2"); }
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/NotoSansCJKjp-Black.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Prompt-Think.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Prompt-Think.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Prompt-Thin.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Prompt-ExtraLight.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Prompt-ExtraLight.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Prompt-ExtraLight.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Prompt-Light.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Prompt-Light.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Prompt-Light.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Prompt-Regular.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Prompt-Regular.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Prompt-Regular.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/Prompt-Medium.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/Prompt-Medium.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/Prompt-Medium.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/Prompt-Bold.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/Prompt-Bold.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/Prompt-Bold.ttf") format("truetype"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/Prompt-Black.woff") format("woff"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/Prompt-Black.woff2") format("woff2"); }
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/Prompt-Black.ttf") format("truetype"); }
/*-----
 # Reset
 -----*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none; }

em {
  font-weight: normal;
  font-style: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: #fff; }

a:focus {
  outline: none; }

a:link, a:visited, a:hover, a:active {
  text-decoration: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block; }

audio:not([controls]) {
  display: none; }

del {
  color: #333; }

ins {
  text-decoration: none; }

hr {
  border: 0;
  height: 1px; }

sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

small {
  font-size: smaller; }

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic; }

i {
  font-style: normal; }

input, select, textarea {
  font-size: 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px; }

select {
  max-width: 100%;
  padding: .5714285em 2.14286em .5714285em .5714285em;
  border: 1px solid #e1e1e1; }

textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #bbb; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"] {
  padding: .5714285em;
  border: 1px solid #bbb; }

input[type="button"], input[type="submit"], input[type="reset"] {
  padding: .714288em 1.42857em;
  background-color: #efefef;
  border: none;
  -webkit-transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer; }

input[type="checkbox"] {
  border: 1px solid #ccc;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox; }

input[type="radio"] {
  border: 1px solid #bbb;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio; }

input[type="file"] {
  border: none; }

/*-----
 # common
 -----*/
*, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  max-width: 2120px;
  margin: auto; }

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-weight: 400;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  font-feature-settings: 'palt' 1;
  letter-spacing: 1px;
  line-height: 1.8;
  color: #404040; }

.clearfix:after {
  content: "";
  height: 0;
  display: block;
  clear: both; }

.open {
  -webkit-transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
  transition: 0.3s ease all; }

/*-----
 # Utilities
 -----*/
.mtop_0 {
  margin-top: 0px; }

.mbottom_0 {
  margin-bottom: 0px; }

.mleft_0 {
  margin-left: 0px; }

.mright_0 {
  margin-right: 0px; }

.ptop_0 {
  padding-top: 0px; }

.pbottom_0 {
  padding-bottom: 0px; }

.pleft_0 {
  padding-left: 0px; }

.pright_0 {
  padding-right: 0px; }

.mtop_5 {
  margin-top: 5px; }

.mbottom_5 {
  margin-bottom: 5px; }

.mleft_5 {
  margin-left: 5px; }

.mright_5 {
  margin-right: 5px; }

.ptop_5 {
  padding-top: 5px; }

.pbottom_5 {
  padding-bottom: 5px; }

.pleft_5 {
  padding-left: 5px; }

.pright_5 {
  padding-right: 5px; }

.mtop_10 {
  margin-top: 10px; }

.mbottom_10 {
  margin-bottom: 10px; }

.mleft_10 {
  margin-left: 10px; }

.mright_10 {
  margin-right: 10px; }

.ptop_10 {
  padding-top: 10px; }

.pbottom_10 {
  padding-bottom: 10px; }

.pleft_10 {
  padding-left: 10px; }

.pright_10 {
  padding-right: 10px; }

.mtop_15 {
  margin-top: 15px; }

.mbottom_15 {
  margin-bottom: 15px; }

.mleft_15 {
  margin-left: 15px; }

.mright_15 {
  margin-right: 15px; }

.ptop_15 {
  padding-top: 15px; }

.pbottom_15 {
  padding-bottom: 15px; }

.pleft_15 {
  padding-left: 15px; }

.pright_15 {
  padding-right: 15px; }

.mtop_20 {
  margin-top: 20px; }

.mbottom_20 {
  margin-bottom: 20px; }

.mleft_20 {
  margin-left: 20px; }

.mright_20 {
  margin-right: 20px; }

.ptop_20 {
  padding-top: 20px; }

.pbottom_20 {
  padding-bottom: 20px; }

.pleft_20 {
  padding-left: 20px; }

.pright_20 {
  padding-right: 20px; }

.mtop_25 {
  margin-top: 25px; }

.mbottom_25 {
  margin-bottom: 25px; }

.mleft_25 {
  margin-left: 25px; }

.mright_25 {
  margin-right: 25px; }

.ptop_25 {
  padding-top: 25px; }

.pbottom_25 {
  padding-bottom: 25px; }

.pleft_25 {
  padding-left: 25px; }

.pright_25 {
  padding-right: 25px; }

.mtop_30 {
  margin-top: 30px; }

.mbottom_30 {
  margin-bottom: 30px; }

.mleft_30 {
  margin-left: 30px; }

.mright_30 {
  margin-right: 30px; }

.ptop_30 {
  padding-top: 30px; }

.pbottom_30 {
  padding-bottom: 30px; }

.pleft_30 {
  padding-left: 30px; }

.pright_30 {
  padding-right: 30px; }

.mtop_35 {
  margin-top: 35px; }

.mbottom_35 {
  margin-bottom: 35px; }

.mleft_35 {
  margin-left: 35px; }

.mright_35 {
  margin-right: 35px; }

.ptop_35 {
  padding-top: 35px; }

.pbottom_35 {
  padding-bottom: 35px; }

.pleft_35 {
  padding-left: 35px; }

.pright_35 {
  padding-right: 35px; }

.mtop_40 {
  margin-top: 40px; }

.mbottom_40 {
  margin-bottom: 40px; }

.mleft_40 {
  margin-left: 40px; }

.mright_40 {
  margin-right: 40px; }

.ptop_40 {
  padding-top: 40px; }

.pbottom_40 {
  padding-bottom: 40px; }

.pleft_40 {
  padding-left: 40px; }

.pright_40 {
  padding-right: 40px; }

.mtop_45 {
  margin-top: 45px; }

.mbottom_45 {
  margin-bottom: 45px; }

.mleft_45 {
  margin-left: 45px; }

.mright_45 {
  margin-right: 45px; }

.ptop_45 {
  padding-top: 45px; }

.pbottom_45 {
  padding-bottom: 45px; }

.pleft_45 {
  padding-left: 45px; }

.pright_45 {
  padding-right: 45px; }

.mtop_50 {
  margin-top: 50px; }

.mbottom_50 {
  margin-bottom: 50px; }

.mleft_50 {
  margin-left: 50px; }

.mright_50 {
  margin-right: 50px; }

.ptop_50 {
  padding-top: 50px; }

.pbottom_50 {
  padding-bottom: 50px; }

.pleft_50 {
  padding-left: 50px; }

.pright_50 {
  padding-right: 50px; }

.mtop_55 {
  margin-top: 55px; }

.mbottom_55 {
  margin-bottom: 55px; }

.mleft_55 {
  margin-left: 55px; }

.mright_55 {
  margin-right: 55px; }

.ptop_55 {
  padding-top: 55px; }

.pbottom_55 {
  padding-bottom: 55px; }

.pleft_55 {
  padding-left: 55px; }

.pright_55 {
  padding-right: 55px; }

.mtop_60 {
  margin-top: 60px; }

.mbottom_60 {
  margin-bottom: 60px; }

.mleft_60 {
  margin-left: 60px; }

.mright_60 {
  margin-right: 60px; }

.ptop_60 {
  padding-top: 60px; }

.pbottom_60 {
  padding-bottom: 60px; }

.pleft_60 {
  padding-left: 60px; }

.pright_60 {
  padding-right: 60px; }

.mtop_65 {
  margin-top: 65px; }

.mbottom_65 {
  margin-bottom: 65px; }

.mleft_65 {
  margin-left: 65px; }

.mright_65 {
  margin-right: 65px; }

.ptop_65 {
  padding-top: 65px; }

.pbottom_65 {
  padding-bottom: 65px; }

.pleft_65 {
  padding-left: 65px; }

.pright_65 {
  padding-right: 65px; }

.mtop_70 {
  margin-top: 70px; }

.mbottom_70 {
  margin-bottom: 70px; }

.mleft_70 {
  margin-left: 70px; }

.mright_70 {
  margin-right: 70px; }

.ptop_70 {
  padding-top: 70px; }

.pbottom_70 {
  padding-bottom: 70px; }

.pleft_70 {
  padding-left: 70px; }

.pright_70 {
  padding-right: 70px; }

.mtop_75 {
  margin-top: 75px; }

.mbottom_75 {
  margin-bottom: 75px; }

.mleft_75 {
  margin-left: 75px; }

.mright_75 {
  margin-right: 75px; }

.ptop_75 {
  padding-top: 75px; }

.pbottom_75 {
  padding-bottom: 75px; }

.pleft_75 {
  padding-left: 75px; }

.pright_75 {
  padding-right: 75px; }

.mtop_80 {
  margin-top: 80px; }

.mbottom_80 {
  margin-bottom: 80px; }

.mleft_80 {
  margin-left: 80px; }

.mright_80 {
  margin-right: 80px; }

.ptop_80 {
  padding-top: 80px; }

.pbottom_80 {
  padding-bottom: 80px; }

.pleft_80 {
  padding-left: 80px; }

.pright_80 {
  padding-right: 80px; }

.mtop_85 {
  margin-top: 85px; }

.mbottom_85 {
  margin-bottom: 85px; }

.mleft_85 {
  margin-left: 85px; }

.mright_85 {
  margin-right: 85px; }

.ptop_85 {
  padding-top: 85px; }

.pbottom_85 {
  padding-bottom: 85px; }

.pleft_85 {
  padding-left: 85px; }

.pright_85 {
  padding-right: 85px; }

.mtop_90 {
  margin-top: 90px; }

.mbottom_90 {
  margin-bottom: 90px; }

.mleft_90 {
  margin-left: 90px; }

.mright_90 {
  margin-right: 90px; }

.ptop_90 {
  padding-top: 90px; }

.pbottom_90 {
  padding-bottom: 90px; }

.pleft_90 {
  padding-left: 90px; }

.pright_90 {
  padding-right: 90px; }

.mtop_95 {
  margin-top: 95px; }

.mbottom_95 {
  margin-bottom: 95px; }

.mleft_95 {
  margin-left: 95px; }

.mright_95 {
  margin-right: 95px; }

.ptop_95 {
  padding-top: 95px; }

.pbottom_95 {
  padding-bottom: 95px; }

.pleft_95 {
  padding-left: 95px; }

.pright_95 {
  padding-right: 95px; }

.mtop_100 {
  margin-top: 100px; }

.mbottom_100 {
  margin-bottom: 100px; }

.mleft_100 {
  margin-left: 100px; }

.mright_100 {
  margin-right: 100px; }

.ptop_100 {
  padding-top: 100px; }

.pbottom_100 {
  padding-bottom: 100px; }

.pleft_100 {
  padding-left: 100px; }

.pright_100 {
  padding-right: 100px; }

/*-----
 # Header color
 -----*/
#header {
  width: 100%;
  height: 60px;
  display: block;
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25); }
  #header.scroll {
    background-color: #fff;
    position: fixed;
    top: 0; }
  #header .wrap {
    max-width: 980px;
    padding: 15px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; }
    #header .wrap h1 {
      width: 120px; }
    #header .wrap nav #nav {
      display: flex; }
      #header .wrap nav #nav li {
        padding-left: 30px; }
        #header .wrap nav #nav li a {
          color: #6A6969; }
          #header .wrap nav #nav li a:hover {
            color: #9D0000; }
        #header .wrap nav #nav li:nth-child(3):hover ul {
          display: block; }
        #header .wrap nav #nav li:nth-child(3) ul {
          display: none;
          position: absolute;
          top: 40px;
          padding: 10px 10px 10px 0; }
          #header .wrap nav #nav li:nth-child(3) ul li {
            display: block;
            padding: 2px 15px;
            margin: 3px 10px;
            background-color: rgba(0, 0, 0, 0.5); }
            #header .wrap nav #nav li:nth-child(3) ul li:hover {
              background-color: rgba(255, 255, 255, 0.5); }
              #header .wrap nav #nav li:nth-child(3) ul li:hover a {
                color: #252525; }
            #header .wrap nav #nav li:nth-child(3) ul li a {
              color: #fff;
              font-size: 0.9em !important; }
              #header .wrap nav #nav li:nth-child(3) ul li a i {
                display: none; }

@media screen and (max-width: 768px) {
  #header {
    height: 80px; }
    #header .wrap {
      display: block; }
      #header .wrap h1 {
        padding-top: 9px; }
      #header .wrap #toggle {
        width: 44px;
        height: 44px;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        cursor: pointer;
        z-index: 2; }
        #header .wrap #toggle span {
          width: 30px;
          display: block;
          position: absolute;
          font-size: 14px;
          font-size: 0.875rem;
          border-bottom: solid 2px #000;
          -webkit-transition: 0.25s ease-in-out;
          -moz-transition: 0.25s ease-in-out;
          -ms-transition: 0.25s ease-in-out;
          -o-transition: 0.25s ease-in-out;
          transition: 0.25s ease-in-out; }
          #header .wrap #toggle span:nth-child(1) {
            top: 9px; }
          #header .wrap #toggle span:nth-child(2) {
            top: 19px; }
          #header .wrap #toggle span:nth-child(3) {
            top: 29px; }
      #header .wrap nav {
        display: none;
        position: absolute;
        opacity: 0;
        z-index: 1;
        transition: ease .6s;
        -webkit-transition: 0.6s ease;
        -moz-transition: 0.6s ease;
        -ms-transition: 0.6s ease;
        -o-transition: 0.6s ease;
        transition: 0.6s ease; }

  .open#header {
    z-index: 5; }
  .open .wrap #toggle span {
    top: 18px !important; }
    .open .wrap #toggle span:nth-child(1) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .open .wrap #toggle span:nth-child(2), .open .wrap #toggle span:nth-child(3) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
  .open .wrap nav {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 80px;
    left: 0;
    background-color: #fff; }
    .open .wrap nav #nav {
      padding: 10px 0;
      display: block !important;
      background-color: rgba(0, 0, 0, 0.7); }
      .open .wrap nav #nav li {
        margin: 2px 0;
        display: block;
        padding: 12px 30px; }
        .open .wrap nav #nav li a {
          font-size: 1em !important;
          color: #fff !important;
          padding: 0 15px;
          font-weight: 500;
          letter-spacing: 2px; }
          .open .wrap nav #nav li a:hover {
            color: #fff !important; }
        .open .wrap nav #nav li:nth-child(3) ul {
          display: block !important;
          position: initial !important;
          background-color: unset !important; }
          .open .wrap nav #nav li:nth-child(3) ul:hover {
            background-color: unset !important; }
          .open .wrap nav #nav li:nth-child(3) ul li {
            background-color: unset !important;
            padding: 10px 15px !important; }
            .open .wrap nav #nav li:nth-child(3) ul li:hover {
              background-color: unset !important; }
              .open .wrap nav #nav li:nth-child(3) ul li:hover a {
                color: #fff !important; }
            .open .wrap nav #nav li:nth-child(3) ul li a i {
              display: inline-block !important;
              color: rgba(255, 89, 89, 0.89);
              padding-right: 30px; } }
/*-----
 # Footer color
 -----*/
#footer {
  background-color: #fff;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25); }
  #footer p {
    padding: 10px;
    color: #6A6969;
    text-align: center; }

/*-----
 # Content color
 -----*/
#main {
  width: 100%;
  padding-top: 0;
  position: relative;
  overflow: hidden; }
  #main div {
    width: 100vw;
    height: 100%;
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0; }
  #main video {
    z-index: 1;
    position: relative;
    width: 100% !important;
    height: 100% !important; }
    #main video #video_sp {
      display: none; }

#about {
  text-align: center;
  background-image: url("./img/main.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 50px 30px;
  margin: 100px 0; }
  #about p:first-child {
    width: fit-content;
    padding: 0 20px;
    margin: 0 auto;
    font-size: 2.2em;
    border-bottom: solid #9D0000 2.5px;
    letter-spacing: 15px; }
  #about p:last-child {
    font-size: 1.4em;
    line-height: 3;
    padding-top: 40px; }
    #about p:last-child .sp {
      display: none; }

#service .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }
  #service .wrap dl {
    width: 30%;
    padding: 40px 15px; }
    #service .wrap dl dt {
      text-align: center;
      padding-bottom: 40px; }
      #service .wrap dl dt img {
        width: 70%; }
    #service .wrap dl dd {
      font-size: 14px; }

#performance h2 span {
  left: 480px; }
#performance section .wrap {
  padding: 40px 0;
  margin: 0 auto;
  max-width: 980px; }
#performance section:not(:last-of-type) {
  box-shadow: 0 21px 26px -11px rgba(0, 0, 0, 0.2);
  position: relative;
  border-bottom: solid #F6F6F6 60px; }
#performance #graphic_design .list .theme {
  font-size: 15px; }

#studio ul {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  margin: 20px; }
  #studio ul li {
    width: 26%;
    box-shadow: 0 14px 13px -5px rgba(0, 0, 0, 0.2); }
    #studio ul li:first-child {
      width: 70%;
      margin-right: 2%; }
    #studio ul li img {
      width: 100%; }
    #studio ul li:nth-of-type(2) {
      box-shadow: none; }
      #studio ul li:nth-of-type(2) ul {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        margin: 0; }
        #studio ul li:nth-of-type(2) ul li {
          width: 100% !important;
          box-shadow: 0 14px 13px -5px rgba(0, 0, 0, 0.2); }
          #studio ul li:nth-of-type(2) ul li:first-child {
            margin: 0 0 7.5%; }
          #studio ul li:nth-of-type(2) ul li:last-child {
            margin: 7% 0 0; }

#contact .explain {
  padding-left: 35px; }
  #contact .explain p {
    padding-left: 15px; }
    #contact .explain p:last-child {
      padding: 40px 0 0 20px;
      font-size: 0.8em; }
#contact #form li p {
  text-align: center; }
  #contact #form li p .text {
    width: 90% !important;
    height: 100% !important;
    margin: 15px;
    border-radius: 10px;
    border: solid #E0E0E1 2px;
    padding: 15px;
    font-size: 14px; }
#contact #form li:last-child p button {
  padding: 10px 40px; }

#company .wrap {
  text-align: center; }
  #company .wrap table {
    width: 85%;
    max-width: 850px;
    margin: 20px auto;
    border-collapse: collapse; }
    #company .wrap table th, #company .wrap table td {
      border: solid 1px #E0E0E1;
      padding: 3px 10px;
      font-weight: 400;
      color: #838383; }
  #company .wrap .map {
    margin: 30px 45px;
    padding-top: 20px;
    text-align: left; }
    #company .wrap .map h4 {
      width: 100%;
      max-width: 725px;
      margin: 0 auto; }
      #company .wrap .map h4 img {
        width: 140px;
        padding-bottom: 20px; }
    #company .wrap .map figure {
      text-align: center; }

@media screen and (max-width: 768px) {
  #main {
    max-width: 768px;
    max-height: 560px;
    min-height: initial !important;
    padding-top: 80px; }

  #about {
    background-size: 50%;
    margin: 50px 0 0;
    padding: 50px 25px 0; }
    #about p:first-child {
      font-size: 1.2em;
      letter-spacing: 10px;
      padding: 5px 6px; }
    #about p:last-child {
      font-size: 0.9em; }
      #about p:last-child .sp {
        display: inline; }

  #service .wrap {
    display: block;
    padding: 40px 20px; }
    #service .wrap dl {
      width: 100%;
      padding: 30px 10px; }
      #service .wrap dl dt {
        text-align: center;
        padding-bottom: 30px; }
        #service .wrap dl dt img {
          width: 60%;
          max-width: 320px; }
      #service .wrap dl dd {
        font-size: 0.8em; }

  #performance h2 span {
    left: 80px; }
  #performance #video_creation .list li:nth-child(5), #performance #video_creation .list li:nth-child(6), #performance #video_creation .list li:nth-child(7), #performance #video_creation .list li:nth-child(8) {
    display: none; }

  #studio ul {
    display: block;
    padding: 20px; }
    #studio ul li {
      width: 100%;
      margin: 20px 0 !important; }
      #studio ul li:first-child {
        width: 100%; }
      #studio ul li:nth-of-type(2) {
        margin: none; }
        #studio ul li:nth-of-type(2) ul {
          display: block;
          padding: 0; }

  #contact .explain {
    padding: 20px;
    font-size: 0.9em; }

  #company table {
    width: 100%;
    max-width: 600px;
    padding: 10px 20px;
    margin: 0 auto;
    display: block; }
    #company table tbody {
      display: block; }
      #company table tbody tr {
        display: block;
        padding: 15px 0;
        border-bottom: solid #E9E9E9 1px; }
        #company table tbody tr th {
          display: block;
          border: none !important;
          color: #919191;
          font-size: 0.9em; }
        #company table tbody tr td {
          display: block;
          border: none !important;
          padding-left: 40px;
          font-size: 0.9em; }
  #company .map figure {
    position: relative;
    width: 100%;
    padding-top: 69%;
    /* = height ÷ width × 100 */ }
    #company .map figure iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; } }
/* pages */
#video_creation,
#graphic_design,
#website_creation {
  padding-top: 60px; }

.video_creation {
  max-width: 980px;
  padding: 50px 0; }
  .video_creation h3 {
    padding: 30px; }

.thanks .thanks_page h3:not(span) {
  font-size: 1.5em;
  margin-bottom: 50px; }
.thanks .thanks_page div {
  background-image: url(./img/main.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 50px 30px; }
  .thanks .thanks_page div p {
    font-size: 1.4em;
    text-align: center;
    line-height: 3;
    padding-top: 40px;
    margin-bottom: 20px; }

/*-----
 # Common parts color
 -----*/
body section {
  margin: 40px auto; }
  body section.content {
    padding-top: 60px; }
  body section .wrap {
    max-width: 980px;
    margin: 60px auto; }
  body section p {
    color: #767575; }
  body section h2 {
    width: 100%;
    box-shadow: 0 21px 26px -11px rgba(0, 0, 0, 0.2);
    position: relative;
    border-bottom: solid #CECECF 60px; }
    body section h2 img {
      height: 50px;
      position: absolute;
      left: 20px;
      top: 3px; }
    body section h2 span {
      position: relative;
      top: 26px;
      left: 300px;
      font-weight: 400;
      color: #6B6A6A; }
  body section h3 {
    text-align: center; }
    body section h3 img {
      height: 30px; }
    body section h3 span {
      display: block;
      color: #6B6A6A;
      font-weight: 400;
      padding-top: 10px; }

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 40px 25px; }
  .list li {
    width: 23.5%;
    padding-bottom: 20px;
    margin: 30px 0; }
    .list li img {
      width: 100%; }
    .list li .tag {
      font-size: 9px;
      color: #1D2B58;
      padding: 15px 0 5px; }
      .list li .tag span {
        display: inline-block;
        border: solid #1D2B58 1px;
        padding: 0 5px;
        margin: 2px 5px 2px 0;
        white-space: nowrap; }
    .list li .name {
      font-size: 11px;
      color: #6E6E6E;
      padding-top: 5px; }
      .list li .name a {
        color: #6e6e6e; }
        .list li .name a:hover {
          color: #000; }

.more {
  text-align: center;
  padding-bottom: 60px; }
  .more a {
    color: #B0B0B1;
    padding: 15px 50px;
    border: solid #B1B1B2 1px; }

@media screen and (max-width: 768px) {
  h2 {
    text-align: left; }
    h2 img {
      height: 32px !important;
      top: 12px !important; }
    h2 span {
      left: 70px !important;
      top: 45px !important;
      font-size: 0.8em; }

  .list {
    display: block;
    padding: 50px 20px; }
    .list li {
      width: 100%;
      max-width: 450px;
      margin: 0 auto;
      padding: 30px 0; }
      .list li .tag, .list li .name {
        font-size: 11px;
        padding: 10px 0;
        text-align: left; }
      .list li .tag {
        padding-top: 20px; }
        .list li .tag span {
          padding: 1px 6px; }
      .list li .theme {
        padding-top: 5px;
        padding-left: 5px;
        text-align: left; }
      .list li .name:hover {
        color: #6e6e6e; } }
/*-----
 # modal parts color
 -----*/
.modal-open {
  cursor: pointer; }

.js-modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; }
  .js-modal .modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%; }
  .js-modal .modal__content {
    width: 90%;
    max-width: 550px;
    padding: 25px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .js-modal #modal__img {
    max-width: 100%;
    margin: 0 auto 15px;
    display: block; }
  .js-modal .modal__inner h4 {
    font-size: 14px;
    font-size: 0.875rem;
    text-align: center;
    position: relative; }
    .js-modal .modal__inner h4 span {
      font-weight: normal;
      font-size: 12px;
      position: absolute;
      right: 0; }
  .js-modal .modal__inner p span {
    font-size: 12px;
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 10px;
    display: inline-block; }
  .js-modal .modal-close {
    font-size: 18px;
    font-size: 1.125rem;
    text-align: center;
    padding: 15px 0 8px;
    display: block;
    cursor: pointer; }

/*-----
 # lity color
 -----*/
.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  transition: opacity 0.3s ease; }
  .lity.lity-opened {
    opacity: 1; }
  .lity.lity-closed {
    opacity: 0; }
  .lity * {
    box-sizing: border-box; }

.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important; }
  .lity-wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; }

.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease; }
  .lity-loading .lity-loader {
    opacity: 1; }

.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important; }

.lity-content {
  z-index: 9993;
  width: 100%;
  transform: scale(1);
  transition: transform 0.3s ease; }
  .lity-loading .lity-content, .lity-closed .lity-content {
    transform: scale(0.8); }
  .lity-content:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

.lity-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none; }
  .lity-close::-moz-focus-inner {
    border: 0;
    padding: 0; }
  .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial, Baskerville, monospace;
    line-height: 35px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    border: 0;
    background: none;
    outline: none;
    box-shadow: none; }
  .lity-close:active {
    top: 1px; }

/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0; }

/* iFrame */
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  width: 100%;
  max-width: 964px; }

.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch; }
  .lity-iframe-container iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

.lity-hide {
  display: none; }