@charset "UTF-8";

html,body,img,h1,h2,h3,h4,p,ul,li,p,dl, dd, dt,span,a,textarea,input{
margin:0;
padding:0;
line-height: 1.0;
}

img{
vertical-align: bottom;
max-width: 100%;
}

li{
list-style: none;
}

a{
text-decoration: none;
color: inherit;
}

body{
font-family: "Sawarabi Mincho"; 
background-color: #FBF2E6;
color: #1e1e1e;
}

/*-header-------- */
header{
height:40vh;
background:url(../img/bcg_intro.jpg)no-repeat center center /cover;
}

.sticky-tel{
width:60%;
position: fixed;
left:0;
right:0;
bottom:10px;
margin: auto;
z-index: 3;
text-align: center;
}

.sticky-tw{
width:13%;
position: fixed;
left:20px;
bottom:25px;
z-index: 3;
text-align: center;
}

.sticky-ct{
width:13%;
position: fixed;
right:20px;
bottom:28px;
z-index: 3;
text-align: center;
}

.header-inner{
width:100%;
position: fixed;
display:flex;
flex-wrap:nowrap;
justify-content: space-between;
align-items:center;
top:0;
left:0;
z-index: 4;
padding:10px 20px;
box-sizing: border-box;
}

.logo img{
height:80px;
}

.menu-btn img{
height:40px;
}

.menu-btn.is-active{
position:absolute;
padding:30px 20px 10px;
z-index: 100;
top:0;
right:0;
}
.menu-btn.is-active{
display:none;
}

.menu-btn.close{
display:none;
}
.menu-btn.is-active.close{
display:block;
}

/* --メニュー本体 --*/
.menu{
position: absolute;
height:100vh;
width:100%;
box-sizing: border-box;
top: 0;
right: 0;
z-index: 4;
background-color: rgba(255, 255, 255, 0.952);
padding-top:70px;
text-align: center;
}

.menu-item{
width:100%;
padding:10px 0;
color: #1e1e1e;
box-sizing: border-box;
}

.menu-item a{
margin:0 auto;
display: block;
width:100%;
padding:10px 0;
box-sizing: border-box;
}

.calendermail-logo{
display:flex;
justify-content:space-between;
align-content: center;
margin-bottom:2em;
width:30%;
margin: 0 auto;
}

.calendermail-logo img{
height:40px;
box-sizing: border-box;
}

/* menu-nonactiveの場合----- */
.menu{
pointer-events: none;
opacity: 0;
transition: 0.3s linear;
}

.container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
box-sizing: border-box;
text-align: center;
}

/*-----川の背景----------- */
.river-bcg{
max-width:1200px;
background:url(../img/rivertest4.svg)no-repeat center top/contain;
}

/* menuがactiveの場合------- */
.menu.is-active{
position:fixed;
top:0;
right:0;
pointer-events: auto;
opacity: 1;
overflow: auto;
z-index: 1;
}

/*--余白の設定-------------*/
.section{
margin-bottom: 60px;
}

.inner{
margin-bottom: 30px;
}
.inner_pic{
margin-bottom: 20px;
border-radius: 6px;
}

h1,h2,h3,h4{
font-weight: 400;
}

h1{
margin:60px 0 20px;
font-size: 25px;
}

.intro{
margin-bottom: 60px;
line-height: 1.5;
}

h2,h3{
font-size: 20px;
}

h2,h3{
margin-bottom: 20px;
}

h4{
margin-top: 50px;
}

.detail{
line-height: 2.0;
text-align: left;
}

.detail.last{
margin-bottom: 60px;
}

/*---トップに戻るボタン---*/
#top-btn{
width:100px;
height:100px;
position:absolute;
bottom:100px;
right:10px;
}

/*---footer-------------------------- */
footer{
position: relative;
text-align: center;
padding:40px 40px 150px 40px;
box-sizing: border-box;
background-color: #1e1e1e;
color:#FBF2E6;
}

.footer-inner{
margin-bottom: 30px;
}

.footer-inner li{
line-height:1.5;
}

.footer-emphasis{
font-size:20px;
}

@media (min-width:767px){
/*----humbuger-------*/
.menu-btn,.sticky-tel,.sticky-tw,.sticky-ct{
display:none;
}

header{
height:80vh;
background-position:center bottom;
background-attachment: fixed;
}

.menu{
position: static;
height:auto;
width:100%;
pointer-events: auto;
opacity: 1;
background-color: transparent;
padding-top:0;
}

.menu{
width:90%;
display: flex;
align-items: center;
}

.header-inner{
justify-content: space-around;
font-size: 15px;
}

.menu-inner{
display:flex;
justify-content: space-between;
width:100%;
}

.menu-item{
width:auto;
padding:0 10px;
line-height: 2;
display:inline-block;
}

.menu-item a{
display:block;
width:100%;
padding:20px 15px;
box-sizing: border-box;
}

.mail-svg{
width:75%;
}

.calendermail-logo{ 
width:15%;
margin-bottom:0;
box-sizing: border-box;
justify-content:space-around;
}

.calendermail-logo a{ 
display:block;
padding-left:2em;
box-sizing: border-box;
}

.g-sns-logo{
width:10%;
padding:0 0;
}

h1{
font-size: 30px;
}

.intro{
font-size: 20px;
}

/*--layout---*/
.sozai_box{
display:flex;
flex-wrap: wrap;
justify-content: space-around;
} 

h2{
font-size: 25px;
width:100%;
line-height: 1.5;
}
.inner{
width:45%;
margin-bottom: 100px;
}

.inner.last{
width:70%;
margin: 0 auto 100px;
}

.detail{
font-size:20px;
}

.detail.last{
margin-bottom: 0;
}

.footer-emphasis{
font-size: 25px;
}

.footer-inner{
font-size: 20px;
}
/* --ホバーの設定------- */
.menu-inner>li a:hover{
color:rgb(233, 175, 15);
transition: 0.2s;
}

/* --g-nav背景の設定------- */
#g-nav.scroll{
background-color:#FBF2E6;
box-shadow: 0 3px 3px #c5bcb03f;
}

#g-nav.scroll>.menu-inner{
height:50px;
color:#f00;
}
  

}