@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

html{
	font-size: 62.5%;

}
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
a.logo {
    display: block;
    max-width: 300px;
    width: 30%;
    min-width: 200px;
}
.headright {
    display: flex
;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
body {
    padding: 10px 20px;
	font-size:1.6rem;/* 16px*/
    line-height: 2;

	font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
	font-style: normal;
	min-width: 1000px;
}
h1{font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;}
h2{font-size: 32px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
}
h3{font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
}
p{fontsize:15px;}

/******************************/
@media (min-width: 1200px) {/* 1200px以上*/
    h1 {
        font-size: 3.6rem;/* 36px*/
    }
    h2 {
        font-size: 3.2rem;/* 32px*/
    }
	h2 {
        font-size: 2.4rem;/* 24px*/
    }
}
@media screen and (max-width: 767px) {/* 640px以下*/
    body{
    line-height: 2;
    }
    h1{
        font-size: 2.4rem;/* 24px*/
    }
    h2 {
        font-size: 2rem;/* 20px*/
    }
	h3 {
        font-size: 1.6rem;/* 16px*/
    }
}
/*******************************/



a {
    padding: 2px 10px;
    text-decoration: none;
    color: #0086e0;
    background-image: linear-gradient(90deg, #0086e0, #0086e0);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size 0.6s;
}
a:hover {
    color: #003a62;
    background-size: 100% 1px;
}

.phone {
    font-size: 30px;
    font-weight: 700;
    color: #4d4d4d;
    text-align: right;
}
ul.nav_list {
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
ul.nav_list>li {
    list-style: none;
    padding: 2px;
    font-size: 0.9em;
}
ul.nav_list>li a {
    text-decoration: none;
    color: #004b80;
    padding: 2px 10px;
}
ul.nav_list>li a:hover {
    
    color: #003a62;
}
/*************************/


/************************/
label {
    margin-top: 25px;
}
select, input {
    padding: 10px;
    font-size: 0.9em;
    color: #555555;
    border: 0px;
    border-bottom: 1px solid #69c3a8;
    width: 300px;
    margin: 10px;
}
textarea {
    padding: 10px;
    font-size: 0.9em;
    color: #555555;
    border: 1px solid #69c3a8;
    width: 300px;
    margin: 10px;
}
.formkakomi {
    border: 1px solid #69c3a8;
    width: fit-content;
    margin: auto;
}
.formtitle {
    margin: 0px;
    padding: 25px;
    background: #68c3a7;
    color: white;
    font-size: 1.2em;
    text-align:center;
}
.productform {
    padding: 50px;
    text-align: center;
    width: fit-content;
	color: #6c6c6c;
}
/********FOOTER****************/
footer {
    background-color: #0097b2;
    color: white;
	padding-top:25px;
	margin-top: 50px;
}
.footer_navigation ul {
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.footer_navigation ul>li {
    list-style: none;
    font-size: 0.9em;
}
.footer_navigation ul>li a {
    padding: 2px 10px;
	color: #003458;
    text-decoration: none;
}
.footer_navigation ul>li a:hover {
   
    color: #acddff;
}
.copyright {
    text-align: center;
    font-size: 0.7em;
}
/******スマホ向け****************/
@media (max-width: 767px) { 
        body {
        padding: 0px;
        max-width: 100%;
        margin: 0px;
        min-width: 100%;
    }

	header {
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
}

	a.logo {
    display: block;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    text-align: center;
}
	a.logo img {
    width: 100%;
    padding: 5px;
}
	.headright {
    display: flex
;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
		section#productform {
    padding: 10px;
}
	.formkakomi {
        width: 100%;
    }
	.formtitle {
    padding: 10px;
}
	.productform {
    padding: 10px;
}
	select, input {
    margin: auto;
		padding: 0px;
        width: 100%;
}
	textarea {
    margin: auto;
		padding: 0px;
        width: 100%;
}
	.footer_navigation ul {
    display: none;
}
}