@charset "utf-8";
/* 共通スタイル--------------------------------------- */
body{
	color:rgb(54,52,52);
}
a{
	color:rgb(54,52,52);
}
/* 全体gridスタイル--------------------- */
div#body{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:grid;
	grid-template-columns:50% 50%;
	grid-template-rows:80% 20%;
	background-color:rgb(176, 196, 222);
	font-size:17px;
}
header{
	grid-row:1/2;
	grid-column:1/2;
	position:relative;	
}
main{
	grid-row:1/3;
	grid-column:2/3;
	overflow-y:scroll;
	background-color:rgb(234,228,223);
}
footer{
	grid-row:2/3;
	grid-column:1/2
}
/* 全体gridスタイルここまで-------------------- */

/* mainのレイアウトスタイル---------------- */
main{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:30px;
	width:100;
}
main .main-content{
	width:100%;
	height:100%;
}
main .main-content h2{
	font-size:25px;
	padding:17px 0 30px;
	display:block;
	text-align:center;
}
/* mainのレイアウトスタイルここまで---------------- */




/* ハンバーガーメニュー---------------------------------------- */

/* hamburgerスタイル------------------------------------------ */
.menu-btn {
    position: fixed;
    top: 17px;
    right: 50%;
	transform:translateX(50%);
    display: flex;
    height:60px;
    width:60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
	transition:200ms;
}
.menu-btn:hover{
	cursor:pointer;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 30px;
    border-radius: 3px;
    background-color:rgb(54,52,52);
    position: absolute;
	transition:400ms;
}
.menu-btn span:before {
    bottom: 10px;
	width:25px;
	left:5px;
	transition:300ms;
}
.menu-btn span:after {
    top: 10px;
	width:18px;
	transition:300ms;
}
#menu-btn-check:checked ~ .menu-btn span {
   /* background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	/*box-shadow:none;*/
	width:40px;/*いつでも消せる*/
	height:40px;
	border-radius:50%;
}
#menu-btn-check:checked ~ .menu-btn span::before {
    /*bottom: 0;
	width:30px;
	left:0;
    transform: rotate(45deg);*/
	background-color:rgb(234,228,223);
	width:9px;
	height:9px;
	border-radius:50%;
	top:50%;
	transform:translate(19px,-50%);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    /*top: 0;
	width:30px;
    transform: rotate(-45deg);*/
	background-color:rgb(234,228,223);
	width:9px;
	height:9px;
	border-radius:50%;
	bottom:-65%;
    transform:translate(7px,50%);
}
#menu-btn-check {
    display: none;
}

/* hamburgerスタイルkここまで----------------------------- */
/* menuスタイル--------------------------------------------- */
nav.nav-content{
	display:flex;
	width:100%;
	height:100%;
	position:fixed;
	top:-100%;
	left:0;
	transition:400ms;
	z-index:50;
}
/* .menu-titleスタイル-------------------------------------- */

.nav-content .menu-title{
	flex-basis:50%;
	height:100%;
	font-size:29px;
	background-color:rgb(234,228,223);
}

.nav-content .menu-title .menu-title-link,
.nav-content .menu-title .sns-icon{
	width:100%;
	text-align:center;
}
.nav-content .menu-title .menu-title-link{
	height:80%;
	display:flex;
	align-items: center;
	justify-content: center;
}
.nav-content .menu-title .menu-title-link li{
	padding:30px;
	transition:200ms;
}
.nav-content .menu-title .menu-title-link li.onPage{
	-moz-text-decoration:underline solid rgb(54,52,52) 3px;
	-webkit-text-decoration:underline solid rgb(54,52,52) 3px;
	text-decoration:underline solid rgb(54,52,52) 3px;
	font-weight:bold;
}
.nav-content .menu-title .menu-title-link li.onPage:hover{
	cursor:default;
}

