@charset "utf-8";
/* レイアウトのためのCSS */

body{
	--color--back:#f4f4f4;
	--color--black:#000;
	--color--white:#FFF;
	--color--main:#666;
	--color--hover:#AAA;
	--color--line:#CCC;
    background:var(--color--back);
    font-family: 'Noto Serif JP', serif;
	color: #333;
	font-size:1rem;
	line-height:1.85;
    font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

body.appear{
    background:var(--color--back);
}
.font-en{
    font-family: 'EB Garamond', serif;
}
.text-center{
	text-align:center;
}
*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
	text-decoration: none;
    outline: none;
}

img{
    width: 100%;
    height: auto;
}

.mb10{
	margin-bottom:10px;
}
.mb20{
	margin-bottom:20px;
}
.mb30{
	margin-bottom:30px;
}
.small{
	font-size:.9em;
}
.x-small{
	font-size:.8em;
}

/*---------------------------
 * grid-wrapper
 * -------------------------*/
.grid-wrapper.three{
	display:grid;
	grid-template-columns:1fr 1fr;
	column-gap:20px;
}
.grid-wrapper.three .grid-one{
	margin-bottom:2vw;
}
@media(min-width:40em){
.grid-wrapper.three{
	grid-template-columns:1fr 1fr 1fr;
}	
}
	
/*---------------------------
 * flex-wrapper
 * -------------------------*/
.flex-wrapper.half,
.flex-wrapper.one-third,
 .flex-wrapper.quarter{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.flex-wrapper.four:after{
	display:block;
	content:'';
	width:24%;
}
.flex-wrapper .flex-one{
	width:100%;
}
.flex-wrapper.half .flex-one{
	width:48%;
}
.flex-wrapper.one-third .flex-one{
	width:32%;
}
.flex-wrapper.quarter .flex-one{
	width:48%;
}
.flex-wrapper.quarter .flex-three{
	width:48%;
}
@media(min-width:40em){
.flex-wrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.flex-wrapper.two .flex-one{
	width:48%;
}
.flex-wrapper.three .flex-one{
	width:32%;
}
.flex-wrapper.three .flex-two{
	width:64%;
}
.flex-wrapper.four .flex-two{
	width:48%;
}
.flex-wrapper.four .flex-one{
	width:24%;
}
.flex-wrapper.four .flex-three{
	width:72%;
}
.flex-wrapper.five .flex-one{
	width:18%;
}
.flex-wrapper.six .flex-one{
	width:15%;
}
.flex-wrapper.quarter .flex-one{
	width:24%;
}
.flex-wrapper.quarter .flex-three{
	width:72%;
}
}


/* font-family */

.heading{
    font-family: 'EB Garamond', serif;
    font-size: 5vw;
    font-weight: normal;
    color: var(--color--main);
    animation-delay: 0.3s;
}

@media screen and (max-width:960px) {
.heading{
    font-size:3.5rem;
}
}
/* layout */
main{
	margin-bottom:5vw;
}
#container{
    overflow-x: hidden;
}
.innerArea{
	padding:0 10px;
}
section{
	margin-bottom:3vw;
}
@media(min-width:64em){
.innerArea{
	padding:0;
	max-width:64em;
	margin:0 auto;
}	
}

/* H */
#primary section h2{
 padding-bottom:.1em;
	margin-bottom:.5em;
	border-bottom:1px solid var(--color--line);
}

/* bread */
.breadcrumbs{
	margin-bottom:2vw;
}

/* header */

#header{
    background:var(--color--black);
}

#header h1{
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    position: absolute;
    top: 10px;
    left:50%;
    transform: translateX(-50%);
    color:#182578;
}

#g-nav ul{
    display: flex;
    padding: 0 0 0 5%;
}

#g-nav ul li{
  letter-spacing: 0.1em;
	font-size:.9em;
    white-space: nowrap;
	text-align:center;
	line-height:1.4;
	font-weight:700;
}

#g-nav ul li span{
  font-size:.6em;
	font-weight:normal;
}

#g-nav ul li:last-child{
     display: none;   
}

#g-nav ul li a{
    display: block;
    padding:6px 15px;
	color:var(--color--white);
}

@media screen and (max-width:1300px) {
#g-nav ul{
    display: block;
    padding: 0;
}
 #g-nav ul li{
	font-size:1em;
}  
#g-nav ul li a{
    padding:6px 15px;
}

	
}

#header ul#utility-navi{
    position: fixed;
    top:0;
    right:0;
    z-index: 999;
    display: flex;
    font-size: 0.7em;
	font-weight:bold;
}

