@charset "utf-8";

/* module
-------------------------------------------------------*/
#wrapper {
overflow-x: hidden;
}
.sp {
display: none;
}
.inner {
/*width:1000px;*/
max-width:1000px;
margin:0 auto;
/*padding-left: 20px;
padding-right: 20px;*/
}
.area {
padding: 70px 0;
}
.ttl01>* {
display: block;
text-align: center;
padding-top: 5px;
}
.ttl01>span {
font-size: 280%;
line-height: 1.3;
}
.ttl01>span>span {
font-size: 70%;
}
.ttl01>b {
color:#1b959a;
}
.ttl01>b::after {
content:"";
display: block;
width:50px;
height:3px;
background:#1b959a;
margin:14px auto 50px;
}
.ttl02 {
font-size: 140%;
margin-bottom:10px;
}
.ttl02::before {
content:"●";
display: inline-block;
color:#1b959a;
font-size: 90%;
padding-right:5px;
}
.serif {
font-family: 'Noto Serif JP','Noto Serif KR',serif;
}
.small {
font-size: 60%;
}
.ttl_icon {
color:#1b959a;
font-size: 180%;
text-align:center;
margin-bottom:30px;
}
.ttl_icon span {
background: url(../images/character.png)no-repeat left center/55px 55px;
padding: 0 0 0 60px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.block {
display: block;
}
.mt30 {
margin-top: 30px;
}
.blue {
color: #1B959A;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
border:1px solid #1b959a;
color: #1b959a;
width: 100%;
max-width: 300px;
height: 50px;
margin: 0 auto;
text-align: center;
}
.tablet {
display: none;
}
@media screen and (min-width:768px) and ( max-width:1100px) {
.tablet {
display: block;
}
}
@media screen and (min-width:768px) {
.btn.type_l {
font-size: 150%;
max-width: 400px;
height: 70px;
}
}
@media screen and (max-width:768px) {
.pc {
display: none;
}
.sp {
display: block;
}
.inner {
width:100%;
max-width:100%;
}
.area {
padding:30px 20px;
}
.ttl01>span {
font-size: 110%;
}
.ttl01>span>span {
display: inline-block;
}
.ttl01>b::after {
content: "";
display: block;
width: 30px;
height: 2px;
background: #1b959a;
margin: 10px auto 30px;
}
.ttl01>b {
font-size: 80%;
}
.ttl02 {
font-size: 110%;
margin-bottom: 5px;
}
.ttl_icon {
font-size: 120%;
margin-bottom: 10px;
}
.ttl_icon span {
background: url(../images/character.png)no-repeat center top/40px 40px;
padding: 45px 0 0 0;
}
}


/* header
-------------------------------------------------------*/
#header {
border-bottom:1px solid #1b959a;
}
.logo img {
max-width:155px;
}
#header .tel img {
max-width:200px;
}
#header .contact img {
max-width:158px;
}
#header .inner {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content:space-between;
max-width:100%;
width:100%;
padding:15px;
box-sizing: border-box;
}
#header .inner .ul_box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content:flex-end;
}
#header .inner .ul_box ul {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content:space-between;
}
#header .inner ul li {
padding-left:10px;
font-weight: 500;
}
#header .inner ul:first-child li:first-child {
padding-left:0;
}
#header .inner ul:first-child li {
padding-left:15px;
}
#header .inner ul .tel {
padding-left:25px;
}
@media screen and (max-width: 1050px) {
#header {
text-align: center;
padding:10px 10px;
}
#header .inner {
padding:0;
}
#header .inner .ul_box {
justify-content: center;
position: fixed;
left:0;
bottom:0;
z-index: 999;
background:#fff;
padding:10px 5px;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #1b959a;
}
#header .inner ul li {
padding: 0 5px;
}
#header .inner .pc {
display: none!important;
}
#header .inner ul .tel {
padding-left: 5px;
}
}
@media screen and (max-width:768px) {
.logo img {
max-width: 100px;
}
}


