﻿@charset "utf-8";

html { width: 100%; overflow: auto; font-size: 62.5%;}
body {
	background: ;
	text-align: center;
	padding: ;
	line-height: 1.5;
	font-size:1.4rem;
	color: #333333;
	width: 100%;
	position:relative;
	overflow:hidden;
}
body.pc { min-width: 960px;}

#topG_txt {background: #58B531; color: #fff; font-size: 1.6rem; text-align: left; padding: 8px 14px; line-height: 1.0;}

.pcNon { display: none;}

#goTop { position:fixed; z-index:1000; right:0; bottom:0; width:114px; height:84px; cursor: pointer; font-size: 0; letter-spacing: 0; line-height: 0;}
#goTop:hover { opacity:0.8;}

@media screen and ( max-width:900px ){
    
}
@media screen and ( max-width:700px ){
    /*html { font-size: 68%;}*/
    body { opacity: 0;}
    .pc, .tablet { opacity: 1;}
    .sp { line-height: 1.4; opacity: 1 !important;}
    .sp #topG_txt { font-size: 1.5rem; padding: 7px 7px; margin-bottom: 0;}
    
    .sp .pcNon { display: block;}
    .sp .spNon { display: none;}
    
    .sp #goTop { width: 0; height: 0;}
    .sp #goTop img { display: none; opacity: 0;}
}