.nav-content .menu-title .sns-icon{
	border-top:2px solid rgb(54,52,52);
	height:20%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav-content .menu-title .sns-icon ul{
	width:100%;
	display:flex;
	justify-content:center;
}
.nav-content .menu-title .sns-icon ul li{
	transition:200ms;
	background-repeat:no-repeat;
	padding-left:1.2em;
	background-position:left center;
	background-size:1em;
}
.nav-content .menu-title .sns-icon ul li:first-child{
	background-image:url(../img/insta-icon.png);
	margin-right:8px;
}
.nav-content .menu-title .sns-icon ul li:last-child{
	background-image:url(../img/blog-icon.png);
	margin-left:8px;
}
.nav-content .menu-title .sns-icon ul li :hover,
.nav-content .menu-title .menu-title-link li :hover{
	display:inline-block;
	color:rgb(95,92,92);
	transform:translateY(-2px);
	transition:200ms;
}
.nav-content .menu-title .sns-icon ul li:active,
.nav-content .menu-title .menu-title-link li:active{
	display:inline-block;
	color:rgb(95,92,92);
	transform:translateY(2px);
}
/* .menu-titleスタイルここまで---------------------- */


/* menu-imageスタイル----------------------------- */
.nav-content .menu-image{
	flex-basis:50%;
	justify-content:center;
    align-items: center;
	background-color:rgb(176, 196, 222);
}
.nav-content .menu-image ul{
	height:100%;
	display: flex;
	text-align: center;
	align-items: center;
}
.nav-content .menu-image li.item{
	width:100%;
	display:none;
}
.nav-content .menu-image li.point{
	display:block;
	width:100%;
	z-index: 100;
}


/* アクティブ時のスタイル */
.nav-content .menu-image li.item.active{
	width:100%;
	display:block;
	z-index:100;
}
.nav-content .menu-image li.item.active img{
	width:80%;

}
/* アクティブ時のスタイルここまで */

/* li.backgroundスタイル */

.nav-content .menu-image li span{
	display:block;
	width:45%;
	height:30%;
	background-color:rgb(23, 98, 159);
	position:absolute;
	top:52%;
	right:8%;
	border-radius:60% 40% 50% 50% / 50% 40% 60% 50%;
	z-index:99;
	animation:fuwafuwa 5s infinite;
	box-shadow:3px 3px 5px rgba(54,52,52);
}
@keyframes fuwafuwa{
	0%{
		transform:translate(0,0);
	}
	50%{
		transform:translate(0,-20%);
	}
	100%{
		transform:translate(0,0);
	}
}

/* li.backgroundスタイルここまで */
/* menu-imageスタイルここまで-------------------------- */

#menu-btn-check:checked ~ .nav-content{
	top:0;
}
/* menuスタイルここまで----------------------------------------------- */

/* ハンバーガーメニューここまで-------------------------------------- */

/* ヘッダータイトルロゴスタイル---------------------------------------- */
header{
	display:flex;
	justify-content: center;
	align-items: center;
}
header .title-logo{
	width:100%;
	position:relative;
}
header .title-logo h1{
	width:68%;
	margin:0 auto;
}
header .title-logo h3{
	width:40%;
	position:absolute;
	top:76%;
	right:10%;
}
/* ヘッダータイトルロゴスタイルここまで---------------------------------- */


/* footerスタイル--------------------------- */
footer{
	display:flex;
	justify-content:center;
	align-items:center;
}
footer .footer-content{
	background-color:rgb(234,228,223);
	padding:20px;
	width:90%;
	border-radius:11px;
	text-align:center;
	box-shadow:2px 2px 4px rgb(80,78,78) inset;
}
footer .footer-content h4{
	padding-bottom:5px;
	font-size:17px;
}
footer .footer-content p,
footer .footer-content address{
	font-size:13px;
	padding:3px;
}

/* footerスタイルここまで--------------------------- */

/* 共通スタイルここまで-------------------------------------------- */

/* #home.main-contentスタイル-------------------------------- */
#home{
	overflow:visible;
}
#home .main-wrap{
	width:100%;
	height:100%;
	background-image:url(../img/store5.jpg);
	background-repeat:no-repeat;
	background-position:center,center;
	background-size:cover;
	border-radius:10px;
	padding:50px;
	display:flex;
	justify-content:center;
	align-items:center;
}
#home .main-wrap .main-content{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:25px 12px;
	background-color:rgba(234,228,223,0.87);
	border-radius:15px;
	height:auto;
}
#home .main-wrap .main-content h2{
	padding-bottom:20px;
	display:block;
	text-align:center;
	font-size:28px;
}
#home .main-wrap .main-content p{
	font-size:15px;
	line-height:1.6em;
	padding:0 18px;
}
/* #home.main-contentスタイルここまで----------------------- */