/* nav
-------------------------------------------------------*/
#menu {
display: none;
}
@media screen and (max-width: 1050px) {
#menu_btn.sp {
display: block;
}
#menu_btn {
position: fixed;
cursor: pointer;
right: 10px;
top: 27px;
z-index: 9999;
height: 18px;
}
#menu_btn span {
display: block;
border: 1px solid #000;
width: 20px;
transition: 0.3s;
position: relative;
}
#menu_btn span:nth-child(2) {
top: 5px;
}
#menu_btn span:last-child {
top: 10px;
}
#menu {
display: none;
background:rgba(27,149,154,0.9);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
#menu .menu_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
#menu ul li {
text-align: center;
}
#menu ul li:first-child {
border-top:1px solid #fff;
margin-top:20px;
}
#menu ul li {
color: #fff;
border-bottom: 1px solid #fff;
display: block;
}
#menu ul li:last-child {
margin-bottom:20px;
}
#menu ul li a {
color:#fff;
display: block;
transition: .2s;
padding: 20px 0;
width: 220px;
margin:0 auto;
}
#menu ul li a:hover {
opacity: 0.7;
}
#menu ul li:last-child img {
max-width:156px;
}
#menu_btn.on span {
border-color: #fff;
}
#menu_btn.on span:first-child {
transform: rotate(45deg);
top: 7px;
}
#menu_btn.on span:nth-child(2) {
opacity: 0;
}
#menu_btn.on span:last-child {
transform: rotate(-45deg);
top: 3px;
}
}
@media screen and (max-width:768px) {
#menu_btn {
top: 18px;
}
}


/* visual
-------------------------------------------------------*/
#visual {
height: 500px;
position: relative;
background: #000;
}
#visual::before {
content: "";
position: absolute;
background: url(../images/visual_bg.jpg)no-repeat center top/cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}
#visual > * {
position: relative;
z-index: 1;
width: 100%;
max-width: inherit;
height: 100%;
}
#visual .tab {
display: none;
}
#visual .ttl {
position: absolute;
top: 90px;
left: 30px;
}
#visual .ttl img {
max-width: 436px;
}
#visual .txt {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 100%;
background: rgba(0,0,0,0.7);
padding: 15px 20px;
box-sizing: border-box;
line-height: 1;
}
#visual .txt img {
max-width: 864px;
}
@media screen and (max-width:1050px) {
#visual .ttl .pc {
display: none;
}
#visual .ttl {
text-align: center;
top: inherit;
bottom: 60px;
left: 0;
width: 100%;
}
#visual .txt {
bottom: 0;
}
#visual .ttl .tab {
display: inline-block;
width: 100%;
max-width: 80%;
}
}
@media screen and (max-width:768px) {
#visual {
height: 250px;
height: inherit;
background: #fff;
/*
display: flex;
align-items: center;
justify-content: center;
*/
}
#visual .inner {
margin-top: -50px;
}
#visual::after {
content: "";
position: absolute;
left: 0;
top: 201px;
width: 100%;
height: 50px;
background: linear-gradient(transparent, #fff);
}
#visual::before {
position: relative;
display: block;
width: 100%;
height: 250px;
}
#visual .ttl {
position: static;
padding: 20px 20px 0 20px;
box-sizing: border-box;
}
#visual .ttl img {
max-width: 218px;
margin: 0 auto 10px;
}
#visual .ttl .tab {
display: none;
}
#visual .txt {
position: static;
padding: 10px 20px;
}
#visual .txt img {
max-width: 287px;
margin: 0 auto;
}
}


/* footer
-------------------------------------------------------*/
#footer {
text-align: center;
padding:50px 0 100px;
border-top: 1px solid #1b959a;
}
#footer .box {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content:space-between;
text-align: left;
width:500px;
margin:50px auto;
}
#footer .copy {
font-size: 90%;
}
@media screen and (max-width:768px) {
#footer {
padding:30px 20px 100px;
}
#footer .box {
width: 100%;
margin: 25px auto;
font-size: 70%;
justify-content: space-around;
}
#footer .copy {
font-size: 70%;
}
}


/* area01
-------------------------------------------------------*/
#area01 {
text-align: center;
}
#area01 .ttl {
font-size: 100%;
color: #1b959a;
line-height: 1.3;
margin: 0 0 20px;
font-weight: 500;
}
#area01 .ttl b {
display: inline-block;
position: relative;
line-height: 1.1;
}
#area01 .ttl b::before,
#area01 .ttl b::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 2px;
background: #1b959a;
}
#area01 .ttl b::before {
left: -20px;
}
#area01 .ttl b::after {
right: -20px;
}
#area01 .txt {
font-size: 220%;
}
@media screen and (max-width:768px) {
#area01 .ttl {
font-size: 80%;
}
#area01 .txt {
font-size: 150%;
}
}
@media screen and (max-width:550px) {
#area01 .txt {
font-size: 100%;
}
}
@media screen and (max-width:420px) {
#area01 .txt {
font-size: 90%;
}
/*
#area01 .txt br {
display: none;
}
*/
}


/* area02
-------------------------------------------------------*/
#area02 {
background:url(../images/bg01.jpg)no-repeat center center/cover;
}
#area02 ul li{
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
max-width:770px;
margin:80px auto;
position: relative;
}
#area02 ul li:first-child {
margin-top:0;
}
#area02 ul li:last-child {
margin-bottom:40px;
}
#area02 ul li::after {
content:"";
display: block;
background:url(../images/dot_line.png)repeat;
width:100%;
height:4px;
position: absolute;
left:0;
bottom:-40px;
}
#area02 ul li:last-child:after {
background: none;
}

#area02 ul li .img img {
max-width:370px;
width:370px;
}
#area02 ul li .wrap {
padding-left:30px;
box-sizing: border-box;
}
#area02 ul li .wrap > * {
display: block;
}
#area02 ul li .wrap .ttl {
font-size: 180%;
color:#1B959A;
line-height: 1;
margin-bottom:20px;
}
#area02 ul li .wrap .txt {
font-size: 120%;
}
#area02 ul li a {
display: flex;
align-items: center;
justify-content: center;
max-width: 170px;
height: 38px;
background: #1b959a;
color: #fff;
font-size: 18px;
padding: 0 20px 0 0;
box-sizing: border-box;
position: relative;
margin: 20px 0 0;
}
#area02 ul li a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
background: transparent;
}
@media screen and (max-width:768px) {
#area02 ul li {
margin: 60px auto;
}
#area02 ul li::after {
bottom: -30px;
}
#area02 ul li .wrap {
padding-left: 20px;
}
#area02 ul li .img img {
max-width: 185px;
width: 185px;
}
#area02 ul li .wrap .ttl {
font-size: 100%;
margin-bottom:10px;
}
#area02 ul li .wrap .txt {
font-size: 90%;
line-height: 1.2;
}
}
@media screen and (max-width:500px) {
#area02 ul li {
flex-flow: column nowrap;
align-items: center;
}
#area02 ul li .wrap {
padding-top:20px;
padding-left: 0;
}
#area02 ul li .wrap .ttl {
text-align: center;
}
#area02 ul li .wrap .ttl br {
display: none;
}
#area02 ul li a {
margin: 20px auto 0;
}
}

/* news
-------------------------------------------------------*/
#news .ttl02 {
border-bottom: 1px solid #bfbfbf;
padding-bottom: 15px;
margin-bottom: 20px;
}
#news .maintenance_list {
margin: 0 0 50px;
}
@media screen and (min-width:768px) and ( max-width:1000px) {
#news .maintenance_list,
#news .news_list{
padding: 0 20px;
}
}
#news dl {
display: table;
width: 100%;
border-bottom: 1px solid #d6d6d6;
padding-bottom: 15px;
margin-top: 15px;
}
#news dl dt {
display: table-cell;
width: 20%;
}
#news dl dd {
display: table-cell;
width: 80%;
}
#news dl dd .ttl {
font-weight: bold;
font-size: 110%;
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
#news .maintenance_list {
margin: 0 0 30px;
}
#news dl {
display: block;
width: 100%;
font-size: 90%;
}
#news dl dt {
display: block;
width: 100%;
margin-bottom: 10px;
}
#news dl dd {
display: block;
width: 100%;
}
}


/* area03
-------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1010px) {
#area03 .inner {
padding: 0 20px;
}
}
.price_box {
border:1px solid #1b959a;
padding:30px;
margin-bottom:50px;
box-sizing: border-box;
background: #fff;
}
.price_box:last-of-type,
.price_box .dl_box:last-of-type{
margin-bottom:0;
}
.price_box .table {
border-top:1px solid #1b959a;
box-sizing: border-box;
width:100%;
}
.price_box .table tr {
border:1px solid #1b959a;
box-sizing: border-box;
}
.price_box .table tr:not(:last-of-type) {
border-bottom: 0;
}
.price_box .table tr > * {
display: table-cell;
padding: 10px;
vertical-align: middle;
box-sizing: border-box;
font-size: 90%;
word-break: break-all;
}
.price_box .table tr > *:first-child {
width: 260px;
}
.price_box .table tr th {
background: #C0E1DE;
text-align: left;
}
.price_box .table tr td {
border-left: 1px solid #1b959a;
text-align: center;
}
.price_box .table tr .serif {
font-size: 150%;
	font-family: 'Noto Sans JP','Noto Sans KR', sans-serif;
}

.price_box .table tr td sup {
	font-size: 60%;
	font-weight: normal;
}
.price_box .bottom_text {
margin-top:10px;
font-size: 80%;
}
.bor_b {
border-bottom: 1px solid #1b959a!important;
}
.bor_r {
border-right: 1px solid #1b959a!important;
}
@media screen and (max-width: 768px) {
.price_box {
padding: 20px;
margin-bottom: 30px;
}
.price_box .table tr > * {
padding: 5px;
width:50%;
line-height: 1.3;
font-size: 50%;
}
.price_box .table tr th {
text-align: center;
}
.price_box .table tr .serif {
font-size: 100%;
}
.col_two > * {
width: 50%!important;
}
.col_three > * {
width: 33%!important;
}
.col_four > * {
width: 25%!important;
}
}


/* area04
-------------------------------------------------------*/
#area04 {
background: #eeeeee;
/*	padding-right: 20px;
	padding-left: 20px;
	box-sizing: border-box;*/
}
@media screen and (min-width:768px) and ( max-width:1010px) {
#area04 .inner {
padding: 0 20px;
}
}

