@charset "utf-8";

/* RESET
---------------------------------------- */
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%; vertical-align:baseline; background:transparent;}

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

ul,ol {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none;}

del {text-decoration:line-through;}

abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

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

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

body {-webkit-text-size-adjust:none;}

address {font-style:normal;}

* {box-sizing: border-box;}

/*
 *	COMMON CLASS
 *
 *------------------------------------*/

body {font-size: 16px; line-height: 1.8;}

sup {font-size: 0.5em; vertical-align: super;}

.tac {text-align: center;}

.error {color: #F00; font-weight: bold;}

/* 
 * 共通レイアウト
 * ------------------------- */

header {position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 80px; background: rgba(255,255,255,0.7)}
.header-inner {width: 1000px; margin: 0 auto;}
.header-logo {float:left;}
.header-logo img {width: 175px;}
.header-nav {float: right;}
.header-nav-item {float: left;}
.header-nav-item a {display: block; width: 120px; height: 80px; text-align: center; line-height: 80px; color: #000; text-decoration: none;}
.header-nav-item a:hover {background: rgba(255,255,255,0.2);}
.header-toggle-sp-nav {display: none;}
.header-sp-nav {display: none;}

.footer-inquiry {padding-bottom: 50px;}
.footer-inquiry::before {content: ""; display: block; width: 100%; height: 2px; background: linear-gradient(to right, #91d1e5, #ef9d12);}
.footer-inquiry-title {position: relative; width: 400px; height: 60px; margin: -30px auto 50px;}
.footer-inquiry-title h2 {position: absolute; left: 2px; top: 2px; width: 396px; height: 56px; background: #FFF; border-radius: 28px; text-align: center; line-height: 56px; font-size: 20px; font-weight: normal; font-family: serif;}
.footer-inquiry-title::before {content: ""; position: absolute; left: 0; top: 0; width: 400px; height: 60px; background: linear-gradient(to bottom, #91d1e6, #ef9d12); border-radius: 30px;}
.footer-inquiry-inner {width: 760px; margin: 0 auto;}
.footer-inquiry-inner::after {content: ""; display: block; clear: both;}
.footer-inquiry-content {float: left; width: 380px; text-align: center;}
.footer-inquiry-content-address {font-size: 14px;}
.footer-inquiry-content-phone {display: inline-block; padding-left: 40px; font-size: 30px; font-weight: bold; background: url('./images/icon-phone.png') 0 50% no-repeat; background-size: 30px 30px; color: #000; text-decoration: none;}
.footer-inquiry-link {float: left; width: 380px; text-align: center;}
.footer-inquiry-link-button {display: inline-block; width: 300px; height: 70px; padding: 20px 20px 20px 60px; line-height: 30px; font-size: 18px; color: #FFF; text-decoration: none; background: #ed9e16 url('./images/icon-mail.png') 30px 50% no-repeat; background-size: 20px 16px; border-radius: 10px;}

.footer-branding {padding: 30px; background: #74bca5; text-align: center; color: #FFF;}
.footer-branding-logo {margin-bottom: 10px;}
.footer-branding-logo img {width: 200px;}
.footer-branding-catch {margin-bottom: 30px; font-size: 14px; letter-spacing: 7px;}

.button01 {display: inline-block; width: 300px; height: 60px; padding: 20px 50px; text-align: center; line-height: 20px; border: 1px solid #74bca5; border-radius: 5px; background: #FFF url('./images/icon-arrow-r.png') 30px 50% no-repeat; color: #74bca5; text-decoration: none;}


/* 
 * HOME
 * ------------------------- */

.home-main {position: relative; width: 100vw; height: 50vw;}
.home-main img {display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: auto;}
.home-main img.active {z-index: 2;}
.home-main-sp {display: none;}

.home-section01 {height: 690px; background: url('./images/home-section01-bg.jpg') 50% 50%; background-size: cover;}
.home-section01-inner {display: flex; width: 1000px; margin: 0 auto;}
.home-section01-image {width: 300px; padding: 30px 50px 10px;}
.home-section01-image img {width: 227px;}
.home-section01-content {width: 700px; padding: 120px 50px;}
.home-section01-content-title {margin-bottom: 50px; text-align: center; font-size: 30px; font-family: serif;}
.home-section01-content-description {margin-bottom: 50px; font-size: 16px;}
.home-section01-content-link {text-align: center;}

.home-section02 {padding: 70px 0;}
.home-section02-inner {width: 1000px; margin: 0 auto;}
.home-section02-blocks {display: flex; justify-content: space-between; margin-bottom: 60px;}
.home-section02-block {flex-basis: 300px; position: relative; padding-top: 70px;}
.home-section02-block::before {content: ""; position: absolute; left: 80px; top: 0; z-index: 1; width: 140px; height: 140px; border-radius: 70px; background: linear-gradient(to bottom, #91d1e6, #ee9d14);}
.home-section02-block::after {content: ""; position: absolute; left: 81px; top: 1px; z-index: 2; width: 138px; height: 138px; border-radius: 69px; background: #FFF;}
.home-section02-block-title {position: absolute; left: 81px; top: 1px; z-index: 4; width: 138px; height: 138px; border-radius: 69px; background: rgba(255,255,255,0.5);}
.home-section02-block-title span {display: block; position: absolute; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); line-height: 30px; font-size: 30px; font-family: serif; font-weight: normal;}
.home-section02-block-image {position: relative; z-index: 3; margin-bottom: 20px; text-align: center;}
.home-section02-block-image img {width: 260px;}
.home-section02-link {text-align: center;}

.home-section03 {padding: 50px 0; background: linear-gradient(to right, #ecf6f7, #fbf2e2);}
.home-section03-inner {width: 1000px; margin: 0 auto;}
.home-section03-block {margin-bottom: 30px; padding: 50px; background: #FFF; border-radius: 5px;}
.home-section03-block:last-child {margin-bottom: 0;}
.home-section03-block::after {content: ""; display: block; clear: both;}
.home-section03-block-01-image {float: left; width: 250px;}
.home-section03-block-01-image img {width: 250px;}
.home-section03-block-01-content {float: right; width: 600px;}
.home-section03-block-02-image {float: right; width: 440px;}
.home-section03-block-02-image img {width: 440px;}
.home-section03-block-02-content {float: left; width: 410px;}
.home-section03-block-content-title {position: relative; height: 60px; margin-bottom: 20px; padding-left: 80px; line-height: 60px; font-size: 30px; font-family: serif; font-weight: normal;}
.home-section03-block-content-title::before {content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 60px; height: 60px; border-radius: 30px; background: linear-gradient(to bottom, #91d1e6, #ee9d14);}
.home-section03-block-content-title span {position: absolute; left: 2px; top: 2px; z-index: 2; width: 56px; height: 56px; border-radius: 28px; line-height: 56px; text-align: center; background: #FFF;}
.home-section03-block-01-content p {margin-bottom: 30px;}
.home-section03-block-01-content table {width: 100%;}
.home-section03-block-01-content th,
.home-section03-block-01-content td {padding: 7px 20px; border: 1px solid #cccccc; vertical-align: middle;}
.home-section03-block-01-content th {width: 150px; background: #eeeeee; font-weight: normal;}
.home-section03-link {clear: both; padding-top: 30px; text-align: center;}

.home-section04::after {content: ""; display: block; clear: both;}
.home-section04-image {float: left; width: calc(50vw - 100px); height: 590px; background: url('./images/home-section04-image01.jpg'); background-size: cover;}
.home-section04-content {float: left; width: 600px; padding: 50px 0 50px 50px;}
.home-section04-content-title {margin-bottom: 30px; text-align: center;}
.home-section04-content-title h2 {display: inline-block; padding: 5px; border-bottom: 1px solid #000; font-size: 18px;}
.home-section04-content-description p {margin-bottom: 30px;}
.home-section04-content-description table {width: 100%;}
.home-section04-content-description th,
.home-section04-content-description td {padding: 7px 20px; border: 1px solid #cccccc; vertical-align: middle;}
.home-section04-content-description th {width: 200px; background: #eeeeee; font-weight: normal;}


/* 
 * 下層
 * ------------------------- */

.content-subpage {padding-top: 80px;}
.page-title {margin: 0 20px; height: 130px; line-height: 130px; text-align: center; background: linear-gradient(to right, #74bca5, #ed9e16); font-size: 30px; letter-spacing: 15px; color: #FFF; font-weight: normal; font-family: serif; border-radius: 10px;}
.section-subpage {padding: 50px 0 80px; border-bottom: 1px solid #cccccc;}
.section-subpage:last-child {border-bottom: none;}
.section-subpage-inner {width: 1000px; margin: 0 auto;}
.section-title {position: relative; margin-bottom: 30px; padding: 10px 0; font-size: 30px; font-weight: normal; font-family: serif;}
.section-title span {display: inline-block; position: relative; top: -2px; margin-right: 10px; padding: 0 10px; line-height: 30px; background: #74bca5; color: #fff; font-size: 20px; border-radius: 5px; vertical-align: middle;}
.section-title sub {font-size: 15px;}
.section-title::after {content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 2px; background: linear-gradient(to right, #74bca5, #ed9e16);}

.products-section01-block01 {float: left; width: 470px;}
.products-section01-block02 {float: right; width: 470px;}
.products-section01-block03 {clear: both; width: 550px; margin: 0 auto; padding-top: 40px;}
.products-section01-image {width: 100%; margin-bottom: 20px;}
.products-section01-title {margin-bottom: 20px; text-align: center; font-size: 30px; font-weight: normal; font-family: serif;}
.products-section01 table {width: 100%;}
.products-section01 th {width: 45%; padding: 5px 10px; border: 1px solid #cccccc; background: #eeeeee;}
.products-section01 td {padding: 5px 10px; border: 1px solid #cccccc;}
.products-section01-block04 {padding-top: 60px; text-align: center;}
.products-section01-block04 a {display: inline-block; width: 300px; padding: 20px 10px; color: #fff; font-size: 16px; background: #74bca5 url('./images/icon-arrow-w.png') 30px 50% no-repeat; background-size: 8px 14px; border-radius: 10px; border: none; text-decoration: none;}


.products-section03-block {margin-bottom: 20px; padding: 30px 30px 30px 80px; border: 1px solid #cccccc;}
.products-section03-block-question {position: relative; margin-bottom: 10px; line-height: 30px; font-size: 18px; font-weight: bold;}
.products-section03-block-question span {position: absolute; left: -50px; top: 0; display: block; width: 30px; height: 30px; text-align: center; background: #74bca5; color: #fff; font-family: serif; border-radius: 3px;}
.products-section03-block-answer {}

.products-section04-blocks {display: flex; justify-content: space-between; margin-bottom: 30px;}
.products-section04-block {flex-basis: 470px;}
.products-section04-block-image {margin-bottom: 30px;}
.products-section04-block-image img {width: 100%;}
.products-section04-note {position: relative; padding-left: 30px;}
.products-section04-note::before {content: "※"; position: absolute; left: 0;}

.data-section01 p {margin-bottom: 30px;}
.data-section01-block {display: flex; margin-bottom: 30px;}
.data-section01-block-title {flex-basis: 120px;}
.data-section01-block-title h3 {width: 100px; padding-bottom: 5px; text-align: center; font-size: 18px; border-bottom: 1px solid #000;}
.data-section01-block-body {flex-basis: 880px;}
.data-section01-block-body h4 {margin-bottom: 10px;}
.data-section01-block-body table {margin-bottom: 10px; width: 100%; table-layout: fixed;}
.data-section01-block-body th {padding: 5px 10px; border: 1px solid #cccccc; background: #eeeeee;}
.data-section01-block-body td {padding: 5px 10px; border: 1px solid #cccccc; text-align: center;}

.case-section01-blocks {display: flex; flex-wrap: wrap; justify-content: space-between;}
.case-section01-block {flex-basis: 470px; margin-bottom: 50px;}
.case-section01-block-image {width: 260px; margin: 0 auto 20px;}
.case-section01-block-image img {width: 100%;}
.case-section01-block-title {position: relative; margin-bottom: 20px; text-align: center;}
.case-section01-block-title h2 {font-size: 30px; font-weight: normal; font-family: serif;}
.case-section01-block-title::before {content: ""; position: absolute; left: 0; top: -100px; z-index: 1; width: 80px; height: 80px; border-radius: 40px; background: linear-gradient(to bottom, #91d1e6, #ee9d14);}
.case-section01-block-title span {position: absolute; left: 2px; top: -98px; z-index: 2; width: 76px; height: 76px; padding-top: 13px; border-radius: 38px; background: #FFF; text-align: center; line-height: 20px; font-family: serif; font-size: 16px;}
.case-section01-block-title span em {display: block; line-height: 30px; font-size: 30px;}

.inquiry-section01-lead {margin-bottom: 50px; line-height: 2;}
.inquiry-section01-lead em {font-weight: bold; color: #74bca5;}
.inquiry-section01-lead a {color: #74bca5;}
.inquiry-section01-phone {width: 600px; margin: 0 auto 50px; padding: 15px; background: linear-gradient(to right, #ecf6f7, #fbf2e2);}
.inquiry-section01-phone-inner {padding: 30px 20px 20px; background: #ffffff; text-align: center;}
.inquiry-section01-phone-number {padding-left: 40px; display: inline-block; color: #000; text-decoration: none; font-weight: bold; font-size: 30px; background: url('./images/icon-phone.png') 0 50% no-repeat; background-size: 30px 30px;}
.inquiry-section01-form {width: 700px; margin: 0 auto 50px;}
.inquiry-section01-form-row {display: flex; margin-bottom: 20px;}
.inquiry-section01-form-label {flex-basis: 200px; padding-top: 10px; font-weight: bold;}
.inquiry-section01-form-label .required {display: inline-block; position: relative; top: -1px; margin-left: 10px; padding: 0 5px; line-height: 20px; background: #ff0000; color: #ffffff; font-size: 14px; border-radius: 3px;}
.inquiry-section01-form-control {flex-basis: 500px;}
.inquiry-section01-form-control input {width: 100%; padding: 15px; border: 1px solid #cccccc;}
.inquiry-section01-form-control input[type="number"] {width: 100px; padding: 15px; border: 1px solid #cccccc;}
.inquiry-section01-form-control textarea {width: 100%; height: 200px; padding: 15px; border: 1px solid #cccccc;}
.inquiry-section01-form-control-part {display: flex; margin-bottom: 10px;}
.inquiry-section01-form-control-part-label {flex-basis: 100px; padding-top: 10px;}
.inquiry-section01-form-control-part-control {flex-basis: 400px;}
.inquiry-section01-form-confirm {flex-basis: 500px; padding-top: 10px;}
.inquiry-section01-form-control-part-confirm {flex-basis: 400px; padding-top: 10px;}
.inquiry-section01-button {margin-bottom: 30px; text-align: center;}
.inquiry-section01-button button,
.inquiry-section01-button a {display: inline-block; width: 300px; padding: 20px 10px; color: #fff; font-size: 16px; background: #74bca5 url('./images/icon-arrow-w.png') 30px 50% no-repeat; background-size: 8px 14px; border-radius: 10px; border: none; text-decoration: none;}
.inquiry-section01-back {margin-bottom: 30px; text-align: center;}
.inquiry-section01-back a {display: inline-block; width: 300px; padding: 20px 10px; color: #fff; font-size: 16px; background: #888888; border-radius: 10px; border: none; text-decoration: none;}

.notation-section01 table {width: 100%;}
.notation-section01 th {width: 30%; padding: 10px 20px; border: 1px solid #CCC; background: #EEE; text-align: left;}
.notation-section01 td {padding: 10px 20px; border: 1px solid #CCC; text-align: left;}

.youtube {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow:hidden;
    }
    .youtube iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }