@charset "UTF-8";
@media screen and (max-width: 520px) { html { margin: 0; padding: 0; box-sizing: border-box; font-size: 14px; max-width: 100%; overflow-x: hidden; }
  body { overflow-x: hidden; }
  .pc_display { display: none !important; }
  .sp_display { display: inherit !important; }
  .contents_title { font-size: 3.0rem; color: #26272b; font-family: ten-mincho, serif; margin: 0 0 100px 10%; }
  header { width: 100%; height: auto; padding: 5px 0; margin: 0; position: fixed; z-index: 998; }
  header h1 { display: inline; font-size: 0.5rem; line-height: 1.1; color: #26272b; margin: 0 0 5px 0; font-weight: 300; position: absolute; top: 5px; left: 10px; }
  header h1 #index_h1 { color: #ffffff; }
  header .header_logo { position: absolute; width: 50%; top: 30px; left: 10px; }
  header .header_logo img { width: 100%; height: auto; }
  .openbtn { position: fixed; background: none; cursor: pointer; width: 50px; height: 50px; border-radius: 5px; top: 10px; right: 10px; z-index: 1050; }
  .openbtn span { display: inline-block; transition: all .4s; /*アニメーションの設定*/ position: absolute; left: 14px; height: 3px; border-radius: 2px; background: #26272b; width: 45%; }
  .openbtn span:nth-of-type(1) { top: 15px; }
  .openbtn span:nth-of-type(2) { top: 23px; }
  .openbtn span:nth-of-type(3) { top: 31px; }
  .openbtn.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; }
  .openbtn.active span:nth-of-type(2) { opacity: 0; }
  .openbtn.active span:nth-of-type(3) { top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; }
  #g-nav { display: none; width: 100vw; height: 100vh; margin: 0; padding: 0; background: #94d4d4; z-index: 1048; position: fixed; font-family: ten-mincho, serif; font-size: 1.60rem; line-height: 2.0; }
  #g-nav-list { width: 100%; height: auto; margin: 0 auto; padding: 0; z-index: 1049; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); position: absolute; text-align: center; }
  #g-nav-list ul#g-nav-list { width: auto; height: auto; margin: 20px 0 0 0; display: flex; }
  #g-nav-list ul#g-nav-list li { font-family: ten-mincho, serif; color: #26272b; list-style: none; margin: 0 0 0 60px; font-size: 1.0rem; text-align: center; }
  #g-nav-list a span { display: block; font-weight: 300; }
  #g-nav-list a { color: #1e1b1b !important; text-decoration: none; padding: 10px; display: block; letter-spacing: 0.1em; transition: all .5s; cursor: pointer; }
  #g-nav a:hover { color: #fff; }
  #g-nav-list a::after { display: none; }
  ul.slider { position: relative; z-index: 1; max-width: 100vw; height: 100vh; margin: 0; padding: 0; }
  ul.slider li { margin: 0; padding: 0; display: inherit; }
  ul.slider li div { display: block; }
  ul.slider .slider-item01 { background: url(../images/sp/mainimg_01.png); background-size: cover; background-position: center; background-color: #a0d7da; }
  ul.slider .slider-item02 { background: url(../images/sp/mainimg_02.png); background-size: cover; background-position: center; background-color: #a0d7da; }
  ul.slider .slider-item03 { background: url("../images/sp/mainimg_logo.svg"); background-size: cover; background-position: bottom; background-color: #26272b; }
  ul.slider .slider-item { width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: 100%; }
  ul.slider #index_main { background: none; background-color: #fff; min-height: inherit; margin: 0; padding: 0; }
  #index_01 section { width: 100%; height: 100vh; margin: 0 auto; padding: 50% 0 0 0; display: inherit; }
  #index_02 { background-color: #94d4d4; background-image: none; padding: 25% 0 30px 0; }
  #index_02 section { width: 100%; height: auto; margin: 0 auto; padding: 50% 0 0 0; display: inherit; }
  section { width: 100%; height: 100%; margin: 0 auto; padding: 0; display: inherit; }
  #page_01 { background-image: url("../images/sp/index_bg01.png"); background-repeat: no-repeat; background-size: 100%; background-position: right bottom; }
  #page_02 { background-image: url("../images/sp/index_bg02.png"); background-repeat: no-repeat; background-size: 100%; background-position: left bottom; background-color: #f1f1f1; }
  #page_02 p { text-shadow: 0.5px 0.5px 1px #ffffff; }
  .header_contact { display: none; }
  .mainimg { background-color: #94d4d4; width: 100%; height: 100vh; }
  .mainimg h2 { width: 90%; height: auto; margin: 0 auto; display: block; font-size: 1.6rem; letter-spacing: 1.4; font-family: ten-mincho, serif; font-weight: 300; justify-content: center; align-content: center; text-align: center; position: absolute; z-index: 1000; bottom: 50%; left: 5%; }
  .mainimg h3 { width: 90%; height: auto; margin: 0 auto; display: block; font-size: 2.0rem; letter-spacing: 1.4; font-family: ten-mincho, serif; font-weight: 300; justify-content: center; align-content: center; text-align: center; position: absolute; z-index: 1000; bottom: 50%; left: 5%; }
  .mainimg h4 { width: 90%; height: auto; margin: 0 auto; font-size: 1.6rem; letter-spacing: 1.4; font-family: ten-mincho, serif; font-weight: 300; text-align: center; justify-content: center; align-content: center; position: absolute; z-index: 1000; color: #fff; left: 5%; }
  .index_contentsbox_l { width: 80%; height: auto; display: flex; flex-direction: column; margin-left: 10%; }
  .index_contentsbox_l .index_subtitle { width: auto; display: inline-block; font-family: ten-mincho, serif; font-size: 2.4rem; color: #26272b; background: linear-gradient(transparent 60%, #00b2db 0%); padding: 0 10px; }
  .index_contentsbox_l p { display: inherit; width: 100%; }
  .index_contentsbox_l .sub_nav { font-family: ten-mincho, serif; font-size: 1.8rem; font-weight: 200; width: 100%; text-align: right; }
  .index_contentsbox_l .sub_nav img { width: 70px; height: auto; margin-left: 10px; }
  .index_contentsbox_r { width: 80%; height: auto; flex-direction: column; margin: -100px 0 0 10%; }
  .index_contentsbox_r .index_subtitle { width: auto; display: inline-block; font-family: ten-mincho, serif; font-size: 2.4rem; color: #00b2db; background: linear-gradient(transparent 60%, #26272b 0%); padding: 0 10px; }
  .index_contentsbox_r p { display: inherit; width: 100%; }
  .index_contentsbox_r .sub_nav { font-family: ten-mincho, serif; font-size: 1.8rem; font-weight: 200; width: 100%; text-align: right; }
  .index_contentsbox_r .sub_nav img { width: 70px; height: auto; margin-left: 10px; }
  .index_works { width: 96%; height: auto; margin: 0 0 25% 2%; }
  .index_works ul { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
  .index_works ul li { width: 50%; list-style: none; padding: 0 5px; margin: 0 auto 10px auto; }
  .index_works ul li img { width: 100%; height: auto; }
  .footer_contact { width: 80%; height: auto; background-color: #26272b; color: #fff; text-align: center; margin: 40px auto 80px auto; padding: 30px; }
  .footer_contact .footer_contact_title { display: inline-block; background-color: #fff; font-family: Verdana, Geneva, "sans-serif"; color: #26272b; font-size: 1.4rem; font-style: italic; letter-spacing: 1.2; padding: 3px 60px; margin-bottom: 10px; transform: skewX(-20deg); }
  .footer_contact .footer_contact_title div { transform: skewX(20deg); }
  .footer_contact a { color: #fff; }
  .footer_contents { padding-bottom: 20px; }
  footer { width: 80%; text-align: center; margin: 0 auto; }
  footer h1 { font-size: 0.6rem; font-weight: 100; font-family: ten-mincho, serif; margin-bottom: 10px; }
  footer .footer_logo { width: 40%; height: auto; margin: 10px auto; }
  footer .footer_logo img { width: 100%; height: auto; }
  footer address { font-size: 0.6rem; font-weight: 100; font-family: ten-mincho, serif; border-bottom: solid 1px #26272b; padding-bottom: 5px; }
  footer ul#footer_nav { width: 100%; margin: 20px auto; padding: 0; display: flex; justify-content: space-between; font-size: 0.8rem; }
  footer ul#footer_nav li { list-style: none; margin: 0; }
  .index_works { width: 96%; height: auto; margin: 40px 0 25% 5%; background-color: #94d4d4; }
  .works_slider { height: 100%; display: flex; flex-wrap: wrap; }
  .works_slider .rev_slide_01, .works_slider .rev_slide_02, .works_slider .rev_slide_03, .works_slider .rev_slide_04, .works_slider .rev_slide_05, .works_slider .rev_slide_06 { width: 80%; height: 160px; overflow: hidden; margin: 0 10% 10px 10%; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.4); }
  .works_slider .rev_slide_01 img, .works_slider .rev_slide_02 img, .works_slider .rev_slide_03 img, .works_slider .rev_slide_04 img, .works_slider .rev_slide_05 img, .works_slider .rev_slide_06 img { width: 100%; height: 160px; object-fit: cover; }
  .works_slider .rev_slide_01 img:hover, .works_slider .rev_slide_02 img:hover, .works_slider .rev_slide_03 img:hover, .works_slider .rev_slide_04 img:hover, .works_slider .rev_slide_05 img:hover, .works_slider .rev_slide_06 img:hover { transform: scale(1.2); transition-duration: 2s; }
  #contents_main { width: 100%; height: auto; margin: 0; padding: 80px 0 0 0; }
  #contents_main .contents_box { width: 100%; height: auto; margin: 0 auto 40px auto; }
  #contents_company { background-color: #fff; background-image: url("../images/company_mainimg.png"); background-repeat: no-repeat; background-position: right top; background-size: 100%; padding: 10px 0 20px 0; }
  #contents_company h2 { margin: 0 0 20px 10%; font-size: 2.4rem; font-weight: 900; color: #00b2db; }
  #contents_company p { width: 80%; margin: 40px auto 20px auto; }
  #contents_service { background-color: #fff; background-image: url("../images/service_mainimg.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; padding: 40px 0; }
  #contents_service h2#service01 { width: 90%; margin: 40px 0 40px 0; padding: 0 0 0 60px; background-image: url("../images/service_bg01.png"); background-repeat: no-repeat; background-position: right bottom; background-size: 100%; font-size: 2.4rem; font-weight: 900; color: #26272b; }
  #contents_service div.service_menu { width: 90%; padding: 5px 40px; margin: 60px auto 0 auto; border: solid 3px #26272b; margin-left: 5%; background-color: rgba(255, 255, 255, 0.4); }
  #contents_service div.service_menu h3 { font-size: 2.0; letter-spacing: 1.5; font-weight: 900; line-height: 2.0; }
  #service02 { margin: 0 0 80px 0; background-image: url("../images/service_bg05.png"); background-repeat: no-repeat; background-position: left; background-size: 80%; }
  #service02 h2 { width: 100%; margin: 40px 0 40px 10%; padding: 0 0 0 60px; background-image: url("../images/service_bg02.png"); background-repeat: no-repeat; background-position: right bottom; background-size: 100%; font-size: 2.4rem; font-weight: 900; color: #26272b; }
  #service02 h4 { margin: 20px 0; text-align: center; font-size: 1.4rem; }
  #service02 div.service_menu { width: 90%; padding: 5px 40px; border: solid 3px #26272b; margin: 100px 0 0 5%; background-color: rgba(255, 255, 255, 0.4); }
  #service02 div.service_menu h3 { font-size: 2.0; letter-spacing: 1.5; font-weight: 900; line-height: 2.0; }
  #service03 { margin: 0 0 80px 0; background-image: url("../images/service_bg04.png"); background-repeat: no-repeat; background-position: center; background-size: 80%; }
  #service03 h2 { width: 100%; margin: 40px 0 40px 0; padding: 0 0 0 60px; background-image: url("../images/service_bg03.png"); background-repeat: no-repeat; background-position: left bottom; background-size: 80%; font-size: 2.4rem; font-weight: 900; color: #26272b; }
  #service03 div.service_menu { width: 90%; padding: 5px 40px; border: solid 3px #26272b; margin: 220px 0 0 5%; background-color: rgba(255, 255, 255, 0.4); }
  #service03 div.service_menu h3 { font-size: 2.0; letter-spacing: 1.5; font-weight: 900; line-height: 2.0; }
  #contact_header { background-image: url("../images/contact_bg.png"); background-repeat: no-repeat; background-size: cover; }
  #contact_header p { width: 80%; margin: 0 auto; }
  .table_company { width: 80%; height: auto; margin: 0 auto 40px auto; background-color: #fff; }
  .table_company th, .table_company td { border-collapse: 0; border-bottom: solid 2px #94d4d4; padding: 10px 20px 5px 20px; text-align: left; }
  .g-map { width: 100%; height: 400px; }
  .g-map iframe { width: 100%; height: 400px; }
  .formtable { width: 90%; margin: 0 auto 40px auto; border-spacing: 0; }
  .formtable th { width: 30%; border-bottom: solid 2px #00b2db; padding: 20px 0 10px 0; text-align: center; vertical-align: middle; white-space: nowrap; }
  .formtable td { width: 70%; border-bottom: solid 1px #26272b; text-align: left; padding: 20px 0 10px 0; }
  .formtable_kakunin { width: 100%; margin: 0 auto 40px auto; border-spacing: 0; }
  .formtable_kakunin th { width: 30%; border-bottom: solid 2px #00b2db; padding: 20px 0 10px 0; text-align: center; vertical-align: middle; white-space: nowrap; }
  .formtable_kakunin td { width: 70%; border-bottom: solid 1px #26272b; text-align: left; padding: 20px 0 10px 0; }
  .input_box { width: 90%; padding: 10px; background-color: #fff; margin: 0 10px 0 0; overflow: hidden; }
  input.btn_style { font-size: 1.2rem; padding: 10px 40px; border: solid 2px #00b2db; background-color: #fff; color: #26272b; position: relative; overflow: hidden; text-decoration: none; display: inline-block; text-align: center; outline: none; transition: ease .2s; }
  input.btn_style span { position: relative; z-index: 3; color: #26272b; }
  input.btn_style:hover { color: #26272b; background-color: #fff; border: solid 3px #26272b; transition: all 0.2s; }
  input.bgskew::before { content: ''; position: absolute; top: 0; left: -130%; background: #00b2db; width: 120%; height: 100%; transform: skewX(-25deg); }
  input.bgskew#submit { background-color: #94d4d4; }
  input.bgskew:hover::before { animation: skewanime .5s forwards; }
  input[type=checkbox] { display: none; }
  .checkbox { box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 30px; position: relative; width: auto; }
  .checkbox::before { background: #fff; border: solid 1px #26272b; content: ''; display: block; width: 16px; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; }
  .checkbox::after { border-right: 3px solid #214492; border-bottom: 3px solid #214492; content: ''; display: block; width: 7px; height: 9px; left: 10px; margin-top: -5px; opacity: 0; position: absolute; top: 50%; transform: rotate(45deg); }
  input[type=checkbox]:checked + .checkbox::after { opacity: 1; }
  /* ラジオボタン01 */
  input[type=radio] { display: none; }
  .radio01 { width: 100%; height: auto; box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 30px; position: relative; }
  .radio01::before { background: #fff; border: 1px solid #26272b; border-radius: 50%; content: ''; display: block; width: 16px; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; }
  .radio01::after { background: #00b2db; border-radius: 50%; content: ''; display: block; width: 10px; height: 10px; left: 8px; margin-top: -5px; opacity: 0; position: absolute; top: 50%; }
  input[type=radio]:checked + .radio01::after { opacity: 1; }
  .jump_btn { width: 250px; height: auto; padding: 10px 30px; margin: 40px auto 0 auto; border: solid 1px #26272b; text-align: center; background-color: #fff; }
  .jump_btn a { display: block; color: #26272b; }
  .jump_btn:hover { background-color: #00b2db; }
  .required { display: inline-block; font-size: 0.8rem; font-weight: 300; color: #fff; background-color: #94d4d4; padding: 1px 3px; border-radius: 16px; margin-left: 3px; }
  ul#protectionpolicy { width: 100%; height: auto; margin: 0 auto; padding: 10px; background-color: #F2F2F2; }
  ul#protectionpolicy li { list-style: none; margin: 0 0 20px 0; padding: 0; text-align: left; }
  ul#protectionpolicy span { display: block; width: 100%; height: auto; font-weight: bold; border-bottom: solid 1px #26272b; padding: 0 0 5px 0; margin: 0 0 20px 0; }
  ul#protectionpolicy p { width: 96%; height: auto; margin-left: 2%; }
  ul#protectionpolicy ul#inline_list { width: auto; height: auto; margin: 0 auto 0 10%; padding: 0; }
  ul#protectionpolicy ul#inline_list li { margin: 0 0 5px 0; padding: 0; list-style: disc; }
  #pp_check { text-align: center; margin: 10px 0; }
  #pp_check input#check_box { margin: 0 10px 0 0; } }
@media screen and (max-width: 375px) { #page_02 { background-image: url("../images/sp/index_bg02.png"); background-repeat: no-repeat; background-size: 80%; background-position: left bottom; background-color: #f1f1f1; } }