/* area05
-------------------------------------------------------*/
#area05 ul li:first-child {
margin: 0 0 20px;
}


/* area06
-------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1010px) {
#area06 .inner {
padding: 0 20px;
}
}
#area06 {
background: #eeeeee;
}
#area06 .box {
border:1px solid #1b959a;
padding:30px;
box-sizing: border-box;
background: #fff;
}
#area06 .box:not(:last-of-type) {
margin: 0 0 50px;
}
#area06 .box:first-of-type div:not(:last-of-type) {
margin: 0 0 30px;
}
#area06 .wrap_dl {
display: table;
width: 100%;
box-sizing: border-box;
}
#area06 .wrap_dl dl > * {
display: table-cell;
vertical-align: top;
padding: 20px 15px;
box-sizing: border-box;
}
#area06 .wrap_dl dl dt {
background: #C0E1DE;
width: 150px;
text-align: left;
border-bottom: 1px solid #fff;
}
#area06 .map .txt {
padding: 0 0 10px 20px;
background: url(../images/icon01.png) no-repeat left center;
}
#area06 .privacy_box {
padding: 20px;
max-height: 250px;
overflow-y: scroll;
border: 1px solid #D6D6D6;
box-sizing: border-box;
background: #fff;
width: 100%;
max-width: 980px;
margin: 0 auto;
box-shadow: none;
border-radius: 0;
position: relative;
}
#area06 .security_box {
padding: 20px;
max-height: 250px;
overflow-y: scroll;
border: 1px solid #D6D6D6;
box-sizing: border-box;
background: #fff;
width: 100%;
max-width: 980px;
margin: 0 auto;
box-shadow: none;
border-radius: 0;
position: relative;
}
@media screen and (max-width:768px) {
#area06 .box {
padding:20px;
}
#area06 .box:not(:last-of-type) {
margin: 0 0 30px;
}
#area06 .wrap_dl {
background: none;
padding-bottom: 0;
display: table;
width: 100%;
box-sizing: border-box;
}
#area06 .wrap_dl dl > * {
display: block;
width: 100%!important;
padding: 10px;
}
#area06 .wrap_dl dl dd {
padding: 10px 0;
}
#area06 .wrap_dl dl:last-child dd {
padding: 10px 0 0;
}
#area06 .privacy_box,
#area06 .security_box {
width: 100%;
padding: 10px;
}
}


/* contact
-------------------------------------------------------*/
#contact .img {
max-width: 697px;
margin: 0 auto 40px;
}
#contact .txt {
text-align: right;
font-size: 90%;
margin: 0 0 10px;
}
#contact .txt .red {
color: #f00;
}
#contact .hissu th::after {
content: "*";
color: #f00;
}
#contact .table_temp {
width: 100%;
border: 1px solid #D6D6D6;
}
#contact tr {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
justify-content: flex-start;
}
#contact tr:not(:last-child) {
border-bottom: 1px solid #D6D6D6;
}
#contact tr > * {
width: 100%;
padding: 15px 20px;
box-sizing: border-box;
line-height: 1.3;
font-size: 120%;
}
#contact tr th {
background: #f6f6f6;
max-width: 280px;
border-right: 1px solid #D6D6D6;
display: flex;
align-items: center;
justify-content: flex-start;
}
#contact tr td span {
display: block;
}
#contact tr td span {
margin: 5px 0 0;
font-size: 70%;
}
#contact input[type="text"] {
margin: 0;
padding: 3px;
height: 30px;
box-sizing: border-box;
width: 100%;
}
#contact textarea {
width: 100%;
height: 100px;
resize: vertical;
}
#contact  .btn_area {
text-align: center;
}
#contact input[type="submit"] {
border: none;
border-radius: 5px;
color: #fff;
font-size: 150%;
box-sizing: border-box;
padding: 20px;
width: 65%;
max-width: 300px;
margin: 50px 10px 0;
background: #1b959a;
line-height: 1;
}
#contact .form_out_text {
	margin: 30px 30px;
}
@media screen and (max-width:768px) {
#contact tr {
display: block;
}
#contact tr > * {
display: block;
}
#contact tr th {
max-width: 100%;
border-right: none;
}
#contact input[type="submit"] {
font-size: 100%;
padding: 10px;
width: 80%;
margin: 30px 5px 0;
}
}