#header ul#utility-navi li{
    text-align: center;
}

#header ul#utility-navi li span{
    display: block;
}

#header ul#utility-navi li a{
    color: #fff;
    padding: 16px 0;
    display: block;
    width:100px;
    transition: all .5s;
}

#header ul#utility-navi li img{
    width:35%;
}  

#header ul#utility-navi li:first-child a{
     background:#666;
}

#header ul#utility-navi li:first-child a:hover{
     background:#888;   
}

#header ul#utility-navi li:last-child a{
     background:var(--color--main);
}

#header ul#utility-navi li:last-child a:hover{
      background:var(--color--hover);
}

@media screen and (max-width:768px) {
#header h1{
    transform: translateX(-70%);
}
#header ul#utility-navi li span{
    display:none;
}

#header ul#utility-navi li a{
    width: 60px;
    height: 60px;
    padding: 0;
}
    
#header ul#utility-navi li img {
    width: 45%;
    margin: 17px 0 0 0px;
}
   
}

@media screen and (max-width:530px) {
#header h1{
    font-size: 1.3rem;
    transform: translateX(-50%);
	margin-top:8px;
}
    
#g-nav ul li:last-child{
     display: block;   
}
    
#header ul#utility-navi li:first-child{
    display: none;    
}

#header ul#utility-navi li:last-child a{
     background:#666;
}

#header ul#utility-navi li:last-child a:hover{
     background:#888;   
}
}



/* footer */

#footer{
    position: relative;
}

#footer .footer-r{
	position: relative;
    padding: 40px;
    background:var(--color--main);
    color: #fff;
}

#footer .footer-r .map-address{
    
}

#footer .footer-r .map-address address{
     font-style: normal;   
    margin: 0 0 30px 0;
}

#footer .footer-r .map-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 100px 0;
}

#footer .footer-r .map-area h2{
	position:absolute;
	bottom:0;
	left:0;
	color:rgba(255,255,255,.2);
	font-size: 18em;
}

#footer .footer-r .map-block{
    width:50%;
}

#footer .footer-r .iframe-area {
  position: relative;
  padding-bottom: 51.65%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
	filter: grayscale(1);
}

#footer .footer-r .iframe-area iframe,
#footer .footer-r .iframe-area object,
#footer .footer-r .iframe-area embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#footer .footer-link{
    font-size: 0.9rem;
    padding: 20px 0;
}

#footer .footer-link li{
     display: inline-block;
}

#footer .footer-link a{
    color: #fff;
}
#footer .footer-link a span{
   display:none;
}

#footer .footer-link a::after{
    content:'/';
    padding: 0 10px;
}

#footer .footer-link li:last-child a::after{
    content:'';
    padding: 0;
}

#footer .footer-l{
    width:30%;
    background:#333333;
}

#footer .footer-l .footer-contact{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--color--black);
	color:var(--color--white);
    height: 40vh;
}

#footer .footer-l .footer-contact-area h2{
    font-size: 1.2rem;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
}

#footer .footer-l .footer-contact-area a{
    font-size: 1.5rem;
    padding: 0 0 20px 0;
    display: inline-block;
	color:var(--color--white);
}

#footer #copyright{
    background:#333333;
    color: #ccc;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
	height:80px;
}

#footer #page-top{
    position: absolute;
    bottom:0;
    right: 0;
    width:80px;
    height:80px;
    background:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#footer #page-top span{
    display: inline-block;
  width: 13px;
  height: 13px;
  border-top:2px solid #182578;
  border-left: 2px solid #182578;
  transform: rotate(45deg);
}

@media screen and (max-width:40em) {
#footer .footer-r,
#footer .footer-l{
    width:100%;
}
#footer .footer-r .map-block{
    width:100%;
} 
#footer .footer-l .footer-contact,
#footer #copyright{
    height: inherit;
    padding: 40px 0;
}
    
#footer .footer-r .map-area h2{
	font-size: 14em;
}
   
#footer .footer-link{
    text-align: center;
}
    
}

@media screen and (max-width:768px) {
    #footer .footer-r{
        padding:80px 30px;
	}
    #footer .footer-r .map-area{
        margin: 0;
    }
#footer .footer-r .map-area h2{
	font-size: 9em;
	bottom:-50px;
}
#footer #page-top{
        width:60px;
        height: 60px;
} 
}

@media screen and (max-width:560px) {

#footer .footer-r .map-address,  
#footer .footer-r .map-block{
        width:100%;
}
    
#footer .footer-r .map-address{
        margin: 0 0 50px 0;
}
}