/* #about.main-contentスタイル--------------------------------- */
#about .main-content p{
	line-height:1.6em;
	padding-bottom:30px;
	font-size:15px;
	padding:0 20px 50px;
}
#about .main-content .about-photo{
	padding:0;
}
#about .main-content .about-photo img{
	width:100%;
	border-radius: 30% 70% 50% 50%/30% 60% 40% 70%;
	box-shadow: 2px 2px 4px rgb(70,67,67); 
}
#about .main-content .innerWrap2{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	padding:25px 0;
}
#about .main-content .innerWrap2 .item{
    width:50%;
	padding:8px;
}
#about .main-content .innerWrap2 .item img{
	border-radius:30% 70% 40% 60%/40% 40% 60% 60%;
	box-shadow: 2px 2px 4px rgb(70,67,67);
}
#about .main-content .innerWrap2 .item:last-child img{
	border-radius:60% 40% 50% 50%/70% 60% 40% 30%;
	box-shadow: 2px 2px 4px rgb(70,67,67); 
}

@media screen and (max-width:1200px){
	#about .main-content .innerWrap2 .item{
		width:100%;
		}
	}
/* #about.main-contentスタイルここまで-------------------------- */

/* #media .main-contentスタイル------------------------------- */
#media .main-content .item{
	display:flex;
	border:1px solid rgb(54,52,52);
	margin-bottom:30px;
	background-color:rgb(249,251,249);
	box-shadow: 3px 3px 5px rgba(80,80,80,0.6);
	transition:200ms;
	border-radius: 10px;
}
#media .main-content .item .media-date{
	border-right:1px solid rgb(54,52,52);
}
#media .main-content .item .media-date,
#media .main-content .item .media-content{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px;
}
#media .main-content .item .media-content p{
	line-height:1.6em;
}
#media .main-content .item:hover{
	transform:translateY(1px);
	box-shadow: 2px 2px 4px rgba(80,80,80,0.7);
}
#media .main-content .item:active{
	transform:translateY(3px);
	box-shadow:none;
}
#media .sns-content{
	padding:25px 0;
	border-top:1px solid rgb(54,52,52);
}
#media .sns-content .twitter-content{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}
#media .sns-content .twitter-content .sns-item{
	flex-basis:50%;
	min-width:250px;

}
@media screen and (max-width:1240px) and (min-width:771px){
	#media .sns-content .twitter-content .sns-item{
		flex-basis:100%;
	}
}
@media screen and (max-width:677px){
	#media .sns-content .twitter-content .sns-item{
		flex-basis:100%;
	}
}
/* #media .main-contentスタイルここまで------------------------------- */

/* #access .main-contentスタイル--------------------------------- */
#access .main-content .google-map{
	width:100%;
	aspect-ratio:1/1;
	padding:0 0 10px;
}
#access .main-content .google-map iframe{
	border-radius:10px;
}
#access .main-content .address-content{
	padding:20px 10px 40px;
}
#access .main-content .address-content h5,
#access .main-content .address-content p,
#access .main-content .address-content address,
#access .main-content .address-content small{
	font-size:15px;
	padding:0 0 5px;
}
#access .main-content .address-content h5{
	font-size:17px;
	padding-bottom:7px;
}
/* #access .main-contentスタイルここまで-------------------- */

/* #error .main-contentスタイル------------------------- */
#error{
	overflow:visible;
}
#error .main-content h2{
	line-height:1.4em;
}
#error .main-content h2 span{
	font-size:18px;
}
#error .main-content{
	background-image:url(../img/error.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
}
#error .main-content .not-found{
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
#error .main-content .not-found ul{
	display:flex;
	transform:translateY(-200%);
	background-color:rgb(234,228,223);
	padding:10px 5px 5px;
	border-radius:10px;
}
#error .main-content .not-found ul li{
	padding:1px;
	font-size:23px;
	animation:hazumu 400ms infinite;
}

#error .main-content .not-found .item2{
	animation-delay:50ms;
}
#error .main-content .not-found .item3{
	animation-delay:100ms;
}
#error .main-content .not-found .item4{
	animation-delay:150ms;
}
#error .main-content .not-found .item5{
	animation-delay:200ms;
}
#error .main-content .not-found .item6{
	animation-delay:250ms;
}
#error .main-content .not-found .item7{
	animation-delay:300ms;
}
#error .main-content .not-found .item8{
	animation-delay:350ms;
}
#error .main-content .not-found .item9{
	animation-delay:400ms;
}

@keyframes hazumu{
	0%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(-4px);
	}
	100%{
		transform:translateY(0);
	}
}
/* #error .main-contentスタイルここまで------------------------- */