@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=M+PLUS+1p");
@import url("https://fonts.googleapis.com/css?family=Sawarabi+Mincho");
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
:link, :visited { text-decoration: none;}
html, body, div, ul, ol, li, dl, dt, dd, form, fieldset, input, textarea,
h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, hr, th, td {margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
table { border-spacing: 0;}
fieldset, img, abbr, acronym {border: 0;}
ol, ul {list-style: none;}
caption, th {text-align: left;}
q:before, q:after {content: '';}
a {color: #000;text-decoration: underline;outline: none;}
hr {border: 0;height: 1px;background-color: #000;color: #000;}
a img, :link img, :visited img {border: none;}
a:hover {text-decoration:none;}
address {font-style: normal;display: inline;}
body {color: #000;}
a:link, a:visited {text-decoration: none;}
blockquote {margin-left: 30px;}
@media print {
  * {
    position: static !important;
    overflow: visible !important;
  }
}
/*==================================================
	Project layout
==================================================*/
body {
  font: 300 13px "M PLUS 1p", sans-serif;
  line-height: 1em;
}
/*------------------------------
   Tittle, Label, etc...
------------------------------*/
.h1 { width:230px;}
.h1 img { width:100%;}
@media screen and (min-width: 801px) {
	.h1 a:hover {
		transition:.3s;
		opacity:0.5;
	}
}
@media screen and (max-width: 640px) {
	.h1 { margin: 0 auto;}
}

.h2 {
  	line-height: 1em;
    text-align: center;
    font-family:"M PLUS Rounded 1c";
    font-size: 2.5em;
	color: green;
}
.h2::before {
  	position: relative;
  	content: url("../images/mi_h2.png");
  	top: 5px;
  	margin-right: 10px;
}
@media screen and (max-width: 640px) {
	.h2 { font-size: 2em;}
}

.h2-1 {
  	color: #fff;
  	line-height: 1em;
  	text-align: center;
    font-family:"M PLUS Rounded 1c";
    font-size: 2.5em;
}
.h2-1::before {
	position: relative;
	content: url("../images/mi_h3.png");
	top: 5px;
	margin-right: 10px;
}
@media screen and (max-width: 640px) {
	.h2-1{ font-size: 2em;}
}
.h3{
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1em;
    text-align: center;
    font-size: 2em;
    color: #fff;
}
@media screen and (max-width: 640px) {
    .h3 { font-size: 1.5em;}
}
.h4 {
	font-size: 2em;
    color: #fff;
    margin: 30px auto;
    text-align: center;
    width: 90%;
    max-width: 950px;
  	padding: 1em;
}
/*------------------------------
	Header
------------------------------*/
header {
	margin: 0 auto;
	padding: 20px 0;
}
@media screen and (min-width: 801px) {
	header{ max-width: 1000px;}
}
.hd_wrap {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
@media screen and (min-width: 641px) and (max-width: 800px) {
	.hd_wrap { width: 95%;}
}
@media screen and (max-width: 640px) {
	.hd_wrap {
		flex-direction: column;
		width: 95%;
		padding-top: 3em;
	}
}
.headtext{ line-height:1.4em;}
@media screen and (min-width: 801px) {
	.headtext a:hover {
		transition:.3s;
		color: orange;
	}
}
@media screen and (max-width: 640px) {
	.headtext {
		margin-top:10px;
		line-height:1.6em;
		text-align: center;
	}
}

/*------------------------------
   Navigation
------------------------------*/
@media screen and (max-width:640px) {
	nav { display: none;}
}
@media screen and (min-width:801px) {
	nav { max-width: 1000px;}
	nav > ul {
	    display: flex;
	    justify-content: space-between;
	    margin: 0px auto;
	    width: 95%;
	}
	nav > li {
		padding: 10px 0;
		line-height:1em;
	}
	nav > ul li img{
		height: 53px;
	}

	nav > ul li:hover {
		transition: all 0.3s;
	    opacity: 0.5;
	}
	nav > ul li a {
		display:block;
		padding: 1em 0;
	}
	nav > ul li a:hover{
		color: #fff;
	}
}
@media screen and (min-width: 641px) and (max-width: 800px) {
    nav > ul {
	    display: flex;
	    justify-content: space-between;
	    margin: 0px auto;
	    width: 95%;
	}
	nav > li {
		padding: 10px 0;
		line-height:1em;
	}
	nav { max-width: 800px;}
	nav > ul li img{ height:43px;}
	nav > ul li a {
		display:block;
		padding: 1em 0;
	}
}

@media screen and (max-width:640px) {
	.tabnavwrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		padding: 10px 0;
		background: rgba(255,127,80,0.90);
	}
	.tabnavhead {
		display: flex;
		justify-content: space-between;
	}
	.tabnavbtn {
		width: 10%;
		min-width: 50px;
		margin-left: auto;
		margin-right: 0;
		line-height: 1em;
		text-align: center;
		font-size: 25px;
	}
	.tabnavbtn::after {
		font-family: 'Material Icons';
		content: '\e5d2';
		color: #fff;
	}
	.close::after {
		content: '\e5cd';
		font-family: 'Material Icons';
	}
	.tabmenu { display: none;}
	.tabmenu a {
		display: block;
		padding: 20px 0;
		text-align: center;
		color: #fff;
	}
}
@media screen and (min-width: 641px) {
    .tabmenu{ display: none;}
}

/*------------------------------
   Layout, Copy of Top
------------------------------*/
.inner-1{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 8%;
	padding-bottom: 8%;
}
@media screen and (max-width: 800px) {
	.inner-1{ width: 96%;}
}

.inner-2{
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8%;
    padding-bottom: 8%;
}
@media screen and (max-width: 800px) {
	.inner-2{ width: 84%;}
}
.inner-tocontact{
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5%;
	padding-bottom: 5%;
	text-align: center;
	color: #fff;
}
@media screen and (max-width: 800px) {
	.inner-tocontact{ width: 84%;}
}
.inner-tocontact > a{
	display: block;
	line-height: 1em;
	font-size: 2.5em;
	color: #fff;
}
@media screen and (min-width: 801px){
    .inner-tocontact > a:hover{
        transition: .3s;
        color: yellow;
    }
    .inner-tocontact > a img:hover{
        transition: .3s;
        opacity: 0.5;
    }
}
@media screen and (max-width: 640px) {
	.inner-tocontact > a{ font-size: 2em;}
}
.inner-tocontact > p{
	line-height: 1em;
	font-size: 1.3em;
}
@media screen and (max-width: 640px) {
	.inner-tocontact > p{ font-size: 1em;}
}

.bg-01{
	background: url("../images/img-top-bg.jpg") 0 0;
	background-size: 100%;
	background-repeat: no-repeat;
}
.bg-02{
	background-image: radial-gradient(gold 1px, transparent 1px);
	background-size: 7px 7px;
	padding-bottom: 20px;
}
.bg-03{
 	background-image: radial-gradient(#eee 8%, transparent 20%);
 	background-size: 7px 7px;
 	background-position: 0 0, 17px 17px;
}
.bg-04{
	background: #f29844;
}

.cpy-1{
	line-height: 1em;
	text-align: center;
	font-family: "Sawarabi Mincho", serif;
	font-weight: 700;
	font-size: 2.4em;
	color: cadetblue;
	text-shadow: 0 0 6px #FFF, 0 0 6px #FFF, 0 0 6px #FFF, 0 0 6px #FFF;
}
@media screen and (min-width: 481px) and (max-width: 800px) {
	.cpy-1{ font-size: 1.8em;}
}
@media screen and (max-width: 480px) {
	.cpy-1{ font-size: 1.2em;}
}

.cpy-2{
	line-height: 2em;
	text-align: center;
	font-size: 1.6em;
	text-shadow: 0 0 6px #FFF, 0 0 6px #FFF, 0 0 6px #FFF, 0 0 6px #FFF;
}
@media screen and (min-width: 481px) and (max-width: 800px) {
	.cpy-2{
		text-align: left;
		font-size: 1.2em;
	}
}
@media screen and (max-width: 480px) {
	.cpy-2{
	line-height: 1.8em;
		text-align: left;
		font-size: 1em;
	}
}

.banners-1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.banners-1 > a {
	display: block;
	box-sizing: border-box;
	width: 30%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	margin-bottom: 3%;
	line-height: 0;
}
@media screen and (max-width: 480px) {
	.banners-1 > a { width: 47%;}
}
@media screen and (min-width: 801px) {
	.banners-1 > a:hover {
		transition: .3s;
		box-shadow: 0px 0px 12px 6px #d9d9d9;
	}
}

.area480 img{ display: block;}
@media screen and (min-width: 481px){.area480 { display: none;}}
@media screen and (max-width: 480px){.area { display: none;}}

/*------------------------------
	Footer
------------------------------*/
.bottom-nav{
    padding-top: 5%;
    padding-bottom: 5%;
}
.bottom-nav a {
    display: block;
    line-height: 0;
}
@media screen and (min-width: 801px){
    .bottom-nav a:hover{
        transition: .3s;
        box-shadow: 0 0 6px 6px #dfdfdf;
    }
}
ul.footer-nav{
    display: flex;
    justify-content: space-between;
    padding-top: 1.5%;
}
ul.footer-nav li{ max-width: 29%;}
ul.footer-nav li:nth-child(2){ max-width: 40%;}

.licence {
    padding-top: 2%;
    padding-bottom: 2%;
    text-align: center;
    background-color: #f29844;
    color: #fff;
}

/*==============================
    サービス紹介
==============================*/
.srvc-div{
    display: flex;
    margin-bottom: 10%;
    box-shadow: 0 0 10px 6px #ddd;
}
@media screen and (max-width: 640px){
    .srvc-div{ flex-direction: column;}
}
.srvc-inv{
    box-sizing: border-box;
    width: 55%;
    background: #fff;
}
@media screen and (max-width: 640px){
    .srvc-inv { width: 100%;}
}
.srvc-inv > h3 {
    padding-top: 10%;
    line-height: 1em;
    text-align: center;
    font-family: "Sawarabi Mincho", serif;
    font-size: 3em;
    color: yellowgreen;
}
.srvc-inv > h3.sub {
    padding-top: 3%;
    font-size: 1.5em;
}
@media screen and (max-width: 640px){
    .srvc-inv > h3{ font-size: 2em;}
    .srvc-inv > h3.sub{ font-size: 1em;}
}
.srvc-inv > p{
    padding-top: 5%;
    padding-bottom: 10%;
    padding-left: 2em;
    padding-right: 2em;
    line-height: 1.8em;
}
.srvc-img { width: 45%;}
@media screen and (max-width: 640px){
    .srvc-img { width: 100%;}
}
/*==============================
    料金案内
==============================*/
ul.prc-th{
    display: flex;
    line-height: 1em;
    text-align: center;
    font-size: 1.2em;
    background: #f29844;
    color: #fff;
}
@media screen and (max-width: 640px){
    ul.prc-th{ font-size: 1em;}
}
ul.prc-th li {
    box-sizing: border-box;
    width: 25%;
    padding: 1em 0;
    border-right: 1px solid #fff;
}
ul.prc-tr{
    display: flex;
    line-height: 1em;
    text-align: center;
    font-size: 1.5em;
    background: #fff;
}
@media screen and (max-width: 640px){
    ul.prc-tr{ font-size: 1em;}
}
ul.prc-tr:nth-child(even){
    background: #f9f9f9;
}
ul.prc-tr li{
    width: 25%;
    padding: 1em 0;
}
.prc-caution > p{
    display: flex;
    margin-top: 1em;
    line-height: 1.4em;
}
.prc-caution > p::before{
    content: "※";
    padding-right: .3em;
    color: #f29844;
}
@media screen and (max-width: 640px){
    .prc-caution > p{ font-size: .8em;}
}
/*==============================
    お申し込みの流れ
==============================*/
.flw-div{
    display: flex;
}
.flw-num{
    width: 10%;
    margin-right: 2%;
    padding-top: .5em;
    line-height: 1em;
    text-align: center;
    font-size: 3em;
    background: #ccc;
    color: #fff;
}
@media screen and (max-width: 640px){
    .flw-num{ font-size: 2em;}
}
.flw-cnt{
    width: 88%;
}

.flw-cnt > h4{
    position: relative;
    padding: 1em 0;
    line-height: 1em;
    text-align: center;
    font-size: 1.5em;
    color: #fff;
}
.flw-cnt > h4::after{
    position: absolute;
	content:"";
	display:inline-block;
	width: 25px;
	height:25px;
    margin-left: 1em;
	background:url("../images/mi_h4.png") no-repeat;
	background-size:100%;
}
.flw-inv{ background: #fff;}
.flw-inv > a{
    display: block;
    width: 50%;
    margin: 1em auto;
    line-height: 0;
}
@media screen and (min-width: 801px){
    .flw-inv > a:hover{
        transition: .3s;
        box-shadow: 0 0 10px 6px #ddd;
    }
}
.flw-inv > h5{
    padding: 1em 0 0.5em 1.5em;
    line-height: 1em;
    font-size: 1.8em;
}
.flw-inv > p{
    padding: 1em 2em;
    line-height: 1.8em;
    font-size: 1.2em;
}
@media screen and (max-width: 640px){
    .flw-inv > a{ width: 90%;}
    .flw-inv > h5{ font-size: 1.2em;}
    .flw-inv > p{ font-size: 1em;}
}
/*==============================
    会社概要
==============================*/
.cmpny-cpy > p{
    line-height: 1.8em;
/*  font-family: "Sawarabi Mincho", serif;	*/
    font-size: 1.3em;
}
.cmpny-cpy > span{
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: 0;
}
@media screen and (max-width: 640px){
    .cmpny-cpy > p{
        line-height: 1.4em;
        font-size: 1em;
    }
    .cmpny-cpy > span{ width: 70%;}
}
dl.cmpny-tbl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    width: 77%;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1em;
    font-size: 1.2em;
}
@media screen and (max-width: 640px){
    dl.cmpny-tbl {
        flex-direction: column;
        width: 100%;
        font-size: 1em;
    }
}
dl.cmpny-tbl > dt{
    box-sizing: border-box;
    width: 30%;
    padding: 1em 0;
    text-align: center;
    border-bottom: 1px solid #fff;
    background: yellowgreen;
    color: #fff;
}
@media screen and (max-width: 640px){
    dl.cmpny-tbl > dt{
        width: 100%;
    }
}
dl.cmpny-tbl > dd{
    box-sizing: border-box;
    width: 69%;
    padding: 1em 0 1em 2em;
    border-bottom: 1px solid #eee;
    background: #fff;
}
@media screen and (max-width: 640px){
    dl.cmpny-tbl > dd{
        width: 100%;
        padding: 1em 0;
        text-align: center;
    }
}

/*==================================================
	　Contact
==================================================*/
.contact-notice{
    padding-bottom: 0;
}
.contact-notice > p{
    display: flex;
    padding-bottom: 1em;
    line-height: 1.4em;
    font-size: 1.2em;
}
.contact-notice > p::before{
    content: "●";
    padding-right: .3em;
}
@media screen and (max-width: 640px) {
    .contact-notice > p{ font-size: 1em;}
}
.contact-form{
    overflow-x: hidden;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3%;
    padding-bottom: 3%;
}
@media screen and (max-width: 640px) {
    .contact-form{
        width: 96%;
    }
}
.contact-form dl {
	display: flex;
	margin-bottom: 30px;
}
@media screen and (max-width: 640px) {
    .contact-form dl{
        flex-direction: column;
    }
}
.contact-form dl > dt {
	width:150px;
	padding: .3em 0 0 1em;
	line-height:1em;
	font-weight:500;
	font-size: 1.5em;
	border-left: 15px solid #f29844;
}

@media screen and (max-width: 640px) {
    .contact-form dl dt {
        width: 100%;
        margin-bottom: .5em;
        padding: .5em 0 .5em 1em;
        font-size: 1em;
        border-left: none;
        background: #f29844;
        color: #fff;
    }
}
.contact-form dl dd {
}
.contact-form input, .contact-form textarea {
    line-height: 1.4em;
	font-size:17px;
}
.contact-notice > a {
    display: block;
    width: 10em;
    margin: 30px auto;
    padding: .5em 0;
    line-height: 1em;
    font-size: 18px;
    text-align: center;
    border-radius: 5px;
    background: #f29844;
    color: #fff;
}
.contact-notice > a:hover{
    transition: .3s;
    background: #f29844;
}
/*==================================================
     ProductUtilitys
==================================================*/
.retina img { width: 100%;}

.mg-bt-txt-sm { margin-bottom: 1em;}
.mg-bt-txt-md { margin-bottom: 2em;}
.mg-bt-txt-lg { margin-bottom: 3em;}
.mg-bt-txt-xlg { margin-bottom: 5em;}

.mg-bt-2p{ margin-bottom: 2%;}
.mg-bt-3p{ margin-bottom: 3%;}
.mg-bt-5p{ margin-bottom: 5%;}
.mg-bt-8p{ margin-bottom: 8%;}
.mg-bt-10p{ margin-bottom: 10%;}

.pd-tp-txt-sm { padding-top: 1em;}
.pd-tp-txt-md { padding-top: 2em;}
.pd-tp-txt-lg { padding-top: 3em;}

.lnht-0{ line-height: 0;}
.lnht-14em{ line-height: 1.4em;}

.font-wt { font-weight: 100;}
.font-wl { font-weight: 300;}
.font-wn { font-weight: 400;}
.font-wb { font-weight: 700;}

.font-sz-xsm { font-size: 0.6em;}
.font-sz-sm { font-size: 0.8em;}
.font-sz-md { font-size: 1.2em;}
.font-sz-lg { font-size: 1.5em;}
.font-sz-xlg { font-size: 2em;}

.font-sz-3em { font-size: 3em;}

.bg-clr-1{ background-color: #f29844;}
.bg-clr-2{ background-color: yellowgreen;}