@charset "utf-8";

img{max-width: 100%;}
.wrapper{position: relative;}

.site-header__wrapper img{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /*display: block;*/
    
}

nav{
text-align: center;
    border: none;
    display: flex;
    }

nav ul{
margin: 0 ;
padding: 0 ;
    position: absolute;
    top:2%;
        right:0;
    width: 40%;
}
nav ul li{
list-style: none;
display: inline-block;
width: 10%;
    min-width: 20%;

}
nav ul li a{
text-decoration: none;
color: #0f0f10;
    font-family: serif;
    font-size: 0.9em;
}
nav ul li.current a{
color: #F33135;
}
nav ul li a:hover{
color: #be414d;
}

h1{
    text-align: center;
    padding: 0 auto;margin: 0 auto 10%;
    }
h1 a{border-bottom:solid;
border-color:#be414d;
border-width:5px;/*5ピクセルの太さにする*/
    font-family: serif;
    
}

.contents{
    margin:0 auto;;
    padding: 10%;
    margin: 3% 0 0;
}
.gcolor{background-color: #fbfaf9;}

p{text-align: center;
font-size: 0.9em;
line-height: 1.9em;
letter-spacing: 1.3px;}

.gallery{
    display: grid;
  
  place-items: center;
  /* 行列の自動配置方向を列方向にする */
  grid-auto-flow: column;
}
.btn{padding: 10% 3% 0%;
    widows: 100%;
    display: grid;
  
  place-items: center;
  /* 行列の自動配置方向を列方向にする */
  grid-auto-flow: column;
}
.btn img{display: grid;
  
  place-items: center;
  /* 行列の自動配置方向を列方向にする */
  grid-auto-flow: column;}

.btn a{
	width:250px;
	display:block;
    
}
.btn a:hover{ 
	opacity:0.5;
	transition:0.3s;
}

.flex {
  display: flex; /*横並び*/
    justify-content: center;
  align-items: center;
}
.flex .image {
   /*width: 640px;画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  margin: 0 0 0 60px;
  padding: 0;
    text-align: left
}
.pc_area{
  display:block;
}
.phone_area{
  display:none;
}
  .pagetop {
    height: 30px;
    width: 30px;
    position: fixed;
    right: 20px;
    bottom: 10px;
    background: #fff;
    border: solid 2px #0f0f10;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 8px;
    width: 8px;
    border-top: 2px solid #0f0f10;
    border-right: 2px solid #0f0f10;
    transform: translateY(20%) rotate(-45deg);}


 


@media screen and (max-width: 640px) {
/* スマホ用のCSS */
/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #000;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#000;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#000;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 1%;
  right : 0;
  color: #555;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 70%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
    background-color: #292929;
    opacity: 0.5;
  padding: 1em 0;
  text-decoration :none;
}
    .pc_area{
    display:none;
}
.phone_area{
    display:block;
 }
    .gallery{
    display: block;
  text-align: center;
}
    .gallery img{margin: 3%;}
    
    .flex {
  display: block; /*横並び*/
}
    .flex .image {
   width: 60%;
  margin: 2% auto;
  padding: 0;
  overflow: hidden;
  position: relative;
        text-align: center;
}
    .flex .text {
  margin: 0;
  padding: 0;
    text-align: left
}
    p{text-align: left;
font-size: 0.9em;
line-height: 1.9em;
letter-spacing: 1.3px;}
  
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;

}
    .pagetop {
    height: 30px;
    width: 30px;
    position: fixed;
    right: 20px;
    bottom: 10px;
    background: #fff;
    border: solid 2px #0f0f10;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 8px;
    width: 8px;
    border-top: 2px solid #0f0f10;
    border-right: 2px solid #0f0f10;
    transform: translateY(20%) rotate(-45deg);}


}