/* ----------------------------------------------------------------------------
	header
---------------------------------------------------------------------------- */
header { height: 80px; text-align: left; position: relative; padding-left: 360px; background: #fff; width: 100%;}
header .name { position: absolute; left: 14px; top: 10px; width:340px; }
header nav { height: 80px; margin-right: 10px; display: -webkit-flex; display: flex; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items: center; align-items: center;}
header nav ul { font-size: 0; left: 0; text-align: right;}
header nav li { font-size: 1.4rem; font-weight: bold; display: inline-block; margin: 0 15px; position: relative;}
header nav li a { text-decoration: none; color: inherit; padding: 5px; letter-spacing: 1px; display: block;}
header nav li:after { content: ""; width: 0; height: 2px; background: #C3D600; display: block; position:relative; margin: 2px auto 0;transition: .25s ease-out;}
.pc header nav li:hover:after { width: 100%;}
header nav li.visited:after { width: 100%;}
header #trigger, header .menuClose { display: none; cursor: pointer;}

@media screen and ( max-width:1060px ){
    header nav { margin-right: 5px;}
    header nav li { margin: 0 10px;}
}
@media screen and ( max-width:700px ){
    .sp header { height: 54px; padding: 0 0 0 5px; position:relative; left: auto; top: auto; z-index: 100; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;}
    .sp header .name { position: relative; left: auto; top: auto; width:66%; }
    .sp header .name img { width: 100%;}
    .sp header #trigger { display: block; width: 25px; position: absolute; right: 14px; top: 51%; transform: translate(0%, -50%);}
    .sp header nav {
        visibility: hidden;
        width: 100vw; height: 100vh; overflow-y: auto; background: #5BB431; color: #fff; position:fixed; left: 0; top: 0px; padding: 50px 30px;
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        /*-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
        transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;*/
    }
    .sp header nav.open {
        visibility: visible;
        display: block;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
        transition: transform 0.4s, opacity 0.4s;
    }
    .sp header nav .menuClose { display: block; position: absolute; right: 18px; top: 15px; width: 36px;-webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0);}
    .sp header nav ul { text-align: left; display: none; opacity: 0;}
    .sp header nav.open ul { display: block; opacity: 1;}
    .sp header nav li { display: block; border-bottom: dotted 1px rgba( 255, 255, 255, 0.5); padding-top: 1px; font-size: 1.5rem;}
    .sp header nav li a { padding: 1em 5px; }
    .sp header nav li:after { content: none;}
}

/* ----------------------------------------------------------------------------
	contents
---------------------------------------------------------------------------- */
.lowerMain { width: 100%; padding-top: 25.6%; position: relative; margin-bottom: 16px;}
.lowerMain object { width: 100%; position: absolute; left: 0; bottom: -1px;}
/*.lowerMain:after { content: ""; display: block; position: absolute; right: 0; bottom: 0; background: url(../img_cmn/bg_lower.svg) no-repeat right top/cover; width: 100%; height: 67.5%;}*/

.contents { width: 100%; max-width: 1140px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; text-align: left;}
.pageTtl { margin-bottom: 30px;}
.pageTtl img {height: 32px;}

h2 { font-size: 2.2rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 1em;}

@media screen and ( max-width:700px ){
    .sp .lowerMain { padding-top: 69.4%; margin-bottom: 14px;}
    .sp .lowerMain object { display: none;}
    .sp .lowerMain:after { content: ""; display: block; position: absolute; right: 0; bottom: -1px; background: url(../img_cmn/bg_lower_sp.svg) no-repeat right top/cover; width: 100%; height: 42.4%;}
    .sp .contents { padding-left: 6%; padding-right: 6%; }
    .sp .pageTtl { margin-bottom: 18px;}
    .sp .pageTtl img {height: 26px;}
    
    .sp h2 { font-size: 2.0rem; letter-spacing: 2px; margin-bottom: 1em;}
}


/* ----------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------- */
footer { margin-top: 70px; text-align: left; padding-bottom: 8px; color: #595656;}
footer .snsBox { padding: 0 14px;}
footer .name { width:340px; float: left;}
footer .nestSns { display: none;}
footer .snsBox ul { float: right; text-align: right; font-size: 0; letter-spacing: 0; margin-top: 18px;}
footer .snsBox li { display: inline-block; margin-left: 8px;}
footer .snsBox li a { border: #ccc 1px solid; width: 150px; height:36px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding-left: 2px;}
footer .snsBox li .txtImg { margin-right: 8px;}
.ie footer .snsBox li .txtImg { flex: 0 0 74px;}
footer .snsBox li .txtImg img { height: 16px;}
footer .snsBox li .imgIcon img { height: 22px;}

footer .fAGbox {border-top: #C7C5C7 1px solid; padding: 15px 94px 0 14px; margin: 10px 0 0;}
footer .addressP { width:40%; float: left; }
footer .addressP span { display: inline-block; margin-right: 10px;}
footer .addressP .address { margin-right: 18px;}
footer .fAGbox dl { width: 59%; padding-top: 4px; float: right; display: -webkit-flex; display: flex; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items: center; align-items: center;}
footer .fAGbox dt { font-size: 1.4rem; font-weight: bold; margin-right: 10px;}
footer .fAGbox dd { margin-left: 20px;}
footer .fAGbox dd img { height: 44px; }
footer .copyRight { font-size: 1.2rem; padding: 0 14px; letter-spacing: 0.5px; margin-top: -2px; clear: both;}


@media screen and ( max-width:700px ){
    .sp footer { margin-top: 18%; padding-bottom: 5px;}
    .sp footer .nestSns { display: inline-block; font-size: 0; margin-right: 6px; width: 24%;}
    .sp footer .snsBox { padding: 0 5px;display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
    .sp footer .snsBox ul { float: none; text-align: center; font-size: 1.1rem; letter-spacing: 0.1px; margin-top: 0;}
    .sp footer .snsBox li { width: 30%; margin-left: 4px;}
    .sp footer .snsBox li .txtImg { display: none;}
    .sp footer .snsBox li a { width: 100%; height:100%; padding: 8px; -webkit-flex-direction: column; flex-direction: column; text-decoration: none; color: inherit;}
    .sp footer .snsBox li .imgIcon { display: block; margin-bottom: 3px;}
    .sp footer .snsBox li .imgIcon img { height: 34px;}
    .sp footer .name { width:100vw; padding-right: 34%; float: none; margin-top: 4%; }
    .sp footer .fAGbox { padding: 8px 5px 0; margin: 6px 0 1.45em;}
    .sp footer .addressP { width: 100%; float: none; line-height: 1.6;}
    .sp .zip { display: block;}
    .sp footer .addressP a { text-decoration: none; color: inherit;}
    .sp footer .fAGbox dl { width: 100%; overflow: hidden;padding-top: 1.4em; float: none; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:space-between; justify-content:space-between;}
    .sp footer .fAGbox dt { width: 100%; font-size: 1.4rem; margin-right: 0; position: relative;}
    .sp footer .fAGbox dt span { display: inline-block; background: #fff; padding-right: 5px; position: relative; z-index: 1;}
    .sp footer .fAGbox dt:before { content: ""; display: block; width: 100%; height: 1px; background: #999; position: absolute; left: 0; top: 50%; z-index: 0;}
    .sp footer .fAGbox dd { width: 44%; margin-left: 0; padding: 0 6px;}
    .sp footer .fAGbox dd:nth-of-type(2) { width: 55.44%;}
    .sp footer .fAGbox dd img { height: auto; }
    .sp footer .copyRight { font-size: 1.1rem; padding: 0 5px; letter-spacing: 0.4px;}
}

