@charset "utf-8";

html {
	-webkit-text-size-adjust:100%;
}
body{
	/* font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; */
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.7em;
	background-color:#f8f4e6;
	font-size:18px;
	color:#65594a;
    margin: 0;;
}

::selection{
	background:#ea3852;
	color:#fff;
	text-shadow:none;}
.fs1{
	display:inline;}

/* Hyperlink Styles: */
a, a:visited {
	text-decoration:none;
	outline:none;
	cursor:pointer;
	color:#65594a;}
img{
	border:none;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
.fs1{
	display:inline;}

.pure-g [class *="pure-u"] , input {
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}

/*-------------------------------------------*/
/*  page
/*-------------------------------------------*/
.pagewrap , .innerwrap{
	width:980px;
	margin: 0 auto;
}
section{
    width: 100%;
}

/* header visual ------------------*/
.headervisual{
    background: #008743; 
}

.headervisual h1{
    /* overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin: 0; */
}

/* douga --------------------------*/
.douga{
    background: #008743;
    
}
.douga .innerwrap{
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #072C1C),
	color-stop(0.5, #005530),
	color-stop(1, #072C1C)
);
background-image: -o-linear-gradient(bottom, #072C1C 0%, #005530 50%, #072C1C 100%);
background-image: -moz-linear-gradient(bottom, #072C1C 0%, #005530 50%, #072C1C 100%);
background-image: -webkit-linear-gradient(bottom, #072C1C 0%, #005530 50%, #072C1C 100%);
background-image: -ms-linear-gradient(bottom, #072C1C 0%, #005530 50%, #072C1C 100%);
background-image: linear-gradient(to bottom, #072C1C 0%, #005530 50%, #072C1C 100%);
}
.dougatxt{
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    height: 315px;
}
.dougatxt h3{
    display:inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5em;
    font-weight:normal;
    color:#E6A943;
/*    text-shadow: 2px 2px 1px #fff;*/
    line-height: 1.65em;
}
    



/* Mondai -------------------------*/
.mondai{
    position:relative;
    width: 100%;
    height: 500px;
    background-image: url(../img/think.png) ;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 300px 300px;
}
.mondaisection h3{
    text-align: center;
    font-size: 2em;
    line-height: 1.7em;
/*    text-shadow: 2px 2px 1px #008743;*/
    color: #008743;
}
.mondai span{
    display: block;
    padding: 20px;
    background: #898989;
    color: #fff;
    position:absolute;
    min-width: 160px;
    -moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
}
.mondai img {
    width: 300px;
}
.mon1{
    top: 120px;
    left: 120px;
}
.mon2{
    top:30px;
    left:230px;
}
.mon3{
    top:30px;
    right:230px;
}
.mon4{
    top:120px;
    right:120px;
}
.mon5{
    top:220px;
    left:20px;
}
.mon6{
    top:220px;
    right:20px;
}
.mon7{
    top: 330px;
    left:110px;
}
.mon8{
    top:330px;
    right: 110px;}

.mon1:after{
    content: url(../img/mon5.png);
	right: -44px;
	bottom: -10px;
	position: absolute;
}
.mon2:after{
    content: url(../img/mon2.png);
	right: 10px;
	bottom: -40px;
	position: absolute;
}
.mon3:after{
    content: url(../img/mon3.png);
	left: 10px;
	bottom: -40px;
	position: absolute;
}
.mon4:after{
    content: url(../img/mon6.png);
	left: -44px;
	bottom: -10px;
	position: absolute;
}
.mon5:after{
    content: url(../img/mon55.png);
	right: -44px;
	bottom: 0;
	position: absolute;
}
.mon6:after{
    content: url(../img/mon66.png);
	left: -44px;
	bottom: 0;
	position: absolute;
}
.mon7:after{
    content: url(../img/mon7.png);
	right: -44px;
	bottom: 0;
	position: absolute;
}
.mon8:after{
    content: url(../img/mon8.png);
	left: -44px;
	bottom: 0;
	position: absolute;
}

/* Mondai 2 ------------------------------- */
.mondaisection{
    padding: 20px 0 80px;
}
.mondai2{
    font-size: 1.3em;
}
.mondai2 p{   
    text-align: center;
}
.mondaiul{
    margin: 0 auto;
    
}
.mondaiul > div{
    padding: 15px 0 30px 0px;
    border:5px solid #ccc;
    -moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	border-radius: 15px;
    margin:0 auto 0.5em auto;
    background: #fff;
}
.mondai2 ul {
    margin: 0 auto;
}
.mondai2 ul li{
    list-style-image: url(../img/batu2.png);
    list-style-position: inside;
    font-size: 30px;
    margin-top: 0.5em;
}

/* kaiketu -------------------------------- */
.kaiketu{
    text-align: center;
    padding: 1.3em 0;
    background: #008743;
    
}
.kaiketu h2{
     display:inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 1.65em;
    font-size: 3em;
    color: #fff;
}
.arrow_box {
	position: relative;
	background: #008743;
}
.arrow_box:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(181, 31, 53, 0);
	border-top-color: #008743;
	border-width: 30px;
	margin-left: -30px;
}

/* low cost ------------------------------- */
.lowcostsection{
/*    background: #B9DA7F;*/
    background: #d8f2a0;
}
.lowcost{
    width: 100%;
    padding: 4em 0;
}
.lowcost h2{
    font-size: 3em;
    color: #008743;
    text-align:center;
}
.lowcostdetail{
    display: inline-block;
    vertical-align: top;
    
    height: 554px;
    padding: 35px 25px;
    
    -moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	border-radius: 15px; 
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: 5px solid #d8f2a0;
    background: #fff;
}
.lowcostdetail img{
    width: 230px;
    text-align:center;
}
.lowcostdetail div span{
    background: #b51f35;
}
.kime{
    padding: 0.5em;
    background: #b51f35;
    color: #fff;
    font-size: 0.9em;
}

/* donyu ------------------------------- */
.donyusection{
/*    background: #FCFAA3;*/
}
.donyu{
    width: 100%;
    padding: 4em 0;
}
.donyu h2{
    font-size: 3em;
    color: #008743;
    text-align:center;
}
.donyudetail{
    display: inline-block;
    vertical-align: top;
    
    height: 465px;
    padding: 35px 25px;
    
    -moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	border-radius: 15px; 
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: 5px solid #f8f4e6;
    background: #fff;
}
.donyudetail img{
    width: 230px;
}
.donyudetail div span{
    background: #b51f35;
}

/* kinou --------------------------------*/
.kinousection{
/*    background:#E2D1B3;*/
    background: #d8f2a0;
}
.kinou{
    width: 100%;
    padding: 4em 0;
}
.kinou h2{
    font-size: 3em;
    color: #008743;
    text-align:center;
}
.kinou h4{
    font-size: 1.5em;
    margin: 0.5em 0;
}
.kinoudetail{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 35px 25px;
    
    -moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	border-radius: 15px; 
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: 5px solid #d8f2a0;
    background: #fff;
}
.kinoudetail2{
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 35px 25px;
    
    -moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	border-radius: 15px; 
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: 5px solid #d8f2a0;
    background: #fff;
}
.kinou_dd{
    display: inline-block;
    vertical-align: top;
    
}

/* iPad -----------------------------------*/
.ipadsection{
/*    background: #CAFDDC;*/
}
.ipad{
    width: 100%;
    padding: 4em 0;
}
.ipad h2{
    font-size: 3em;
    color: #008743;
    text-align:center;
}
.ipad p{
    font-size: 0.8em;
}
.ipaddetail{
    display: inline-block;
    vertical-align: top;
    
    padding: 35px 25px;
    
    -moz-border-radius: 15px; 
	-webkit-border-radius: 15px; 
	border-radius: 15px; 
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border: 5px solid #f8f4e6;
    background: #fff;
}

/* Gallery ---------------------------------------*/
.ipadgallery{
    background: #d8f2a0;
}
.gallery{
    width: 100%;
    padding: 4em 0;
    text-align: center;
}
.gallery h2{
    font-size: 3em;
    color: #008743;
    text-align:center;
}
.gallery p{
    font-size: 0.8em;
}
.gallery img {
    width: 900px;
/*    height: 300px;*/
}

/* contct input ----------------------------------*/
.contactsection{
/*    background: #CCD789;*/
/*    background: #d8f2a0;*/
}
.contact{
    width: 750px;
    margin: 0 auto;
    padding: 4em 0;
}
.contact h2{
    /* font-size: 3em; */
    color: #008743;
    text-align:center;
}

.contact table{
    background: #fff;
}
.contact table th{
    width: 200px;
    min-width: 160px;
	padding:1.2em ;
	position:relative;
	background:#f1f1f1;
    text-align: left !important;
    font-weight: normal;
}
.contact table td{
    min-width: 450px;
    width: 450px;
}
.contact table td input{
    max-width: 380px;
    height:40px;
}
.contact table th , .contact table td{
    border-bottom: 1px solid #cbcbcb !important;
}
.sp{
	color:#fff;
	margin:0 .5em 0 2em;
	font-size:8px;
/*	position: absolute;*/
	right: 1em;
	bottom:2.3em;}
.req{
	color:#FA7B77;}
.rbr{
	display:none;}
.submitarea{
	width:90%;
	padding:5%;
	text-align:center;}
.privacy_link{
    text-align:center;
}
.tel{
    margin: 1.5em 1.5em 1.5em 4em;
    padding: 1em;
    font-size: 110%;
    background: #fff;
    color: #60A020;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    border: 3px solid #60A020;
}

/* footer --------------------*/
footer{
    
    padding: 3em 0;
    text-align: center;
    background: #008743;
    color: #fff;
}
footer a , footer a:hover , footer a:visited{
    color: #fff;
}


/* button ---------------------------*/
.button-xsmall {
	font-size: 70%;}

.button-small {
	font-size: 85%;}

.button-large {
	font-size: 110%;}

.button-xlarge {
	font-size: 125%;}
.button-xxlarge {
	font-size: 150%;}
.button-success,
        .button-error,
        .button-warning,
        .button-secondary, 
        .contactbutton {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    /*background: rgb(66, 184, 221);  this is a light blue */
    background:#F05299;
}
.contactbutton{
    background: #008743;
    margin: 1em auto;
}

	
/*-----------------------------------------------------------*/
/* scroll to page top*/
/*-----------------------------------------------------------*/
#pagetop{
	position:fixed;
	right:40px;
	bottom:40px;
	z-index:250;
	width:39px;
	height:39px;}
#pagetop a{
	margin:0;
	display:block;
	width:39px;
	height:39px;
	color:#529142;}
#pagetop a:hover{
	color:#529142;}
#pagetop > a > .fs1{
	font-size:39px;}

/*@media only screen and (max-width:480px){*/
@media only screen and (max-width:768px){    
section , footer{
    width: 980px;
}
tablearea{
width:100%;
}
.contact {
    width: 100%;
}
.tel , .contact table{
    font-size: 200%;
    line-height: 1.6em;
}
.contact table{
/*    width: 100%;*/
    width: 100%;
    max-width: 100%;
    overflow:hidden;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.contact table td input{
    max-width: 100%;
}
.contact table td input[type="textbox"], .contact table td input[type="textarea"]{
    max-width: 100%;
    width: 100%;
}
.contact table th, .contact table td{
    display:block;
    width: 100% ;
    max-width: 100% !important;
    overflow:hidden;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
    
}
.pure-form label{
    display: inline-block!important;
    margin:  .2em 0;
    height: auto !important;
}
.pure-form input{
    max-width: 80%;
}
.sp{
    position: relative;
    font-size: 90%;
    right:0;
    bottom: 0;
    margin-left: 3em;
}

}